开发Chrome自动截图扩展遇权限错误，请求排查

问题场景 #

开发一款自用Chrome扩展，需求是无需用户干预，每日自动访问指定URL列表并截图上传至服务器。但调用chrome.tabs.create和chrome.tabs.captureVisibleTab时遇到权限错误。

报错代码（background.js） #

chrome.tabs.create({ url: 'https://www.example.com', active: true }, tab => 
{
    if (chrome.runtime.lastError) 
        {
            console.error(chrome.runtime.lastError);
        } 
    else 
        {
            console.log(tab);
            
            chrome.tabs.captureVisibleTab(null, {format: 'png'}, function(dataURI) 
              {
                // do something
              });
       }
 });

运行错误 #

Unchecked runtime.lastError: Cannot access contents of url "". Extension manifest must request permission to access this host。

当前manifest配置 #

"host_permissions":
[
    "tabs",
    "*://*/",
    "http://*/",
    "https://*/",
    "<all_urls>",
    "notifications",
    "webRequest",
    "webNavigation",
    "management",
    "storage",
    "webRequestBlocking",
    "http://*/*",
    "background",
    "alarms",
    "desktopCapture",
    "activeTab",
    "https://*/*"
],

"permissions": [
    "tabs",
    "http://*/",
    "https://*/",
    "<all_urls>",
    "notifications",
    "webRequest",
    "webNavigation",
    "management",
    "storage",
    "webRequestBlocking",
    "http://*/*",
    "background",
    "alarms",
    "desktopCapture",
    "activeTab",
    "https://*/*"
],

 "background": {
"scripts": ["background.js"],
"persistent": true
  },

"content_scripts": [
    {
        "matches": ["http://*/*", "https://*/*"],
        "js": ["content.js"]

    }],

"browser_action": {
    "default_icon": "logo.png",
    "default_popup": "popup.html"
    }

问题排查与解决 #

1. 权限分类混乱：host_permissions仅用于配置可访问的URL规则，你把tabs、notifications等功能权限混在其中，属于配置错误；同时*://*/是无效的URL格式，正确写法为*://*/*。
2. 页面未加载完成就执行截图：新标签页创建后立即调用captureVisibleTab，此时页面可能还处于加载状态，无法正常访问内容触发权限报错。
3. 冗余配置干扰：background是独立的manifest字段，不属于权限范畴，不应出现在permissions或host_permissions中。

修正步骤 #

• 清理并修正manifest权限：

  "host_permissions": [
      "<all_urls>"
  ],
  "permissions": [
      "tabs",
      "notifications",
      "webRequest",
      "webNavigation",
      "management",
      "storage",
      "webRequestBlocking",
      "alarms",
      "desktopCapture",
      "activeTab"
  ],
  "background": {
      "scripts": ["background.js"],
      "persistent": true
  }
  

• 等待页面加载完成再截图：通过chrome.tabs.onUpdated监听标签页加载状态，确保页面完全加载后执行截图：

  chrome.tabs.create({ url: 'https://www.example.com', active: true }, tab => {
      if (chrome.runtime.lastError) {
          console.error(chrome.runtime.lastError);
          return;
      }
      
      const loadListener = (tabId, changeInfo) => {
          if (tabId === tab.id && changeInfo.status === 'complete') {
              chrome.tabs.captureVisibleTab(tab.windowId, {format: 'png'}, function(dataURI) {
                  // 处理截图数据
              });
              chrome.tabs.onUpdated.removeListener(loadListener);
          }
      };
      
      chrome.tabs.onUpdated.addListener(loadListener);
  });
  

• 适配Manifest版本：如果使用Manifest V3，需将persistent字段移除，改用service_worker配置后台脚本，同时确保权限规则符合V3规范。

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