Question

我正在编写使用以下代码的Web扩展，以便仅使用通用代码（唯一的区别是顶级命名空间browser与chrome）在Firefox，Edge和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.");
}

然后是一系列content_script条目，这些条目导致了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不应在这里出现问题：如何使用完整的DOM和CSSOM设置此扩展可以访问Chrome吗？

（据我所知，Cannot access cssRules from local css file in Chrome 64通常描述了“为什么”，但是Web扩展应该与页面运行相同的来源，因此它应该在没有其他权限的情况下也可以正常工作，但它不会）

Answer 1

在manifest.json中添加以下部分。

"web_accessible_resources": [ "vendor/*.js", "*.js", "vendor/*.css", "*.css", ],

在https://developer.chrome.com/extensions/manifest/web_accessible_resources

上找到了解决方案

在Chrome网络扩展程序中访问和修改CSSrules

1 个答案: