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});
          }
        }
      });
     }
   });
 }

要更改网页中的颜色，更改标签的网址时，我使用以下代码（在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 load事件来完成其余的工作）。

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

希望它会对你有所帮助。

Chrome扩展程序：在加载（呈现）页面之前运行

1 个答案: