如何使用頁面修改來修改由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的任何數據。