title: How to have chrome extension button communicate with injected js?
body: <p>I have a chrome extension that injects a js file into a webpage. And also open a popup when clicked in the browser. In the popup there is a button that should change a variable in the js file. But the injected file usually cant communicate with the rest of the extension. How do i change this?</p>
  
  <p>I'm still a bit new to chrome extensions, thank you for your help.</p>
  
  <p>EDIT: Here is what i have so far</p>
  
  <p>Manifest file:</p>
  
  <pre><code>     {
      "manifest_version": 2,
      "name": "Minds Color Extension",
      "version": "1",
  "content_scripts": [
      {
        "matches": ["https://www.minds.com/*"], 
        "js": ["injectedjs.js"],
        "css" : ["injectedcss.css"]
      }
  ],
          "browser_action": {
  
            "default_icon": { 
              "19": "icon.png",
              "38": "icon.png"
            },
            "default_title": "Minds Notification page",
            "default_popup": "popup.html"
  
          }
  
        }
  </code></pre>
  
  <p>Popup.html</p>
  
  <pre><code>&lt;!--
  &lt;!doctype html&gt;
   This page is shown when the extension button is clicked, because the
   "browser_action" field in manifest.json contains the "default_popup" key with
   value "popup.html".
   --&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Minds Theme Extension&lt;/title&gt;
      &lt;style&gt;
  html, body {
  margin:0;
  padding:10;
  width: 250px;
  }
     #blue {
      background-color: #337dff;
  }
     #orange {
      background-color: #ff5733;
  }
     #dark {
      background-color: #4a505b;
  }
      button {
      border: none;
      color: white;
      padding: 10px 27px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      cursor: pointer;
  }
  #footer {
  position: fixed;
  bottom: 0;
  }
      &lt;/style&gt;
  
      &lt;!--
        - JavaScript and HTML must be in separate files: see our Content Security
        - Policy documentation[1] for details and explanation.
        -
        - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
       --&gt;
      &lt;script src="injectedjs.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="status"&gt;
  &lt;h2&gt; Pick a theme: &lt;/h2&gt;
  &lt;a href="blue.html"&gt;&lt;button type="button" id="blue" onclick="activeBlue(); run();"&gt;Blue&lt;/button&gt;&lt;/a&gt;
  &lt;a href="orange.html"&gt;&lt;button type="button" id="orange" onclick="activeOrange(); run();"&gt;Orange&lt;/button&gt;&lt;/a&gt; 
  &lt;a href="dark.html"&gt;&lt;button type="button" id="dark" onclick="activeDark(); run();"&gt;Dark&lt;/button&gt;&lt;/a&gt;
  &lt;br /&gt;
  &lt;div id="footer"&gt;
  &lt;font size="1"&gt; &lt;a href="mailto:?Subject=Minds%20Support" target="_top"&gt;Contact us&lt;/a&gt;&lt;/font&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Injectedjs.js</p>
  
  <pre><code>// Var block
  var blue = 0;
  var orange = 0;
  var dark = 0;
  
  // Activation block
  function activeBlue() {
  blue = 1;
  }
  function activeOrange() {
  orange = 1;
  }
  function activeDark() {
  dark = 1;
  }
  
  // Resets var block
  function reset() {
  blue = 0;
  orange = 0;
  dark = 0;
  }
  
  //Changes Minds css (Runs theme)
  function run() {
  if (blue == 1) {
      // Runs code that will change minds to blue. 
  document.getElementById("mdl-color--white").className = "mdl-color--blue";
  } 
  if (orange == 1) {
      // Runs code that will change minds to orange
  document.getElementById("mdl-color--white").className = "mdl-color--orange";
  } 
  if (dark == 1) {
      // Runs code that will change minds to dark
  document.getElementById("mdl-color--white").className = "mdl-color--grey";
  
  } 
  }
  </code></pre>
  
  <p>Injectedcss.css has nothing in it. If you need the other files like dark.html i can give them to you but i dont see why you'd need them.</p>