refactor network request (#57)

* 🚧 Add pop module

* 🚧 Modify build & release command.

* 🚧 Config to show popup page.

* 🚧 Remove duplicated code.

* 🚧 Add tailwindcss support.

* 🔖 Bump version.

* 🚧 Increase version number.

* 🎨 Update proto.

* 🎨 Ignore source files in popup module.

* 🎨 Add new module.

* 🎨 Remove unnecessary code.

* 🎨 Do not use Vue framework.

* 🎨 Bump version.

---------

Co-authored-by: Toly <tolerious.feng@kuka.com>

.gitignore

@@ -14,7 +14,9 @@ src/background_script.js
 src/assets/js/stylish-reader-video-page.js
 src/assets/css/stylish-reader-video-page-index.css
 src/assets/css/stylish-reader-translation-panel-index.css
+src/assets/css/translation-panel-index.css
 src/assets/js/stylish-reader-translation-panel.js
+src/assets/js/translation-panel.js
 src/assets/js/youtube-transport.js
 src/assets/js/stylish-reader-phrase-floating-panel.js
 src/assets/css/stylish-reader-phrase-floating-panel-index.css

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.10",
+  "version": "0.0.12",
   "icons": {
     "48": "icons/stylish-reader-48.png"
   },
@@ -21,7 +21,8 @@
   "web_accessible_resources": [
     "assets/stylish-reader-48.png",
     "assets/right-arrow.png",
-    "assets/cancel-button.png"
+    "assets/cancel-button.png",
+    "popup/dist/*"
   ],
   "permissions": [
     "activeTab",
@@ -37,6 +38,7 @@
       "48": "icons/stylish-reader-48.png",
       "96": "icons/stylish-reader-48.png"
     },
-    "default_title": "Stylish Reader"
+    "default_title": "Stylish Reader",
+    "default_popup": "popup/dist/index.html"
   }
 }

src/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "Stylish Reader",
+  "name": "stylish-reader",
   "version": "0.0.1",
   "description": "",
   "scripts": {

src/plugins/entryPoint/background.js

@@ -38,16 +38,6 @@ async function notifyClickEvent(type = "show", message = "default") {
   });
 }
 
-// 处理 content script 发来的消息
-function handleResponse(message) {
-  console.log(message);
-}
-
-// 处理错误
-function handleError(error) {
-  console.log(`Error: ${error}`);
-}
-
 // 扩展图标被点击
 async function extensionIconClicked(tab, clickEvent) {}
 

src/plugins/general/index.js

@@ -14,8 +14,8 @@ export async function initializeGeneralWebSite() {
   listenEventFromBackgroundScript();
   listenEventFromOfficialWebsite();
   await injectTranslationFloatingPanelToShadowDom();
-  await injectPhraseFloatingPanelToShadowDom();
   customizeGeneralEvent();
   await createAndSetDefaultGroupForCurrentPage();
   goThroughDomAndGenerateCustomElement(await getWordList());
+  // await injectPhraseFloatingPanelToShadowDom();
 }

src/plugins/general/utils.js

@@ -525,17 +525,15 @@ async function createTranslationFloatingPanelToShadowDom(x = 0, y = 0) {
   const styleElement = document.createElement("style");
   styleElement.setAttribute("type", "text/css");
   const cssCode = await injectCssToShadowDom(
-    "assets/css/stylish-reader-translation-panel-index.css"
+    "assets/css/translation-panel-index.css"
   );
   styleElement.appendChild(document.createTextNode(cssCode));
 
   // 在shadow dom中添加挂载点
   shadow.appendChild(mountPoint);
 
   // 在shadow dom中添加脚本挂载点
-  const jsCode = await injectJsToShadowDom(
-    "assets/js/stylish-reader-translation-panel.js"
-  );
+  const jsCode = await injectJsToShadowDom("assets/js/translation-panel.js");
   vueScript.textContent = jsCode;
   shadow.appendChild(vueScript);
 
@@ -546,6 +544,7 @@ async function createTranslationFloatingPanelToShadowDom(x = 0, y = 0) {
   document.body.appendChild(shadowRoot);
 
   eval(vueScript.textContent);
+  return Promise.resolve();
 }
 
 function checkIfTranslationFloatingPanelExist() {
@@ -674,6 +673,7 @@ function convertStringToLowerCaseAndRemoveSpecialCharacter(s) {
     .replaceAll("(", "")
     .replaceAll(")", "")
     .replaceAll("!", "")
+    .replaceAll("'", "")
     .replaceAll(":", "");
 }