如何通过页面MutationObserver向扩展Service Worker持续发送更新？

核心思路 #

放弃chrome.scripting.executeScript的一次性执行模式，改用持久化内容脚本配合Chrome原生通信API，实现持续的数据流传输。以下是两种可行方案：

方案一：用chrome.runtime.sendMessage直接推送 #

这是Chrome扩展最常用的跨上下文通信方式，适合持续发送消息。

1. 注册持久化内容脚本
   在扩展的manifest.json中配置内容脚本，或者用chrome.scripting.registerContentScripts动态注册，确保脚本在目标页面加载后长期运行：

   // manifest.json示例配置
   {
     "manifest_version": 3,
     "permissions": ["scripting", "activeTab", "nativeMessaging"],
     "content_scripts": [
       {
         "matches": ["https://your-target-site.com/*"],
         "js": ["content.js"],
         "run_at": "document_idle"
       }
     ]
   }
   

2. 内容脚本中监控并发送更新
   在content.js里初始化MutationObserver，捕获文本变化后立即发送给Service Worker：

   // content.js
   const observer = new MutationObserver((mutations) => {
     mutations.forEach(mutation => {
       // 过滤有效文本更新（根据实际需求调整判断逻辑）
       let targetText = '';
       if (mutation.type === 'characterData') {
         targetText = mutation.target.textContent.trim();
       } else if (mutation.type === 'childList' && mutation.addedNodes.length) {
         targetText = [...mutation.addedNodes]
           .filter(node => node.nodeType === Node.TEXT_NODE)
           .map(node => node.textContent.trim())
           .join(' ');
       }
       if (targetText) {
         // 发送文本更新到Service Worker
         chrome.runtime.sendMessage({
           type: 'PAGE_TEXT_UPDATE',
           content: targetText
         });
       }
     });
   });
   
   // 启动监控，按需调整监听范围和选项
   observer.observe(document.body, {
     childList: true,
     subtree: true,
     characterData: true,
     characterDataOldValue: false
   });
   

3. Service Worker接收并转发
   在Service Worker中监听chrome.runtime.onMessage事件，收到消息后转发给Native Messaging应用：

   // sw.js
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.type === 'PAGE_TEXT_UPDATE') {
       // 替换为你的Native Messaging应用ID
       chrome.runtime.sendNativeMessage('com.your.native.app', {
         text: message.content
       }, (response) => {
         if (chrome.runtime.lastError) {
           console.error('Native消息发送失败:', chrome.runtime.lastError);
         }
       });
     }
   });
   

方案二：用Broadcast Channel API通信 #

如果需要更轻量化、不依赖Chrome扩展API的跨上下文通信，可以使用Broadcast Channel：

1. 内容脚本发送消息

   // content.js
   const updateChannel = new BroadcastChannel('page-text-updates');
   const observer = new MutationObserver((mutations) => {
     // 同方案一的文本提取逻辑
     mutations.forEach(mutation => {
       let targetText = '';
       if (mutation.type === 'characterData') {
         targetText = mutation.target.textContent.trim();
       } else if (mutation.type === 'childList' && mutation.addedNodes.length) {
         targetText = [...mutation.addedNodes]
           .filter(node => node.nodeType === Node.TEXT_NODE)
           .map(node => node.textContent.trim())
           .join(' ');
       }
       if (targetText) {
         updateChannel.postMessage({ content: targetText });
       }
     });
   });
   observer.observe(document.body, { /* 监控选项 */ });
   

2. Service Worker接收消息

   // sw.js
   self.addEventListener('activate', () => {
     const updateChannel = new BroadcastChannel('page-text-updates');
     updateChannel.onmessage = (event) => {
       // 转发给Native Messaging应用
       chrome.runtime.sendNativeMessage('com.your.native.app', event.data);
     };
   });
   

关键注意事项 #

• 避免使用chrome.scripting.executeScript的单次执行：它仅支持返回promise的一次性结果，无法处理持续的数据流。
• 优化MutationObserver性能：缩小监听范围（比如只监听特定DOM元素而非整个body），减少不必要的突变监听，避免页面卡顿。
• 权限配置：确保扩展manifest中包含scripting、activeTab（或对应的host_permissions）以及nativeMessaging权限。

内容的提问来源于stack exchange，提问作者Aly