Chrome 扩展程序编程 CSS 注入错误到活动选项卡答案

【问题标题】：Chrome extension programmatic CSS injection error into active tabChrome 扩展程序编程 CSS 注入错误到活动选项卡
【发布时间】：2020-06-22 15:44:33
【问题描述】：

我想在满足特定条件时将 CSS 文件注入活动选项卡。我设法通过在清单中添加"<all_urls>" 权限使其工作，尽管在文档中写到"activeTab" 就足够了：https://developer.chrome.com/extensions/activeTab#what-activeTab-allows

通过下面的代码，我得到了

无法访问页面内容。扩展清单必须请求访问相应主机的权限。

虽然用"<all_urls>" 替换"activeTab" 可以正常工作。这是为什么呢？

manifest.json

...
"permissions": [
    "activeTab"
],

"content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"]
    }
]

contentScript.js

...
chrome.runtime.sendMessage({injectCSS: true});

background.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.injectCSS) {
        chrome.tabs.insertCSS(null, {
            file: 'syle.css'
        });
    }
});

【问题讨论】：

标签： javascript google-chrome-extension firefox-addon

【解决方案1】：

activeTab 权限允许扩展临时访问用户调用扩展程序时当前活动的选项卡 - 例如通过单击其浏览器操作。对选项卡的访问持续到用户在该页面上，并在用户导航离开或关闭时被撤销选项卡。

这可以作为 , 但是的许多用途的替代方案安装过程中不显示警告消息

使用 activeTab 时，您必须调用扩展程序才能访问该选项卡。

https://developer.chrome.com/extensions/activeTab

【讨论】：