title: Chrome extension: Run before load (rendering) a page
body: <p>I have a Google Chrome Extension working, which objective is to change the color of the pixel images, in the web pages.</p>
  
  <p>To change the color of the images in web pages, from the tabs already open I use the code (in the background.js file):</p>
  
  <pre><code>function executeScriptsInExistingTabs(){
    chrome.windows.getAll(null, function(wins) {
      for (var j = 0; j &lt; wins.length; ++j) {
        chrome.tabs.getAllInWindow(wins[j].id, function(tabs) {
          for (var i = 0; i &lt; 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});
            }
          }
        });
       }
     });
   }
  </code></pre>
  
  <p>To change the color in the web pages, <strong>when the URL of the tab is changed</strong>, I use the following code (in the background.js file):</p>
  
  <pre><code>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})
      }
    }
  });
  </code></pre>
  
  <p>I works perfectly. <strong>But, when I open the new tab, I see the original images and, I see the recolored images, only a few microseconds later</strong>.
  I would like to improve this, <strong>seeing the page only after the recoloring</strong> (I don't want to see the original).</p>
  
  <p>Anyone has idea about how to solve it ?
  Thanks in advance.</p>