Merge pull request Sulagna-Dutta-Roy#543 from akshbansal61203/akshban…

…sal61203-patch-3 Fixes#376:Word Defination Extension
akshbansal61203 · May 30, 2024 · 90ff368 · 90ff368
2 parents a63f24e + 01ea7b0
commit 90ff368
Show file tree

Hide file tree

Showing 6 changed files with 246 additions and 0 deletions.
diff --git a/Word Defination/content.js b/Word Defination/content.js
@@ -0,0 +1,20 @@
+window.addEventListener("mouseup", handleSelection);
+
+var selectedText;
+
+function handleSelection() {
+  selectedText = window.getSelection().toString().replace(/\s/g, "");
+}
+
+// receive the message from popup.
+chrome.runtime.onMessage.addListener(gotMessage);
+
+function gotMessage(message, sender, sendResponse) {
+  let msg =
+    selectedText && selectedText.length > 0
+      ? selectedText
+      : "_TextNotSelected_";
+
+  // send the selected text to the popup.js as a response to the message.
+  sendResponse({ swor: msg });
+}
diff --git a/Word Defination/manifest.json b/Word Defination/manifest.json
@@ -0,0 +1,24 @@
+{
+  "manifest_version": 3,
+  "name": "Word Defination",
+  "version": "1.0.0",
+  "action": {
+      "default_icon": "word.png",
+      "default_title": "Defination",
+      "default_popup": "popup/popup.html"
+  },
+  "description": "Select a word on the webpage and open popup to look up the defination",
+  "author": "Akshar Bansal",
+  "content_scripts": [
+      {
+        "matches": [
+          "<all_urls>"
+        ],
+        "js": ["content.js"]
+      }
+    ],
+    "permissions": [
+      "activeTab"
+    ]
+}
+
diff --git a/Word Defination/popup/popup.html b/Word Defination/popup/popup.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+      <h2 id="error"></h2>
+      <h1 id="word"></h1>
+      <p id="phonetic"></p>
+      <div id="definition"></div>
+      <p id="example"></p>
+      <div id="navigatecontainer" class="navigate-container hidenavigator">
+        <span id="prev" class="navigator previous">&laquo;</span>
+        <span id="next" class="navigator next">&raquo;</span>
+      </div>
+      <script src="popup.js" type="text/javascript"></script>
+  </body>
+</html>
diff --git a/Word Defination/popup/popup.js b/Word Defination/popup/popup.js
@@ -0,0 +1,107 @@
+// get the currently active tab in the current window
+// and then invoke the callback function gotTabs.
+let query = { active: true, currentWindow: true };
+chrome.tabs.query(query, gotTabs);
+
+// function to check current url and eliminate offline urls.
+function safeUrl(url) {
+  return url.startsWith("https://") || url.startsWith("http://");
+}
+
+// callback function
+function gotTabs(tabs) {
+  // prevent offline urls to run the extension by throwing error.
+  if (!safeUrl(tabs[0].url)) {
+    document.getElementById("error").innerHTML = "Oh no!";
+    document.getElementById("definition").innerHTML = "Unsupported Page.";
+    return;
+  }
+
+  let msg = {
+    txt: "hello from popup",
+  };
+
+  // send message to the content script
+  chrome.tabs.sendMessage(tabs[0].id, msg, function (response) {
+    if (!response) {
+      document.getElementById("phonetic").innerHTML =
+        "Refresh the page and try again.";
+    } else if (response.swor === "_TextNotSelected_") {
+      document.getElementById("phonetic").innerHTML = "Welcome!";
+      document.getElementById("example").innerHTML =
+        "Please select a word to find its definition.";
+    } else {
+      let swo = response.swor;
+      swo = swo.replace(/[^a-zA-Z ]/g, "");
+      dictionary(swo);
+    }
+  });
+}
+
+let wordef,
+  word,
+  phonetic,
+  pos,
+  defin,
+  example,
+  sourceurl,
+  index = 0,
+  indlimit;
+
+// function to fetch and show definition on the popup
+async function dictionary(query) {
+  let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${query}`;
+  let response = await fetch(url);
+  wordef = await response.json();
+  if (wordef && !wordef.title) {
+    indlimit = wordef[0].meanings.length;
+    word = wordef[0].word;
+    phonetic = wordef[0].phonetic ? wordef[0].phonetic : "";
+    sourceurl = `https://en.wiktionary.org/wiki/${word}`;
+    index = 0;
+
+    setValues();
+
+    if (indlimit > 1) {
+      document
+        .getElementById("navigatecontainer")
+        .classList.remove("hidenavigator");
+    }
+  } else if (wordef.title) {
+    document.getElementById("error").innerHTML = "⚠  " + wordef.title;
+  }
+}
+
+document.getElementById("prev").addEventListener("click", handlePrevious);
+document.getElementById("next").addEventListener("click", handleNext);
+
+function handlePrevious() {
+  index = index - 1;
+  if (index < 0) index = indlimit - 1;
+  setValues();
+}
+
+function handleNext() {
+  index = index + 1;
+  if (index >= indlimit) index = 0;
+  setValues();
+}
+
+function setValues() {
+  pos = wordef[0].meanings[index].partOfSpeech;
+  defin = wordef[0].meanings[index].definitions[0].definition;
+  example = wordef[0].meanings[index].definitions[0].example
+    ? wordef[0].meanings[index].definitions[0].example
+    : null;
+
+  document.getElementById(
+    "word"
+  ).innerHTML = `${word} <a href=${sourceurl} class="searchanchor" target="_blank"><img class="searchsvg" title="read more" src = "../assets/searchonweb.svg" alt="read more"/><a>`;
+  document.getElementById("phonetic").innerHTML = `${phonetic}  (${pos})`;
+  document.getElementById("definition").innerHTML = defin;
+  if (example) {
+    document.getElementById("example").innerHTML = `Example: ${example}`;
+  } else {
+    document.getElementById("example").innerHTML = "";
+  }
+}
diff --git a/Word Defination/popup/style.css b/Word Defination/popup/style.css
@@ -0,0 +1,76 @@
+body {
+    min-width: 300px;
+    text-align: center;
+  }
+
+  h2 {
+    color: #2655ff;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  div {
+    font-size: 1.1rem;
+    background-color: #ffa27d;
+  }
+
+  #phonetic {
+    color: brown;
+    font-size: 1rem;
+  }
+
+  #example {
+    font-size: 1rem;
+    background-color: #da9dda;
+  }
+
+  .navigate-container {
+    display: flex;
+    justify-content: space-between;
+    text-align: center;
+    background-color: #ffffff;
+  }
+
+  .navigator {
+    text-decoration: none;
+    display: inline-block;
+    padding: 6px 14px;
+  }
+
+  .hidenavigator {
+    display: none;
+  }
+
+  .navigator:hover {
+    cursor: pointer;
+    background-color: #ddd;
+    color: black;
+  }
+
+  .previous,
+  .next {
+    background-color: #f1f1f1;
+    color: black;
+  }
+
+  .searchsvg {
+    width: 17px;
+    -webkit-user-drag: none;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+  }
+
+  .searchanchor {
+    text-decoration: none;
+    outline: none;
+  }
+
+  .searchanchor:hover {
+    text-decoration: none;
+    outline: none;
+    border: none;
+  }
diff --git a/Word Defination/word.png b/Word Defination/word.png