Chrome扩展：default_popup与web_accessible_resources脚本交互方案咨询

核心思路 #

通过Popup ↔ Content Script（Chrome扩展API通信） + Content Script ↔ 页面注入脚本（自定义DOM事件） 的两层通信链路，实现复选框状态对code.js方法的控制，无需重新注入整个脚本。

步骤1：Popup与Content Script的通信 #

当Popup里的复选框状态变化时，将状态同步到本地存储并发送给当前标签页的Content Script。

Popup代码示例（popup.js） #

const toggleCheckbox = document.getElementById('your-checkbox-id');

// 页面加载时从本地存储读取并同步状态
chrome.storage.local.get(['isFeatureEnabled'], (result) => {
  toggleCheckbox.checked = result.isFeatureEnabled || false;
});

// 复选框状态变化时触发通信
toggleCheckbox.addEventListener('change', () => {
  const isEnabled = toggleCheckbox.checked;
  chrome.storage.local.set({ isFeatureEnabled: isEnabled }, () => {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, {
        type: 'TOGGLE_FEATURE',
        enabled: isEnabled
      });
    });
  });
});

步骤2：Content Script转发状态到页面注入脚本 #

Content Script收到Popup的状态后，通过自定义DOM事件传递给页面上下文的code.js（两者处于不同上下文，无法直接共享变量）。

Content Script代码示例（content.js） #

// 监听Popup发来的消息
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === 'TOGGLE_FEATURE') {
    const toggleEvent = new CustomEvent('featureToggle', {
      detail: { enabled: message.enabled }
    });
    window.dispatchEvent(toggleEvent);
  }
});

// 页面初始化时，同步本地存储的初始状态
chrome.storage.local.get(['isFeatureEnabled'], (result) => {
  const initEvent = new CustomEvent('featureToggle', {
    detail: { enabled: result.isFeatureEnabled || false }
  });
  window.dispatchEvent(initEvent);
});

步骤3：页面注入脚本（code.js）监听状态并控制方法 #

在code.js中监听自定义事件，根据状态决定是否执行目标方法。

code.js代码示例 #

// 定义需要控制的目标方法
function targetBusinessMethod() {
  console.log('执行目标业务逻辑');
  // 你的业务代码
}

// 存储功能开关状态
let isFeatureEnabled = false;

// 监听状态切换事件
window.addEventListener('featureToggle', (event) => {
  isFeatureEnabled = event.detail.enabled;
  // 可选：状态变更时立即执行对应操作
  isFeatureEnabled ? console.log('功能已启用') : console.log('功能已禁用');
});

// 在需要触发方法的场景中先判断状态
function triggerAction() {
  if (isFeatureEnabled) {
    targetBusinessMethod();
  }
}

// 示例：绑定页面元素触发逻辑
document.querySelector('#target-element')?.addEventListener('click', triggerAction);

步骤4：manifest.json关键配置 #

确保已正确配置权限、Content Script和可访问资源：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "permissions": ["storage", "tabs"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换为你的目标网站规则
      "js": ["content.js"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["code.js"],
      "matches": ["<all_urls>"] // 替换为你的目标网站规则
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

方案优势 #

• 无需重新注入整个code.js，避免重复加载和上下文冲突
• 状态通过本地存储持久化，页面刷新后仍能保持设置
• 严格遵循Chrome扩展的上下文隔离安全规则，通信链路清晰

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