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 将在页面加载后执行您的脚本 - 其中包括加载图像等资产。您在这里有两个选择。

第一个（简单的）是在加载的事件被触发之前加载第二个脚本并隐藏例如主体直到第二个脚本执行（当然你可以将两个脚本合并为一个并等待 dom load 事件来完成剩下的工作）。

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

希望它会帮助你。