【发布时间】：2019-02-15 06:38:45
【问题描述】：
我正在编写一个用于 Firefox、Edge 和 Chrome 的 Web 扩展，仅使用通用代码（唯一的区别是顶级命名空间 browser 与 chrome），在清单中使用以下权限：
"permissions": [
"*://*/*",
"activeTab",
"storage",
"webRequest"
]
（域通配符是因为这需要为 http 和 https 页面启动）
我还有一个后台脚本main.js：
var namespace = false;
if (typeof browser !== "undefined" && browser.browserAction) {
namespace = browser;
}
else if (typeof chrome !== "undefined" && chrome.browserAction) {
namespace = chrome;
}
if (namespace) {
namespace.browserAction.onClicked.addListener(e => {
namespace.tabs.executeScript({
file: `start.js`
});
});
} else {
throw new Error("This browser does not support the webextension 'browser' or 'chrome' namespace.");
}
然后是大量导致 start.js 的 content_script 条目：
"content_scripts": [
{
"matches": [ "*://*/*" ],
"js": [
"vendor/base64.js",
"vendor/codemirror.js",
"vendor/html-beautify.js",
"vendor/md5.min.js",
"vendor/mode/css/css.js",
"vendor/mode/htmlmixed/htmlmixed.js",
"vendor/mode/javascript/javascript.js",
"vendor/mode/xml/xml.js",
"utilities.js",
"modal.js",
"listening.js",
"editor.js",
"publisher.js",
"help.js",
"pagemixer.js"
],
"css": [
"vendor/codemirror.css",
"pagemix.css"
]
}
]
有了这个设置，Firefox 可以让我聚合当前选项卡应用的文档样式，方法是：
getPageStyle() {
let css = [];
Array.from(document.styleSheets).forEach(s => {
Array.from(s.cssRules).forEach(r => {
css.push(r.cssText);
});
});
return css.join('\n');
}
但是，在 Chrome 中，这会引发 CORS 错误：
未捕获的 DOMException：无法从“CSSStyleSheet”读取“cssRules”属性：无法访问规则
据我所知，我的权限表明我的网络扩展程序应该以“任何地方”的本地到当前页面权限运行，因此 CORS 不应该在这里获得成功：我该如何设置这个扩展对 Chrome 具有完整的 DOM 和 CSSOM 访问权限？
（据我所知，Cannot access cssRules from local css file in Chrome 64 描述了一般的“为什么”，但 Web 扩展应该与页面运行同源，所以这应该在没有额外权限的情况下工作，但它没有）
【问题讨论】：
-
假设您正在尝试访问该“本地文件”，即
file://URL，请尝试使用"<all_urls>"而不是"*://*/*"（后者不包括 file:// 方案） ，并确保在 chrome://extensions 页面上的扩展详细信息中启用文件访问。 -
我没有尝试通过
file://访问任何东西，这是在浏览器中http或https的任何普通页面上运行的，扩展需要聚合当前文档的CSS以便它可以打包将其关闭并将其发送到 github 存储库。 -
我认为没有实现 cssRules CORS 对扩展的规避。尝试在crbug.com 上提交功能请求。
-
你解决过这个问题吗？
标签： google-chrome-extension firefox-addon-webextensions