title: Firefox Web extension. Accessing popup content in content script
body: <p>Directories</p>
  
  <pre><code>----MyExtension
       |----popup.html
       |----popup.js
       |----content.js
       |----background.js
       |----manifest.json
  </code></pre>
  
  <p>mainfest.json</p>
  
  <pre><code>{
  "manifest_version": 2,
   ...........
  "content_scripts": [
    {
     "matches": ["&lt;all_urls&gt;"],
     "js": ["content.js"]
    }
   ],
   "browser_action": {
    "default_title": "Practice",
    "default_popup": "popup.html"
   },
  "permissions": [
   "&lt;all_urls&gt;",
   "tabs",
   "storage",
   "activeTab"
  ],
  "background": {
     "scripts": ["background.js"]
   }
  }
  ....
  </code></pre>
  
  <p>popup.html</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt; 
   ....
  &lt;script src="popup.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;input id="status" type="chckbox"&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>popup.js</p>
  
  <pre><code>$(document).ready(function(){
    $on = $("#status");
    //sends the settings to background to save it
    $on.on("click",function(){
      $obj = {"on":$on.prop("checked")}
      browser.runtime.sendMessage($obj);
      console.log("sending....");
  
    })
   })
  </code></pre>
  
  <p>What im trying to do is simply send a message to background script if the  check box in popup.html is checked.
  The problem is I cannot access the browser namespace in popup.js because its not content script or background script. And i cannot access the check box from the content scrip as it not linked to popup.html (if its linked i get reference error browser is not defined. I've tried countless google searches and spent hours reading web extension docs still cannot find an answer how to go around it any help appreciated.</p>