🚀 Add custom element

src/background/background.utils.js

@@ -100,6 +100,7 @@ export function convertStringToLowerCaseAndRemoveSpecialCharacter(s) {
     .replace(/\)/g, "")
     .replace(/:/g, "")
     .replace(/'/g, "")
+    .replace(/’/g, "")
     .replace(/\?/g, "")
     .replace(/!/g, "");
 }

src/manifest.json

@@ -3,7 +3,7 @@
   "name": "Stylish Reader",
   "description": "Help you learn English better and easier.",
   "developer": { "name": "Toly Feng", "url": "https://stylishreader.com" },
-  "version": "0.0.23",
+  "version": "0.0.25",
   "icons": {
     "48": "icons/stylish-reader-48.png"
   },

src/plugins/general/index.js

@@ -1,16 +1,17 @@
 import { listenEventFromBackgroundScript, logger } from "../utils/utils";
+import { StylishReaderSpan } from "./stylishReaderSpan";
 import {
   createAndSetDefaultGroupForCurrentPage,
   createAudioTagForFloatingPanel,
   customizeGeneralEvent,
   getWordList,
   goThroughDomAndGenerateCustomElement,
-  injectPhraseFloatingPanelToShadowDom,
   injectTranslationFloatingPanelToShadowDom,
   listenEventFromOfficialWebsite,
 } from "./utils";
 
 export async function initializeGeneralWebSite() {
+  customElements.define("stylish-reader-span", StylishReaderSpan);
   logger("initializeGeneralWebSite");
   listenEventFromBackgroundScript();
   listenEventFromOfficialWebsite();
@@ -20,4 +21,7 @@ export async function initializeGeneralWebSite() {
   goThroughDomAndGenerateCustomElement(await getWordList());
   createAudioTagForFloatingPanel();
   // await injectPhraseFloatingPanelToShadowDom();
+  setInterval(async () => {
+    goThroughDomAndGenerateCustomElement(await getWordList());
+  }, 5000);
 }

src/plugins/general/stylishReaderSpan.js

@@ -0,0 +1,5 @@
+export class StylishReaderSpan extends HTMLElement {
+  constructor() {
+    super();
+  }
+}

src/plugins/general/utils.js

@@ -1,5 +1,5 @@
-import { backendServerUrl } from "../entryPoint/constants";
 import { getLoginToken } from "../../background/background.utils";
+import { backendServerUrl } from "../entryPoint/constants";
 import { stylishReaderMainColor } from "../utils/constants";
 import {
   checkUserLoginStatus,
@@ -61,19 +61,21 @@ export function goThroughDomAndGenerateCustomElement(targetWordList) {
 
   // 为所有高亮单词添加点击事件
   document.querySelectorAll(`.${clickableWordClassName}`).forEach((e) => {
-    e.addEventListener("click", (e) => {
+    const newElement = e.cloneNode(true);
+    e.parentNode.replaceChild(newElement, e);
+    newElement.addEventListener("click", (e1) => {
       hideFloatingIcon();
       sendMessageFromGeneralScriptToFloatingPanel({
         type: "search-word",
-        word: e.target.textContent,
+        word: e1.target.textContent,
       });
 
       sendMessageFromContentScriptToBackgroundScript("search-word", {
-        word: e.target.textContent,
+        word: e1.target.textContent,
       });
       sendMessageFromContentScriptToBackgroundScript(
         "play-audio-from-floating-panel",
-        e.target.textContent.toString().trim()
+        e1.target.textContent.toString().trim()
       );
     });
   });
@@ -122,7 +124,8 @@ function convertCurrentTextNodeContent(textNode, targetWordList) {
       // 这段文本不包含目标单词
       const stt = s + " ";
       if (indexList.indexOf(index) > -1) {
-        const spanElement = document.createElement("span");
+        // const spanElement = document.createElement("span");
+        const spanElement = document.createElement("stylish-reader-span");
         spanElement.textContent = stt;
         spanElement.style.color = stylishReaderMainColor;
         spanElement.classList = [clickableWordClassName];
@@ -133,16 +136,18 @@ function convertCurrentTextNodeContent(textNode, targetWordList) {
         newNodeList.push(textNode);
       }
     });
-    /**
-     * FIXME: 这里再最外层添加了一个span元素，是有一些问题的，因为增加了一个原本dom中不存在的元素
-     * 有可能会改变原有dom的样式，这里最好是插入一个自定义的dom元素，这样不会改变原有dom的结构。
-     */
-    const temporaryDivElement = document.createElement("span");
+
+    const temporaryCustomSpanElement = document.createElement(
+      "stylish-reader-span"
+    );
     newNodeList.forEach((node) => {
-      temporaryDivElement.append(node);
+      temporaryCustomSpanElement.append(node);
     });
     if (!currentTextNodeParentNode.classList.contains(clickableWordClassName)) {
-      currentTextNodeParentNode.replaceChild(temporaryDivElement, textNode);
+      currentTextNodeParentNode.replaceChild(
+        temporaryCustomSpanElement,
+        textNode
+      );
     }
   }
 }
@@ -305,7 +310,6 @@ function hideFloatingIcon() {
 function calculateFloatingPanelPosition(targetElement) {
   const x = targetElement.getBoundingClientRect().left;
   const y = targetElement.getBoundingClientRect().top;
-  showTranslationFloatingPanelTemporary();
   const floatingPanel = document.getElementById(
     translationFloatingPanelShadowRootId
   );
@@ -351,7 +355,6 @@ export async function showTranslationFloatingPanel(
   );
   translationPanel.style.display = "block";
   if (source === "selection") {
-    showTranslationFloatingPanelTemporary();
     let x = gSelectionPosition.x;
     let y = gSelectionPosition.y;
     translationPanel.style.top = y + "px";
@@ -711,6 +714,8 @@ function convertStringToLowerCaseAndRemoveSpecialCharacter(s) {
     .replaceAll("!", "")
     .replaceAll("'", "")
     .replaceAll(":", "")
+    .replaceAll("’", "")
+    .replaceAll("'", "")
     .replaceAll("?", "");
 }
 

src/webPage/translationPanel/src/utils.ts

@@ -9,6 +9,7 @@ export function convertStringToLowerCaseAndRemoveSpecialCharacter(s: string) {
     .replace(/\)/g, "")
     .replace(/:/g, "")
     .replace(/'/g, "")
+    .replace(/’/g, "")
     .replace(/\?/g, "")
     .replace(/!/g, "");
 }