diff --git a/src/background/background.utils.js b/src/background/background.utils.js index 697ee36..034b726 100644 --- a/src/background/background.utils.js +++ b/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, ""); } diff --git a/src/manifest.json b/src/manifest.json index 957f21c..89971d8 100644 --- a/src/manifest.json +++ b/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" }, diff --git a/src/plugins/general/index.js b/src/plugins/general/index.js index 7c667c6..ea2ccd7 100644 --- a/src/plugins/general/index.js +++ b/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); } diff --git a/src/plugins/general/stylishReaderSpan.js b/src/plugins/general/stylishReaderSpan.js new file mode 100644 index 0000000..fd2d9cd --- /dev/null +++ b/src/plugins/general/stylishReaderSpan.js @@ -0,0 +1,5 @@ +export class StylishReaderSpan extends HTMLElement { + constructor() { + super(); + } +} diff --git a/src/plugins/general/utils.js b/src/plugins/general/utils.js index e347835..242a93c 100644 --- a/src/plugins/general/utils.js +++ b/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("?", ""); } diff --git a/src/webPage/translationPanel/src/utils.ts b/src/webPage/translationPanel/src/utils.ts index 41a1738..31a7953 100644 --- a/src/webPage/translationPanel/src/utils.ts +++ b/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, ""); }