Chrome扩展Manifest V3安装报错：无法访问页面内容权限问题

报错原因分析 #

1. 未处理异步Promise错误：chrome.scripting.executeScript和chrome.scripting.insertCSS都是异步Promise操作，你的代码没有添加错误捕获逻辑，当某个标签页注入失败时，会抛出未捕获的Promise错误，也就是你看到的权限报错。
2. 旧标签页权限生效延迟：扩展刚安装时，Chrome不会自动为已打开的现有标签页授予host_permissions权限，即使配置了<all_urls>，对这些旧标签页执行注入操作时仍会触发权限不足问题。
3. URL过滤逻辑不严谨：当前的isSupportedURL仅通过startsWith('http')判断，可能会包含格式错误的HTTP URL或其他不在权限范围内的特殊URL。
4. Manifest配置可能存在转义错误：如果你的manifest.json中host_permissions实际写的是"<all_urls>"（HTML转义字符），而非正确的"<all_urls>"，会导致权限配置不生效。

解决方法 #

1. 修复Manifest配置 #

确保host_permissions使用正确格式，去掉HTML转义字符：

"host_permissions": ["<all_urls>"]

2. 添加异步操作的错误捕获 #

在执行脚本注入和CSS插入时，添加catch处理错误，避免未捕获的Promise报错：

chrome.runtime.onInstalled.addListener(() => {
    chrome.tabs.query({}, tabs => {
        for (const tab of tabs) {
            if (tab.url && isSupportedURL(tab.url)) {
                // 注入脚本并处理错误
                chrome.scripting.executeScript({
                    target: { tabId: tab.id },
                    files: ['scripts/contentScript.js'],
                }).catch(err => {
                    console.log(`标签页 ${tab.id} 注入脚本失败:`, err);
                });
                // 插入CSS并处理错误
                chrome.scripting.insertCSS({
                    target: { tabId: tab.id },
                    files: ['css/content.css'],
                }).catch(err => {
                    console.log(`标签页 ${tab.id} 插入CSS失败:`, err);
                });
            }
        }
    });
});

3. 优化URL过滤逻辑 #

使用URL对象更严谨地验证URL格式和协议，避免无效URL被选中：

function isSupportedURL(url) {
    try {
        const urlObj = new URL(url);
        // 仅允许http/https协议，排除Chrome应用商店页面
        return (urlObj.protocol === 'http:' || urlObj.protocol === 'https:') 
            && !urlObj.href.startsWith('https://chrome.google.com/webstore');
    } catch (e) {
        // 格式错误的URL直接返回false
        return false;
    }
}

4. 处理旧标签页权限问题 #

由于扩展安装后旧标签页不会自动获得权限，你可以：

• 提示用户刷新标签页：在扩展安装完成后，通过弹出通知或浏览器动作提示用户刷新已打开的相关标签页，确保权限生效。
• 跳过无法注入的标签页：通过catch捕获错误后直接跳过，不影响其他标签页的注入操作。

额外优化：避免重复注入 #

你已经在manifest.json中配置了content_scripts，会自动为新打开的标签页注入脚本和CSS，因此在onInstalled中只需要处理已打开的标签页即可，无需担心新标签页的重复注入问题。

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