BionicReader/content.js at main · RohitAg13/BionicReader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
const NON_READABLE_DOMAINS = [
  "www.youtube.com",
  "www.vimeo.com",
  "www.twitch.com",
  "www.twitter.com",
  "www.facebook.com",
  "www.instagram.com",
  "www.reddit.com",
  "www.linkedin.com",
  "www.pinterest.com",
  "www.quora.com",
  "www.flickr.com",
];
const READER_MODE_STYLES = `
    body{
        margin:40px auto;
        max-width:650px;
        line-height:1.6;
        font-size:18px;
        color:#444;
        padding:0 10px
    }
    h1,h2,h3{
        line-height:1.2
    }
`;

function getPageContent() {
  const selection = window.getSelection().toString().trim();
  if (selection) {
    return selection;
  }
  const readability = new Readability(document.cloneNode(true), {
    charThreshold: 20,
  });
  const article = readability.parse();
  return {
    textContent: article.textContent,
    content: article.content,
    title: article.title,
  };
}

// regex to extract content between the tags
function extractText(content) {
  const regex = /<[^>]*>/g;
  const extractedContent = content.replace(regex, "");
  return extractedContent;
}

function makeBionic(word) {
  if (word.length < 3) {
    return word + " ";
  }
  let wordLength = Math.ceil(word.length / 2);
  let prefix = word.slice(0, wordLength);
  let suffix = word.slice(wordLength);
  return "<b>" + prefix + "</b>" + suffix + " ";
}

function getBionicSentence(content) {
  const lines = content.split("\n");
  let bionicSentences = "";
  lines.forEach((line) => {
    let text = extractText(line);
    let words = new Set(text.split(" "));
    words.forEach((word) => {
      let bionicWord = makeBionic(word);
      line = line.replace(word, bionicWord);
    });
    bionicSentences += line;
  });
  return bionicSentences;
}

chrome.runtime.onMessage.addListener(async (msg) => {
  console.log("[BionicReader] Received message:", msg.type);
  switch (msg.type) {
    case "reader": {
      const { content, title } = getPageContent();
      // Reader Mode
      if (!NON_READABLE_DOMAINS.includes(new URL(location.href).hostname)) {
        console.log("[BionicReader] Updating doc");
        document.body.innerHTML = `
              <html>
                  <style type="text/css">${READER_MODE_STYLES}
                  </style>
                  <body><h1>${title}</h1>
                  ${getBionicSentence(content)}
                  </body>
              </html>
        `;
      }
    }
  }
});