Google Chrome瀏覽器擴展程序 - 如何多次包含內容腳本？

過去幾天我一直在爲Chrome網站工作。它的出現非常好，但我遇到了一個問題，您可能會提供幫助。Google Chrome瀏覽器擴展程序 - 如何多次包含內容腳本？

這裏的擴展做什麼大綱（此功能齊全）：

，用戶可以輸入自己的用戶名和密碼進入擴展彈出 - 並驗證他們的用戶帳戶關於特定網站
當用戶瀏覽http://twitter.com時，會動態包含一個內容腳本，該腳本會操縱DOM，以在顯示的每條推文旁包含一個額外的按鈕。
當用戶點擊這個按鈕，他們都帶有一個對話框

我已經取得了很大的進步，但這裏是我的問題：

當用戶訪問Twitter的內容腳本被激活並在頁面上的所有推文得到我的新按鈕 - 但如果用戶然後點擊「更多...」並動態加載接下來的20條推文......頁面DOM中的這些新增內容不會受到內容腳本的影響（因爲它已經被加載）。

我可以添加一個事件監聽器到'More ...'按鈕，然後再觸發原始內容腳本（並添加新的按鈕），但我將不得不預測twitter的ajax請求響應的長度。一旦請求完成，我就無法進入他們的Ajax請求，這個請求會提取更多的推文並調用我的addCurateButton（）函數。

您認爲最好的解決方案是什麼？（如果有的話）

來源

2010-07-21 samstr

與Ajax交互可能是哄一個內容腳本最難的事情，但我認爲你是在正確的軌道上。我已經採取了幾種不同的方法來解決這個問題。不過，就你而言，我認爲兩種方法的組合（我將在後面解釋）將是最好的。

將事件偵聽器附加到DOM以檢測相關更改。這個解決方案就是你所建議的，並介紹了競爭條件。
不斷檢查DOM是否從循環內部發生變化（最好使用setInterval執行一次）。這個解決方案將是有效的，但效率相對較低。

最佳的兩個-世界的方法是啓動更按鈕被按下後，才檢查循環。這種解決方案既可以避免時間問題，又可以提高效率。

來源

2010-07-21 22:04:26 oldestlivingboy

你想要做的是每次DOM改變時重新執行你的內容腳本。幸運的是，有一個事件。 Have a look at the mutation event called DOMNodeInserted。

重寫您的內容腳本，以便它將事件偵聽器附加到DOM的主體DOMNodeInserted事件。請參閱下面的示例：

var isActive = false; 
/* Your function that injects your buttons */ 
var inject = function() { 
    if (isActive) { 
    console.log('INFO: Injection already active'); 
    return; 
    } 
    try { 
    isActive = true; 
    //inject your buttons here 
    //for the sake of the example I just put an alert here. 
    alert("Hello. The DOM just changed."); 
    } catch(e) { 
    console.error("ERROR: " + e.toString()); 
    } finally { 
    isActive = false; 
    } 
}; 
document.body.addEventListener("DOMNodeInserted", inject, false);

最後一行將添加事件偵聽器。當一個頁面加載事件時會經常觸發，所以你應該定義一個布爾值（例如var isActive），並將其初始化爲false。無論何時運行注入函數，都要檢查isActive == true，然後中止注入，以免同時過多地執行注入。

來源

2010-12-09 09:16:43 fotonobile

您可以在按鈕上附加事件處理程序或用於獲取更多結果的鏈接。然後附加一個函數，使得無論何時點擊按鈕，您的擴展程序都會刪除DOM中的所有按鈕，並開始重新插入它們，或者檢查您的按鈕是否存在於該特定的DOM元素類中，如果不符合，則附加按鈕「T。

來源

2012-01-27 12:42:13

Google Chrome瀏覽器擴展程序 - 如何多次包含內容腳本？

回答

相關問題