使用 Firefox 插件修改网站

Question

我正在编写一个 Firefox 插件，它会在我打开某些特定网站时对其进行修改。但我根本不喜欢 API。 例如，如果我想向选项卡添加一个包含按钮的 div 容器。它看起来像这样：

var myScript = 'document.body.innerHTML += "<div style=background-color:rgba(0,0,0,0.5);position:fixed;width:300px;height:300px;right:0px;top:0px;><input type=button value=test></input></div>";';
tab.attach({ contentScript: myScript });

这是：
1. 完全不可读。
2. 在许多网站上看起来会有所不同，因为有些网站会为所有输入元素添加默认样式。

那么有没有一种更易读的方法来修改不需要将脚本添加为字符串的网站？
有没有办法覆盖网站上的任何元素（甚至是 Flash）？

Answer 1

你应该使用contentScriptFile。

然后您应该使用不会影响性能的 DOM API 并“在脚上开枪”（不是 .innerHTML），例如：

var div = document.createElement("div");
div.style.backgroundColor = "rgba(0,0,0,0.5)";
...
var input = document.createElement("input");
input.setAttribute("type", "button");
...
div.appendChild(input);
document.body.appendChild(div);

MDN 有文档。

至于样式：这个更难。通常人们不会将 DOM 节点注入页面本身（不仅仅是因为 CSS 兼容性，而是为了避免 Javascript 和/或 DOM 中的冲突），而是创建一个<iframe>，然后它拥有自己的一组 CSS 规则并拥有Javascript环境，甚至受同源政策的约束，如果处理得当，将阻碍网站对内容的混乱。