如何在本地测试时触发Chrome扩展optional permissions授权弹窗

问题原因 #

1. 你遇到的Cannot read property 'addEventListener' of null报错和你猜测的完全一致：background.js是Chrome扩展的后台脚本，运行在扩展独立的沙箱环境中，完全无法访问你目标网站的DOM，你在后台脚本中查询.cbtn元素自然返回空，调用事件监听方法就会触发报错。
2. 另一个隐藏问题：Chrome扩展的可选权限必须提前在manifest.json中声明optional_permissions字段，你目前未声明bookmarks权限，就算解决了DOM监听的问题，权限申请接口也无法正常调用。

完整解决步骤 #

步骤1：修改manifest.json配置 #

首先补充optional_permissions字段声明可选权限，同时配置内容脚本注入规则，让扩展可以在你的目标网站注入脚本监听按钮点击。
示例（Manifest V3版本）：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "optional_permissions": ["bookmarks"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["<你自己网站的匹配规则，比如https://example.com/*>"],
      "js": ["content.js"]
    }
  ]
}

步骤2：新增内容脚本content.js #

内容脚本运行在网页上下文，可以正常访问网页DOM，在这里监听按钮点击，点击后给后台脚本发送消息申请权限：

document.addEventListener("DOMContentLoaded", function() {
  const cbtn = document.querySelector('.cbtn');
  // 加判空逻辑避免页面没有对应元素时报错
  if (!cbtn) return;
  cbtn.addEventListener('click', function() {
    console.log('now activating prompt!!');
    // 向后台发送权限申请请求
    chrome.runtime.sendMessage({
      action: 'request_bookmark_permission'
    });
  });
});

步骤3：修改background.js代码 #

后台脚本只需要监听内容脚本发来的消息，收到后调用权限申请接口即可，不需要任何DOM相关操作：

// 监听来自内容脚本的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action !== 'request_bookmark_permission') return;
  chrome.permissions.request({
    permissions: ["bookmarks"]
  }, function(granted) {
    if (granted) {
      console.log('Access granted');
      // 后续执行权限授予后的逻辑
    } else {
      console.log('Access denied');
      // 后续执行权限拒绝后的逻辑
    }
  });
  // 异步处理需要返回true保持消息端口开放
  return true;
});

注意事项 #

• chrome.permissions.request接口必须在用户交互的上下文触发才能正常弹出授权窗口，上述流程通过按钮点击触发符合要求
• 内容脚本无法直接调用chrome.permissions系列接口，必须通过消息通信交由后台脚本执行
• 如果你使用的是Manifest V2版本，只需对应调整manifest的后台配置字段即可，核心逻辑完全一致

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