javascript - Chrome 扩展 : Run before load (rendering) a page

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 时，我使用以下代码(在后台。

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 load 事件来完成剩下的工作)。

第二个更复杂。因为从用户体验的 Angular 来看不推荐第一种方法(隐藏内容直到某些事件触发)，您可以使用更高级的事件处理。您可以在页面开始加载时将代码插入页面，监听 mutation events在 body 元素上并检查 DOMNodeInserted 事件。然后您可以检查新节点是否是图像(正是您要查找的图像)，然后替换它。那么你不应该看到旧图像。此外，您可以将元素可见性状态设置为不可见，直到加载新图像。

希望对你有所帮助。