google-chrome-extension - 在 Chrome 网络扩展程序中访问和修改 CSSrules

Question

我正在编写一个用于 Firefox、Edge 和 Chrome 的 Web 扩展，仅使用通用代码(唯一的区别是顶级命名空间 browser 与 chrome )，在 list 中使用以下权限:

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

Uncaught DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

据我所知，我的权限说我的网络扩展应该在“任何地方”以本地到当前页面的权限运行，所以 CORS 不应该在这里获得:我如何设置这个扩展Chrome 的完整 DOM 和 CSSOM 访问权限？
(据我所知， Cannot access cssRules from local css file in Chrome 64 一般描述了“为什么”，但网络扩展应该与页面运行同源，所以这应该在没有额外权限的情况下工作，但事实并非如此)

Answer 1

在 manifest.json 上添加以下部分。
"web_accessible_resources": [
"vendor/*.js",
"*.js",
"vendor/*.css",
"*.css",
],
在 https://developer.chrome.com/extensions/manifest/web_accessible_resources 上找到了解决方案