Расширение Chrome: Запуск до загрузки (рендеринга) страницы

Question

У меня работает расширение Google 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}) 
    } 
    } 
}); 

Я прекрасно работает. Но когда я открываю новую вкладку, я вижу исходные изображения, и я вижу перекрашенные изображения, всего через несколько микросекунд позже. Я хотел бы улучшить это, видя страницу только после перекрашивания (я не хочу видеть оригинал).

У кого-нибудь есть идеи о том, как его решить? Спасибо заранее.

Answer 1

Это все о линии:

info.status == "complete" 

Это означает, что Chrome будет выполнять скрипт после загрузки страницы - которые включают в себя средства загрузки, такие как изображения. У вас есть два варианта.

Первый (простой) - загрузить второй скрипт, прежде чем загруженное событие будет запущено и спрятаться, например. body до запуска второго скрипта (конечно, вы можете объединить оба сценария в один и дождаться события загрузки dom, чтобы выполнить остальную работу).

Второй сложнее. Поскольку первый метод не рекомендуется с точки зрения UX (скрытие содержимого до некоторого пожара события), вы можете использовать более расширенную обработку событий. Вы можете вставить код на страницу при загрузке, прослушать mutation events на элементах кузова и проверить событие DOMNodeInserted. Затем вы можете проверить, является ли новый узел изображением (именно тот, который вы ищете), а затем замените его. Тогда вы не должны видеть старые изображения. Кроме того, вы можете установить состояние видимости элементов невидимым до тех пор, пока не загрузится новое изображение.

Надеюсь, это поможет вам.