Chrome扩展：隔离popup.js读取主脚本全局事件及元素访问问题

一、从Popup读取MAIN世界的window.arr_values #

你当前的getPageVar方法逻辑是对的，但无法获取数据的核心问题是Event对象无法被序列化。Chrome的scripting.executeScript传递的结果必须是可JSON序列化的类型，而custom_data事件的e对象包含大量不可序列化的属性（如DOM节点引用、函数等），直接存入arr_values会导致读取失败。

修复步骤： #

1. 修改content.js，只存储可序列化的数据：
   提取事件对象中需要的属性，而非存储整个Event对象：

   window.helper = true;
   window.arr_values = [];
   document.addEventListener("custom_data", function(e) {
     // 仅保留需要的可序列化属性
     const usefulData = {
       detail: e.detail,
       type: e.type,
       timeStamp: e.timeStamp
     };
     window.arr_values.push(usefulData);
   });
   

2. 验证popup.js的读取逻辑：
   你的getPageVar方法无需修改，现在可以正常获取到可序列化的arr_values数组。若返回空数组，需确认custom_data事件已触发过。

二、从MAIN世界的content.js更新Popup的DOM #

MAIN世界的content.js无法直接访问Popup的DOM（Popup是独立的浏览器窗口，拥有自己的document上下文），必须通过Chrome扩展的消息传递机制实现通信，具体步骤如下：

方案：通过消息传递实现数据同步 #

1. 在Popup.js中监听消息并更新DOM：
   当Popup打开时，向当前激活标签页的content.js发送就绪通知，同时监听数据更新消息：

   // popup.js
   async function setupMessageListener() {
     const [activeTab] = await chrome.tabs.query({active: true, currentWindow: true});
     const tabId = activeTab.id;
   
     // 通知content.js Popup已就绪，请求当前数据
     chrome.tabs.sendMessage(tabId, {action: "popup_ready"}, (response) => {
       if (response?.arr_values) {
         updatePopupDOM(response.arr_values);
       }
     });
   
     // 监听content.js发送的数据更新
     chrome.runtime.onMessage.addListener((message) => {
       if (message.action === "update_data" && message.data) {
         updatePopupDOM(message.data);
       }
     });
   }
   
   // 更新Popup的DOM元素
   function updatePopupDOM(data) {
     const itemElement = document.getElementById("item");
     // 根据需求渲染数据，示例为JSON格式化展示
     itemElement.innerHTML = JSON.stringify(data, null, 2);
   }
   
   // 页面加载完成后初始化
   document.addEventListener("DOMContentLoaded", setupMessageListener);
   

2. 在content.js中响应Popup的就绪请求并主动发送更新：

   // content.js
   window.helper = true;
   window.arr_values = [];
   
   // 响应Popup的就绪请求，返回当前数据
   chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.action === "popup_ready") {
       sendResponse({arr_values: window.arr_values});
     }
     return true; // 异步响应需返回true
   });
   
   // 事件触发时发送数据更新到Popup
   document.addEventListener("custom_data", function(e) {
     const usefulData = {
       detail: e.detail,
       type: e.type,
       timeStamp: e.timeStamp
     };
     window.arr_values.push(usefulData);
   
     // 推送更新消息到Popup
     chrome.runtime.sendMessage({
       action: "update_data",
       data: window.arr_values
     });
   });
   

注意事项： #

• 确保manifest.json已声明"activeTab"和"scripting"权限（你的现有配置已满足）。
• 仅当Popup处于打开状态时，才能接收content.js的消息；Popup关闭后重新打开时，会触发就绪请求，同步当前最新数据。

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