title: How to get a chrome tab source code in javascript
body: <p>I try to develop a chrome extension and I need to be able to get the source code of the current tab, so I follow the chrome example and I have three files:</p>
  
  <p>manifest.json:</p>
  
  <pre><code>{
      "manifest_version": 2,
      "name": "Source code getter",
      "description": "This extension is a test to get current tab source code",
      "version": "0.1",
      "browser_action": {
           "default_icon": "icon.png",
          "default_popup": "popup.html"
      }, 
      "permissions": [
          "tabs"
    ]
  }
  </code></pre>
  
  <p>popup.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
   &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Get source popup&lt;/title&gt;
           &lt;style&gt;
               body {
                  min-width: 357px;
                  min-height: 357px;
                  overflow-x: hidden;
              }
          &lt;/style&gt;
          &lt;script src="popup.js"&gt;&lt;/script&gt;
       &lt;/head&gt;
      &lt;body&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and the popup.js</p>
  
  <pre><code>document.addEventListener('DOMContentLoaded', function() {
      chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
          var tab = tabs[0];
          console.debug(tab.id);
          var source = document.createElement("div");
          chrome.tabs.sendMessage(tab.id, {action: "getHtml"}, function(response) {
              console.debug(response.html);
           if (response.html) {
                  source.textContent = response.html;
              } else {
                  source.textContent = 'I did not get the source code.';
              }
          });
          document.body.appendChild(source);
      });
  });
  </code></pre>
  
  <p>I build the popup.js by searching across the web and I must confess I don't really know how the sendMessage works exactly, also with <a href="https://developer.chrome.com/extensions/tabs#method-sendMessage" rel="nofollow">the doc</a> but I think the second parameter ask the source code wich must be return in the parameter of function response, but it doesn't, here are the JS log:</p>
  
  <pre><code>430 popup.js:4
  &gt; Error in event handler for (unknown): Cannot read property 'html' of undefined
  &gt; Stack trace: TypeError: Cannot read property 'html' of undefined
  &gt;    at chrome-extension://boefdmhphdcngpckofecmjnihbgphmch/popup.js:7:35
  &gt;    at disconnectListener (extensions::messaging:338:9)
  &gt;    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
  &gt;    at EventImpl.dispatchToListener (extensions::event_bindings:397:22)
  &gt;    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
  &gt;    at Event.publicClass.(anonymous function) [as dispatchToListener] (extensions::utils:93:26)
  &gt;    at EventImpl.dispatch_ (extensions::event_bindings:379:35)
  &gt;    at EventImpl.dispatch (extensions::event_bindings:403:17)
  &gt;    at Function.target.(anonymous function) (extensions::SafeBuiltins:19:14)
  &gt;    at Event.publicClass.(anonymous function) [as dispatch] (extensions::utils:93:26) 
  </code></pre>
  
  <p>so I got the right tab but i don't get a correct response form sendMessage function, someone can explain me why ? Thanks.</p>