title: Chrome Extension Examples Not Working
body: <p>I am trying to create a Chrome extension to parse some data in the DOM of the current web page.  I've found some examples on stack overflow but none of them work.  All the examples are a few years old so I am wondering if a fundamental change has been made to Chrome extensions recently that renders a lot of these examples obsolete.  In this particular example I get an alert with <strong>domContent = undefined</strong> and can't find the console.log appearing anywhere in my console.
  Original question is here:
  <a href="https://stackoverflow.com/questions/19758028/chrome-extension-get-dom-content">Chrome Extension - Get DOM content</a></p>
  
  <p>But I'll paste the code for easy reading here:</p>
  
  <p><strong>background.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Regex-pattern to check URLs against. 
  // It matches URLs like: http[s]://[...]stackoverflow.com[...]
  var urlRegex = /^https?:\/\/(?:[^./?#]+\.)?stackoverflow\.com/;
  
  // A function to use as callback
  function doStuffWithDom(domContent) {
      console.log('I received the following DOM content:\n' + domContent);
  }
  
  // When the browser-action button is clicked...
  chrome.browserAction.onClicked.addListener(function (tab) {
      // ...check the URL of the active tab against our pattern and...
      if (urlRegex.test(tab.url)) {
          // ...if it matches, send a message specifying a callback too
          chrome.tabs.sendMessage(tab.id, {text: 'report_back'}, doStuffWithDom);
      }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>content.js</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Listen for messages
  chrome.runtime.onMessage.addListener(function (msg, sender, sendResponse) {
      // If the received message has the expected format...
      if (msg.text === 'report_back') {
          // Call the specified callback, passing
          // the web-page's DOM content as argument
          sendResponse(document.all[0].outerHTML);
      }
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>manifest.json</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "manifest_version": 2,
    "name": "Test Extension",
    "version": "0.0",
  
    "background": {
      "persistent": false,
      "scripts": ["background.js"]
    },
    "content_scripts": [{
      "matches": ["*://*.stackoverflow.com/*"],
      "js": ["content.js"]
    }],
    "browser_action": {
      "default_title": "Test Extension"
    },
  
    "permissions": ["activeTab"]
  }</code></pre>
  </div>
  </div>
  </p>