谷歌铬-如何在没有超时(延迟)的情况下更改新标签的背景颜色

Question

我开发了一个Chrome浏览器的扩展，它可以更改所有已经打开的窗口和选项卡上页面的背景色。该扩展通过图标激活。自从激活后，每当更新选项卡的URL时，过滤器就会应用于新页面。然而，仅仅几毫秒后，我们就看到了新的背景颜色。我希望避免这种拖延。我该如何解决？也许，在新页面可视化之前，我需要注入muda_conteudo.js文件的代码。。。如果是肯定的，怎么做？

Segue o código:

Manifest.json:

{
"name": "CVD Images Adaptation",
  "description": "It makes the  still images adaptation  for CVD people",
  "version": "2.0",
  "permissions": [
        "tabs", 
        "*://*/*",
        "activeTab",
        "debugger" 
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {
     "default_icon": "on.png",
     "default_title": "CVD Images Adaptation"
  },
  "icons": {
    "48": "on.png", 
    "48": "off.png" 
  },
  "manifest_version": 2
}

background.js

var flag = false;
chrome.browserAction.onClicked.addListener(function(tab) {
flag = ! flag;
    if (flag){
    executeScriptsInExistingTabs();
}
else {
   cleanExistingTabs();
}
});
// Ação levada a cabo quando é criado um novo tab
// embora não faça nada, tem que estar aqui para levar ao trigger do    
// "chrome.tabs.onUpdated.addListener"
chrome.tabs.onCreated.addListener(function(tab) {
});
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: "off.png", tabId:tab.id})
    }
  }
});
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: "off.png", tabId:tabs[i].id});
            }
          }
        });
      }
    });
}

function cleanExistingTabs(){
    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.browserAction.setIcon({path: "on.png", tabId:tabs[i].id});
               chrome.tabs.executeScript(tabs[i].id, {code:'window.location.href=window.location.href'});
            }
          }
        });
      }
    });
}

muda_conteudo.js

 document.body.style.backgroundColor="red";

好的，当然，我打算在将来使用另一个muda_conteudo.js文件。但是，当我进行实验时，我选择了一个只有一个简单说明的文件进行测试。

我想用参数为beforeload的函数addEventListener，但我无法操作它。我不知道这是缺乏技能还是该函数没有产生预期效果。

Answer 1

减少页面加载和脚本注入之间延迟的最佳方法是将调用chrome.tabs.executeScript的injectDetails中的"runAt"字段指定为"document_start"。这将告诉chrome尽快注入脚本，而不是等到document.idle（出于性能原因，这是默认设置）。

例如

chrome.tabs.executeScript(
     tabs[i].id,
     { file: 'muda_conteudo.js', runAt: 'document_start' });

请参阅https://developer.chrome.com/extensions/tabs#type-InjectDetails了解更多详细信息。

干杯！