使用Firefox加载项修改网站

Modify websites with Firefox Add-on

本文关键字：网站 修改 加载项 Firefox 使用      更新时间：2024-03-13

我正在编写一个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）？

您应该使用contentScriptFile。

然后，您应该使用性能不差的DOMAPI，并"自食其果"（不是.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环境，甚至受同源策略的约束，如果做得好，这将阻碍网站处理内容。

相关文章：