javascript - 将 CSS 注入(inject)网站

Question

我正在创建一个允许您调整页面 CSS 的浏览器扩展程序。
基本上，如果用户决定使用浅色文本的深色背景，那么这种变化应该反射(reflect)在他们正在查看的整个网站上。
这样做的原因是可读性。
患有色盲和某些视觉相关障碍的人难以辨认某些颜色。

这有几个挑战。
我希望能够将 background-color 元素更改为所选的背景颜色，并将 color 元素更改为所选的文本颜色。

显然我必须考虑复杂的网站布局，并迎合那些复杂的规则，即

#container div.note p

我可以在其中使用 Javascript，但没有像 JQuery 这样的库，所以我有办法做到这一点吗？

有没有一种方法可以将 CSS 样式表应用到页面以覆盖样式表中的每个背景元素和每个颜色元素？

Answer 1

我建议写一个 GreaseMonkey为此编写脚本，因为它将允许您设置规则以在站点的每个页面上运行。 GM 只是 JavaScript 的包装器(尽管它也扩展了功能)。

不，编写应用 CSS 样式表的脚本并不难。只需创建一个 <link>元素链接到它。或者，您可以对样式进行硬编码并创建一个 <style>页面上的对象。

看看这篇文章:Dynamically loading external JavaScript and CSS files

function loadcssfile(filename){
  var fileref=document.createElement("link")
  fileref.setAttribute("rel", "stylesheet")
  fileref.setAttribute("type", "text/css")
  fileref.setAttribute("href", filename)

 if (typeof fileref!="undefined")
  document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadcssfile("mystyle.css") ////dynamically load and add this .css file