如何使用页面修改来修改由JavaScript加载的元素

Question

我正在创建Firefox插件，以将onclick事件添加到特定按钮。 （ “输入” 元件）

该按钮被放置在http://example.com/welcome#_pg=compose 但是当我打开网页，以下错误occures：

类型错误：document.querySelector（ “＃send_top”）是空

＃ send_top是我想要修改的按钮的ID。所以，找不到按钮。

发生此错误是因为http://example.com/welcome和http://example.com/welcome#_pg=compose是完全不同的页面。 在这种情况下，插件似乎正在加载http://example.com/welcome，但没有其“#send_top”ID的按钮。 当添加＃_pg =合成锚时，该按钮由JavaScript加载。

如何加载http://example.com/welcome#_pg=compose来修改按钮？

Answer 1

三个想法，以帮助您调试这一点：

1. 正确匹配，你应该考虑使用正则表达式，而不是页面匹配语法的URL - 这可能让你在一个锚反应更可预测的方式

2. 我发现，当使用内容脚本和JS大量修改的页面时，可能会遇到计时问题。一个怪异的解决方法可能是寻找你想要的元素，如果它不在那里，请在100毫秒左右的时间内执行setTimeout，然后重新检查。丑陋的，是的，但它适用于我用于新的twitter用户界面的一些示例代码，例如。

3. 您可以在您的内容脚本中使用unsafeWindow变量来直接访问该页面的窗口对象 - 该对象将包含JS对页面所做的任何更改并且未被代理。您应该谨慎使用unsafeWindow，但它的使用表示可能的安全问题。尤其是，永远不要信任来自unsafeWindow的任何数据。