시간 초과 (지연)없이 새 탭에서 배경색을 변경하는 방법은 무엇입니까?

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 파일입니다. 그러나 실험을 할 때 테스트를 위해 단 한 번의 간단한 instuction으로 파일을 선택했습니다.

beforeload 매개 변수와 함께 addEventListener 함수를 사용하려고 생각했지만 조작 할 수 없습니다. 나는 그것이 기술 부족인지 또는 그 기능이 의도 된 효과를 내지 않는지 여부를 모른다.

Answer 1

페이지로드와 스크립트 삽입 사이의 지연을 줄이는 가장 좋은 방법은 chrome.tabs.executeScript를 호출 할 때 injectDetails의 'runAt'필드를 'document_start'로 지정하는 것입니다. 이렇게하면 document.idle (성능상의 이유로 기본 설정)까지 기다리지 않고 가능한 한 빨리 스크립트를 삽입하도록 Chrome에 지시합니다.

예컨대

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

자세한 내용은 https://developer.chrome.com/extensions/tabs#type-InjectDetails을 참조하십시오.

건배!