title: run js script in chrome extension on page load
body: <p>I need to build a chrome extension that manipulates dom 
  I am following some tutorial and now 
  I have this manifest.json:</p>
  
  <pre><code>{
    "manifest_version": 2,
  
    "name": "Getting started example",
    "description": "This extension shows a Google Image search result for the current page",
    "version": "1.0",
  
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    },
    "permissions": [
      "activeTab",
      "https://ajax.googleapis.com/"
    ]
  }
  </code></pre>
  
  <p>This is my popup.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;!--
   This page is shown when the extension button is clicked, because the
   "browser_action" field in manifest.json contains the "default_popup" key with
   value "popup.html".
   --&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Getting Started Extension's Popup&lt;/title&gt;
      &lt;style&gt;
        body {
          font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
          font-size: 100%;
        }
        #status {
          /* avoid an excessively wide status text */
          white-space: pre;
          text-overflow: ellipsis;
          overflow: hidden;
          max-width: 400px;
        }
      &lt;/style&gt;
  
      &lt;!--
        - JavaScript and HTML must be in separate files: see our Content Security
        - Policy documentation[1] for details and explanation.
        -
        - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
       --&gt;
      &lt;script src="popup.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;console.log('attempt #0 to console log something');&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="status"&gt;&lt;/div&gt;
      &lt;img id="image-result" hidden&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my popup.js:</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function() {
    console.log('attempt #3');
  });
  
  
  chrome.tabs.onUpdated.addListener(
  function ( tabId, changeInfo, tab )
  { 
    if ( changeInfo.status === "complete" )
    {
      chrome.tabs.executeScript({ code: "console.log('attempt #4');" }, function() {
         console.log("console.log(attempt #5)");
     });
    }
  });
  </code></pre>
  
  <p>As you can see I tried various ways to console log something after page loaded  but none of them work
  what do I do?</p>