可选择主题

greycodee · Jul 24, 2023 · ab764fa · ab764fa
1 parent 34c367f
commit ab764fa
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 51 deletions.
diff --git a/manifest.json b/manifest.json
@@ -20,13 +20,7 @@
 
     "128": "images/flomo128.png"
   },
-  "content_scripts": [
-    {
-      "matches": ["https://v.flomoapp.com/*","https://flomoapp.com/*"],
-      "js": ["content.js","include/highlight.min.js"]
 
-    }
-  ],
   "web_accessible_resources": [
     {
       "resources": ["images/*"],

diff --git a/popup/popup.html b/popup/popup.html
@@ -7,12 +7,12 @@
     <style></style>
   </head>
   <body>
-    <h1>Popup</h1>
+    <h3>Choose Theme</h3>
 
-    <label for="lang">Theme</label>
-    <select name="languages" id="lang">
-      <option value="stackoverflow-light">stackoverflow-light</option>
-      <option value="stackoverflow-dark">stackoverflow-dark</option>
+    <label for="theme">Theme</label>
+    <select name="themes" id="theme">
+      <option value="stackoverflow-light.css">stackoverflow-light</option>
+      <option value="stackoverflow-dark.css">stackoverflow-dark</option>
     </select>
 
     <script src="popup.js"></script>

diff --git a/popup/popup.js b/popup/popup.js
@@ -1,21 +1,18 @@
- // 获取选择的语言
- const lang = document.querySelector('#lang');
- // 保存选择的语言
- lang.addEventListener('change', (e) => {
-     console.log(e.target.value);
-     // 获取选择的语言
-     const language = e.target.value;
-     // 保存选择的语言
-     chrome.storage.sync.set({language}, () => {
-         console.log('保存成功');
-        //  chrome.scripting.insertCSS({
-        //     files: ['include/theme/stackoverflow-light.css']
-        //   });
-     });
- });
+// 获取选择的语言
+const theme = document.querySelector("#theme");
+// 保存选择的语言
+theme.addEventListener("change", (e) => {
+  console.log(e.target.value);
+  // 获取选择的语言
+  const chooseTheme = e.target.value;
+  // 保存选择的语言
+  chrome.storage.sync.set({ chooseTheme }, () => {
+    console.log("保存成功");
+  });
+});
 
- // 获取保存的语言
- chrome.storage.sync.get(['language'], (result) => {
-     // 设置选择的语言
-     lang.value = result.language;
- });
+// 获取保存的语言
+chrome.storage.sync.get(["chooseTheme"], (result) => {
+  // 设置选择的语言
+  theme.value = result.chooseTheme;
+});
diff --git a/content.js → scripts/content.js b/content.js → scripts/content.js
@@ -17,7 +17,7 @@ window.onload = function () {
   hljsbtn.style.color = "#fff";
   hljsbtn.style.cursor = "pointer";
   hljsbtn.style.position = "fixed";
-  hljsbtn.style.bottom = "60px";
+  hljsbtn.style.bottom = "80px";
   hljsbtn.style.right = "30px";
   hljsbtn.style.zIndex = "9999";
   hljsbtn.style.display = "flex";
@@ -72,14 +72,5 @@ window.onload = function () {
   });
   document.body.appendChild(hljsbtn);
 
-  chrome.scripting.insertCSS({
-    target: {
-        tabId: tab.id,
-    },
-    files: ['include/theme/stackoverflow-light.css']
-  }).then(()=>{
-    console.log("insert css success");
-    }).catch((err)=>{
-        console.log("insert css error",err);
-    });
+
 };
diff --git a/service-worker.js b/service-worker.js
@@ -1,11 +1,58 @@
-chrome.storage.onChanged.addListener((changes,areaName) => {
-        console.log("storage change",changes,areaName);
-    }
-  )
+chrome.storage.onChanged.addListener((changes, areaName) => {
+  if (changes.chooseTheme.oldValue) {
+    chrome.scripting.unregisterContentScripts({
+      ids: [changes.chooseTheme.oldValue],
+    });
+  }
+
+  if (changes.chooseTheme.newValue) {
+    const new_flomo_theme = {
+      id: changes.chooseTheme.newValue,
+      matches: ["https://v.flomoapp.com/*", "https://flomoapp.com/*"],
+      css: ["include/theme/" + changes.chooseTheme.newValue],
+      runAt: "document_end",
+    };
+    chrome.scripting.registerContentScripts([new_flomo_theme]);
+
+    // 使新的css生效
+    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+      // 注入新的内容脚本,如果当前页面是chrome:// 则不注入
+      if (tabs[0].url.indexOf("chrome://") > -1) {
+        return;
+      }
+      console.log("注入新的css" + tabs[0].id);
+      chrome.scripting.insertCSS({
+        target: {
+          tabId: tabs[0].id,
+        },
+        files: ["include/theme/" + changes.chooseTheme.newValue],
+      });
+    });
+  }
+});
 
-  chrome.tabs.onCreated.addListener(
-    (tab)=>{
-        console.log("tab created",tab);
-
+const DEFAULT_THEME = "stackoverflow-dark.css";
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.storage.sync.set({ chooseTheme: DEFAULT_THEME }, () => {
+    console.log("保存成功");
+  });
+});
+
+function getTheme() {
+  // 获取当前主题
+  chrome.storage.sync.get("chooseTheme", (result) => {
+    if (result.chooseTheme) {
+      console.log("当前主题为", result.chooseTheme);
+      DEFAULT_THEME = result.chooseTheme;
     }
-  )
+  });
+  return DEFAULT_THEME;
+}
+
+const flomo_content_script = {
+  id: "flomo_content_script",
+  matches: ["https://v.flomoapp.com/*", "https://flomoapp.com/*"],
+  js: ["scripts/content.js", "include/highlight.min.js"],
+  runAt: "document_end",
+};
+chrome.scripting.registerContentScripts([flomo_content_script]);