diff --git a/entrypoints/background/index.ts b/entrypoints/background/index.ts index e0ef995..7ca51d7 100644 --- 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 index 28dc802..dba0593 100644 --- 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 index 81c6ea2..cd01ceb 100644 --- a/entrypoints/content.ts +++ b/entrypoints/content.ts @@ -1,5 +1,6 @@ import { isProbablyReaderable, Readability } from '@mozilla/readability'; +// 进入页面会执行的函数, 可以操作 DOM export default defineContentScript({ // matches: [''], matches: ['https://*/*'], @@ -7,7 +8,7 @@ export default defineContentScript({ 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 index a8026ba..f17a240 100644 --- 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 index 75cdb48..6a2e403 100644 --- 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 = () => {