Question

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

Segueocó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文件。但是，当我进行实验时，我选择了一个只有一个简单实例的文件进行测试。

我想将函数addEventListener与参数beforeload一起使用，但我无法操作它。我不知道是否缺乏技能，或者该功能是否产生预期效果。

Answer 1

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

e.g。

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

有关详细信息，请参阅https://developer.chrome.com/extensions/tabs#type-InjectDetails。

干杯！

如何在没有超时（延迟）的情况下更改新选项卡中的背景颜色？

1 个答案: