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

Posted 2023-03-04

【中文标题】在 Chrome 网络扩展程序中访问和修改 CSSrules

【英文标题】：accessing and modifying CSSrules in a Chrome web extension

【发布时间】：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 上提交功能请求。

你解决过这个问题吗？

【参考方案1】：

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

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

在https://developer.chrome.com/extensions/manifest/web_accessible_resources找到解决方案

【讨论】：

已经是这样了 - 修改了帖子以明确这一点。但仅此一项不会让您访问活动标签的document.styleSheets 上的cssRules。