title: Accessing DOM in Chrome Extension
body: <p>I'm using the example <a href="https://developer.chrome.com/extensions/activeTab" rel="nofollow noreferrer">here</a> as a starting point for accessing some DOM elements on the user's current tab. In popup.html, I have the following:</p>
  
  <pre><code>&lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>And the first lines of popup.js are:</p>
  
  <pre><code>chrome.browserAction.onClicked.addListener(function(tab) {
    // No tabs or host permissions needed!
      console.log("test");
    console.log('Turning ' + tab.url + ' red!');
    chrome.tabs.executeScript({
      code: 'document.body.style.backgroundColor="red"'
    });
  });
  </code></pre>
  
  <p>Manifest.json has the following permissions:</p>
  
  <pre><code> {
  "manifest_version": 2,
  "name": "",
  "version": "1.0",
  "description": "",
  "icons": { "16": "icon16.jpg",
      "48": "icon48.jpg",
     "128": "icon128.jpg" },
     "minimum_chrome_version": "46",
  "browser_action": {
      "default_icon": "icon48.png",
      "default_popup": "popup.html"
  },
  "content_scripts": [
      {
          "matches": ["&lt;all_urls&gt;"],
          "js": ["jquery.min.js", "getDescription.js"],
          "run_at": "document_start"   
      }],
  "options_page": "options.html",
  "permissions": ["&lt;all_urls&gt;", "tabs","storage", "activeTab"]
  </code></pre>
  
  <p>}</p>
  
  <p>Nothing is appearing in console, as if function isn't firing at all.</p>