访问和修改ChromeWeb扩展中的CSSRules

我正在编写一个Web扩展,用于firefox、edge和chrome,只使用通用代码(唯一的区别是顶级名称空间 browser VS 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_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”属性:无法访问规则

据我所知,我的权限说我的Web扩展应该以“任何地方”的本地页面权限运行,因此CORS不应该这样做:我如何设置这个扩展,使其具有对chrome的完整DOM和CSSOM访问权限?

(据我所知, Cannot access cssRules from local css file in Chrome 64 通常描述“为什么”,但Web扩展应该与页面运行相同的源站,因此这应该在没有附加权限的情况下工作,但它不工作)