Google chrome extension 在Chrome web扩展中访问和修改CSSrules

我正在编写一个在Firefox、Edge和Chrome中使用的web扩展，只使用通用代码（唯一的区别是顶级名称空间

browser

vs

Chrome

），在清单中使用以下权限：

"permissions": [
  "*://*/*",
  "activeTab",
  "storage",
  "webRequest"
]

（域通配符是因为这需要在http和https页面中启动）

我还有一个背景脚本

main.js

：

var namespace=false；
if（浏览器类型！==“未定义”&&browser.browserAction）{
名称空间=浏览器；
}
else if（chrome的类型！=“未定义”&&chrome.browserAction）{
名称空间=chrome；
}
if（名称空间）{
namespace.browserAction.onClicked.addListener（e=>{
namespace.tabs.executeScript({
文件：`start.js`
});
});
}否则{
抛出新错误（“此浏览器不支持webextension“browser”或“chrome”命名空间”）；
}

然后是大量内容_脚本条目，导致start.js：

"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错误：

未捕获的DomeException:未能从“CSSStyleSheet”读取“cssRules”属性：无法访问规则

据我所知，我的权限表明我的web扩展应该在“任何地方”以本地到当前页面的权限运行，因此CORS不应该在这里得逞：如何为Chrome设置具有完全DOM和CSSOM访问权限的扩展

---

（从我所能找到的内容来看，通常描述了“为什么”，但是web扩展应该与页面运行相同的源代码，因此这应该可以在没有额外权限的情况下运行，但它不能）

在manifest.json上添加以下部分

“网络可访问资源”：[
“供应商/*.js”，
“*.js”，
“供应商/*.css”，
“*.css”，
]，

---

在

上找到解决方案假设您正在尝试访问该“本地文件”，即文件：//URL，尝试使用

“”

而不是

“*：//*/*”

（后者不包括文件：//scheme），并确保在上的扩展名详细信息中启用文件访问chrome://extensions 页面。我没有试图通过

文件：//

访问任何内容，这是在http或https浏览器中的任何正常页面上运行的，扩展需要聚合当前的CSS文档，以便打包并发送给github repo。我认为没有实现cssRules CORS对扩展的规避。尝试在上提交一个功能请求。你曾经解决过这个问题吗？这已经是事实了-修改了帖子以澄清这一点。但仅此一点无法访问活动选项卡的

document.styleSheets

上的

cssRules

。