update

oeyoews · Jul 9, 2024 · 4f9c03e · 4f9c03e
1 parent a82793d
commit 4f9c03e
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 34 deletions.
diff --git a/entrypoints/background/index.ts b/entrypoints/background/index.ts
@@ -5,6 +5,7 @@ import constant from '../../utils/constant';
 import open from './open';
 import save from './save';
 
+// background 不能直接访问dom, 只能和content 通信, content(主进程) 类似一个桥梁
 export default defineBackground(() => {
   // browser.runtime.onStartup.addListener(() => { })
 
@@ -64,7 +65,8 @@ export default defineBackground(() => {
   });
 
   browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
-    if (request.info === 'tiddlywiki-send-message') {
+    // 接收content 消息
+    if (request.type === 'tiddlywiki-send-message') {
       console.log(request);
       // https://stackoverflow.com/questions/14481107/typeerror-cannot-call-method-setbadgetext-of-undefined
       browser.action.setIcon({
@@ -97,6 +99,15 @@ export default defineBackground(() => {
     });
   });
 
+  // chrome.tabs.onUpdated.addListener((tabId, info, tab) => {
+  //   if (info.favIconUrl) {
+  //     chrome.tabs.sendMessage(tabId, {
+  //       type: 'routeUpdate',
+  //       data: tab,
+  //     });
+  //   }
+  // });
+
   // 单击直接打开 panel
   chrome.sidePanel
     .setPanelBehavior({ openPanelOnActionClick: true })

diff --git a/entrypoints/background/menu.ts b/entrypoints/background/menu.ts
@@ -23,6 +23,6 @@ export const menus = [
     title: '提交 Bug',
     contexts: ['page'],
   },
-];
+] as const;
 
 export type MenuIds = (typeof menus)[number]['id'];
diff --git a/entrypoints/content.ts b/entrypoints/content.ts
@@ -1,13 +1,14 @@
 import { isProbablyReaderable, Readability } from '@mozilla/readability';
 
+// 进入页面会执行的函数, 可以操作 DOM
 export default defineContentScript({
   // matches: ['<all_urls>'],
   matches: ['https://*/*'],
   // not work 还是 不能重和？??
   exclude: ['https://google.com/*', 'https://bing.com/*', 'chrome://*'],
   runAt: 'document_start',
   main() {
-    // 检查是否为 tiddlywiki site
+    // 检查是否为 tiddlywiki site, 向bg 发送消息
     document.addEventListener('DOMContentLoaded', () => {
       const meta = document.querySelector('meta[name="generator"]');
       // @ts-ignore
@@ -17,26 +18,36 @@ export default defineContentScript({
         //   // @ts-ignore
         // )?.content;
         browser.runtime.sendMessage({
-          info: 'tiddlywiki-send-message',
+          type: 'tiddlywiki-send-message',
           // version,
         });
       } else {
-        browser.runtime.sendMessage({ info: 'general-send-message' });
+        // browser.runtime.sendMessage({ type: 'general-send-message' });
       }
     });
 
+    // 提取页面文章内容
     function getDoc() {
       const documentClone = document.cloneNode(true) as Document;
-
       const reader = new Readability(documentClone);
       const article = reader.parse();
       return article;
     }
 
-    browser.runtime.onMessage.addListener((request, sender, sendResponse) => {
-      if (request.info === 'get-doc') {
-        // @ts-ignore
-        sendResponse(getDoc());
+    // 主进程监听消息
+    browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
+      // console.log(message);
+      switch (message.type) {
+        case 'get-doc':
+          // @ts-ignore
+          sendResponse(getDoc());
+          break;
+        case 'routeUpdate':
+          // 通知 popup 更新内容
+          browser.runtime.sendMessage({ type: 'routeUpdate', data: getDoc() });
+          break;
+        default:
+          break;
       }
     });
 
@@ -56,24 +67,23 @@ export default defineContentScript({
     //   ]);
     // });
 
-    // or use execsripting
-    // scripting
-    //   window.addEventListener(
-    //     'message',
-    //     (event) => {
-    //       if (event.data.key === 'tiddlywiki-send-message') {
-    //         browser.runtime.sendMessage({
-    //           info: event.data.key,
-    //           message: event.data.message,
-    //         });
-    //       }
-    //     },
-    //     false
-    //   );
+    // or use execsripting // scripting
+    // window.addEventListener(
+    //   'message',
+    //   (event) => {
+    //     if (event.data.key === 'tiddlywiki-send-message') {
+    //       browser.runtime.sendMessage({
+    //         info: event.data.key,
+    //         message: event.data.message,
+    //       });
+    //     }
+    //   },
+    //   false
+    // );
 
-    //   const s = document.createElement('script');
-    //   s.src = browser.runtime.getURL('/injected.js');
-    //   s.onload = () => s.remove();
-    //   (document.head || document.documentElement).appendChild(s);
+    // const s = document.createElement('script');
+    // s.src = browser.runtime.getURL('/injected.js');
+    // s.onload = () => s.remove();
+    // (document.head || document.documentElement).appendChild(s);
   },
 });
diff --git a/entrypoints/injected.ts b/entrypoints/injected.ts
@@ -1,8 +1,8 @@
 export default defineUnlistedScript({
   main() {
-    // window.postMessage({
-    //   key: 'tiddlywiki-send-message',
-    //   message: 'hello',
-    // });
+    window.postMessage({
+      key: 'tiddlywiki-send-message',
+      message: 'hello',
+    });
   },
 });
diff --git a/entrypoints/sidepanel/Sidepanel.vue b/entrypoints/sidepanel/Sidepanel.vue
@@ -63,6 +63,7 @@ password.value = auth.password;
 
 dynamicTags.value = Object.values(await tagStorage.getValue());
 
+// 获取页面文章内容(-- content.ts), 可以手动触发函数， 重新提取页面文章内容
 async function getContent(
   options = {
     tip: false,
@@ -74,8 +75,9 @@ async function getContent(
   const tab = tabs[0];
   link.value = tab.url!;
   faviconUrl.value = tab.favIconUrl!;
+  // 向content.ts发送消息， 并且接受响应
   const response = await browser.tabs.sendMessage(tab.id!, {
-    info: 'get-doc',
+    type: 'get-doc',
     message: '获取文章',
   });
 
@@ -92,6 +94,9 @@ async function getContent(
 }
 
 onMounted(async () => {
+  // const bg = chrome.extension.getBackgroundPage();
+  // // @ts-ignore
+  // bg!.popUp();
   const isDark = await isDarkModeStorage.getValue();
   if (isDark) {
     document.documentElement.classList.add('dark');
@@ -355,7 +360,7 @@ const toggleInfoDialog = () => {
 <template>
   <div
     className="fixed inset-0 -z-50 size-full bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"></div>
-  <div class="inset-x-0 top-0 fixed z-[10]">
+  <div class="inset-x-0 top-0 fixed">
     <div
       class="backdrop-blur-sm z-[999] flex justify-end items-center inset-x-0 gap-1 p-2 px-6">
       <!-- <el-badge