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 的角度来看不建议使用第一种方法（隐藏内容直到某些事件触发），您可以使用更高级的事件处理。 您可以在页面开始加载时将代码插入页面，在 body 元素上侦听 mutation events 并检查 DOMNodeInserted 事件。然后您可以检查新节点是否是图像（正是您要查找的图像）然后替换它。那么你不应该看到旧图像。此外，您可以将元素可见性状态设置为不可见，直到加载新图像。

希望对你有所帮助。