如何解决Chrome扩展开发中Cannot access a chrome:// URL错误

你遇到的错误是因为Chrome禁止向chrome://这类受保护的内置URL注入脚本和样式，你的background.js里直接执行了executeScript和insertCSS，不管当前页面是什么，所以在起始页（chrome://newtab/）点击扩展时就会触发这个报错。

根本修复方案：在注入前判断URL #

直接在background.js里先检查当前tab的URL，跳过chrome://开头的页面，就不会触发错误了，同时也不需要再通过关闭窗口来处理：

修改后的background.js代码：

chrome.action.onClicked.addListener(function(tab) {
    // 先判断是否是chrome://开头的受保护URL
    if (!tab.url.startsWith('chrome://')) {
        chrome.scripting.executeScript({
            target: {tabId: tab.id},
            files: ['js/inject.js']
        });
        chrome.scripting.insertCSS({
            target: {tabId: tab.id},
            files: ['css/inject.css']
        });
    }
});

优化App.vue的逻辑（可选） #

如果你的扩展弹出窗口还是会在chrome://页面打开，那可以保留App.vue里的判断，但建议补全代码（你当前代码缺少闭合逻辑），同时可以加上提示或者直接不渲染内容：

修改后的App.vue代码：

// 先补全queryOptions，指定获取当前活动标签页
const queryOptions = { active: true, currentWindow: true };
chrome.tabs.query(queryOptions, (tabs) => {
  let url = tabs[0].url;
  if (url.startsWith("chrome://")) {
    // 可选：给用户提示后再关闭窗口
    console.log('无法在该内置页面使用此扩展');
    window.close();
  }
});

这样调整后，既不会触发注入脚本的错误，也能在chrome://页面点击扩展时直接关闭弹出窗口（或提示用户），从根源上解决问题。

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