title: Background Scripts vs Content Scripts in Chrome Extensions
body: <p>I read about Background page and Content scripts at <a href="http://developer.chrome.com" rel="noreferrer">developer.chrome.com</a>
  but I'm confused with them, I cannot understand when to use background scripts and when to use content scripts. For example:</p>
  
  <p><code>manifest.json</code>:</p>
  
  <pre><code>{
      "name": "Hello World",
      "version": "2.0",
      "manifest_version": 2,
      "background": 
      {
          "scripts": ["background.js"]
      },
      "content_scripts":
      [
          {
              "matches": ["http://*/*", "https://*/*"],
              "js": ["js/myScript.js"]
          }
      ],
      "permissions": ["tabs", "http://*/*"],
      "browser_action":
      {
          "default_icon": "icon.png"
      }
  }
  </code></pre>
  
  <p>If <code>background.js</code> is:</p>
  
  <pre class="lang-js prettyprint-override"><code>// Called when the user clicks on the browser action.
  chrome.browserAction.onClicked.addListener(function(tab) {
    alert("test");
  });
  </code></pre>
  
  <p>It works well, but if I put the same code above in <code>myScript.js</code>, it doesn't work.</p>
  
  <p>So I don't know which script should be located in <code>background.js</code>, and which should be located in content scripts.</p>