Chrome擴展程序：在加載（渲染）頁面之前運行

我的Google Chrome擴展程序正在運行，其目標是更改網頁中像素圖像的顏色。Chrome擴展程序：在加載（渲染）頁面之前運行

要更改網頁中的圖像的色彩，從標籤已經打開我使用的代碼（在background.js文件）：

function executeScriptsInExistingTabs(){ 
    chrome.windows.getAll(null, function(wins) { 
    for (var j = 0; j < wins.length; ++j) { 
     chrome.tabs.getAllInWindow(wins[j].id, function(tabs) { 
     for (var i = 0; i < tabs.length; ++i) { 
      if (tabs[i].url.indexOf("chrome://") != 0) { 
      chrome.tabs.executeScript(tabs[i].id, { file: 'muda_conteudo.js' }); 
      chrome.browserAction.setIcon({path: "on.png", tabId:tabs[i].id}); 
      } 
     } 
     }); 
    } 
    }); 
}

要改變顏色的網頁，當標籤的URL改變，我用下面的代碼（在background.js文件）：

chrome.tabs.onUpdated.addListener(function(tabid, info, tab) { 
    if (flag){ 
    if (info.status == "complete") { 
     chrome.tabs.executeScript(tabid, {file:"muda_conteudo.js"}); 
     chrome.browserAction.setIcon({path: "on.png", tabId:tab.id}) 
    } 
    } 
});

我完美的作品。 但是，當我打開新選項卡時，我看到原始圖像，並且僅在幾微秒後纔看到重新着色的圖像。我想改善這一點，看到頁面只有在重新着色（我不想看到原來的）。

任何人都有關於如何解決它的想法？在此先感謝。

來源

2014-04-22 user3059287

這一切都行：

info.status == "complete"

這意味着Chrome瀏覽器將頁面加載後執行腳本 - 包括資產加載圖像等。你有兩個選擇。

第一個（簡單的）是在加載的事件被觸發前隱藏第二個腳本並隱藏例如直到執行第二個腳本（當然，您可以將兩個腳本合併爲一個，然後等待dom載入事件來完成剩下的工作）。

第二個比較複雜。因爲從UX的角度不推薦第一種方法（隱藏內容直到某個事件觸發），您可以使用更高級的事件處理。您可以在開始加載時在頁面中插入代碼，在body元素上偵聽mutation events並檢查DOMNodeInserted事件。然後，您可以檢查新節點是否爲圖像（正好是您要查找的圖像），然後將其替換。那麼你不應該看到舊的圖像。此外，您可以將元素可見性狀態設置爲隱藏狀態，直到加載新圖像。

希望它能幫助你。

來源

2014-04-22 20:19:09

你好。我把'info.status =='這一行填入''，因爲在加載網頁的時候，在標籤的哪個URL中，onUpdated事件被多次識別（2或3次），並且頁面被重新着色了幾次（所以最終結果不是預期的）。我認爲這是一個Chrome的錯誤... 我感謝您的關注，但我沒有意識到你的建議......我的問題是隻有白衣第二個腳本，這應該在URL打開時更改標籤...請你明確地解釋你的想法。 – user3059287

嗯，這不是一個錯誤。 onUpdated事件被激發了幾次，因爲它的狀態隨時間而改變。它正在連接，接收數據等。我可能在一件事上錯了。按原樣嘗試您的代碼並添加到executeScript函數附加參數「runAt」：「document_end」。這意味着您的腳本將在所有文檔（主體）被加載後立即被注入。這相當於在頁面末尾添加腳本。默認情況下，您的腳本是在加載所有資源時注入的。 –

Chrome擴展程序：在加載（渲染）頁面之前運行

回答

相關問題