从 chrome 扩展更改外部 CSS答案

【问题标题】：Changing external CSS from chrome extension从 chrome 扩展更改外部 CSS
【发布时间】：2018-05-02 13:37:59
【问题描述】：

我正在编写一个 chrome 扩展，它需要遍历页面中的所有样式表并修改某些样式。

我像这样迭代/修改样式：

const iterate = (doc, f) => {
  for (const styleSheet of doc.styleSheets) {
    const rules = styleSheet.rules || styleSheet.cssRules;
    if (!rules) continue;
    for (const cssRule of rules) {
      if (!cssRule.style) continue;
      const selector = cssRule.selectorText, style = cssRule.style;
      if (!selector || !style.cssText) continue;
      f(style);
    }
  }
}

document.addEventListener("DOMContentLoaded", e => {
  setTimeout(() => {
    iterate(document, style => {
      if (style.getPropertyValue('background-color')) style.setProperty('background-color', 'yellow');
    });
  }, 1000);
});

div {
  background-color: red;
}

&lt;div&gt;hello&lt;/div&gt;

我遇到的问题是似乎没有包含外部 css。

例如，如果我将扩展程序注入到 stackoverflow.com 中，它具有：

<link rel="stylesheet" type="text/css" href="https://cdn.sstatic.net/Sites/stackoverflow/all.css?v=cfd0b49a38a7">

那么来自 all.css 的样式不会被迭代。

如何迭代/修改外部样式？

注意 1 - 我尝试手动获取这些链接 rel 并将它们放入内部样式标签中，但这会破坏这些文件中的任何相对 URL（即 background-image: url('path/image.jpg') ）

注意 2 - 我的清单有 "permissions": [ "http://*/*", "https://*/*" ]

注意 3 - 因为这是一个 Chrome 扩展程序，所以我对 Chrome 唯一的解决方案很满意

【问题讨论】：

您是否尝试过使用来自this answer 的函数loadCSSCors ？
FWIW 您可以使用轻量级 css 解析器或直接替换文本...
您可以使用loadCSSCors函数+some regular expression将外部CSS文件中的相对路径替换为绝对路径。
要修改外部样式吗？为什么您不使用相同的规则创建自己的样式并覆盖外部？
由于 CORS，我相信解决这个问题的唯一方法是使用中间人服务器来获取样式表的内容。

标签： javascript css google-chrome-extension

【解决方案1】：

这可能是您的示例代码中的一个错误，但很明显它不太可能在 DOMContentLoaded 事件 + 1 秒之前注入和获取您的样式表。尝试将您的 setTimeout 等待时间更改为 20 秒，看看会发生什么。

如果这解决了您的问题，那么下一步就是创建一个更好的解决方案，等待您的样式表出现后再进行迭代。

【讨论】：

代码只是为了演示迭代的功能......当然它不会在实际扩展中出现

【解决方案2】：

您的扩展程序的权限不会覆盖页面对页面上已有内容的权限，例如您尝试读取和修改的样式表。

您可以做的是获取外部样式表，例如：

const response = await fetch('https://cdn.sstatic.net/Sites/stackoverflow/all.css');
const css = await response.text();
const style = document.createElement('style');
style.textContent = css;

然后您可以在这个新的style 元素中迭代规则并只将必要的样式注入页面，因此您可能不必担心更改样式表中的亲戚URL。如果这是一个问题，您还必须手动重写这些 URL。

注意：现在你可能还会遇到上面代码的CORB问题，所以你必须通过后台fetch：https://stackoverflow.com/a/56929473/288906

【讨论】：