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.在许多网站上看起来会有所不同，因为有些网站会为所有输入元素添加默认样式。

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

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环境，甚至受制于相同的原始政策，如果做得好，将阻碍网站弄乱内容。

使用Firefox Add-on修改网站

1 个答案: