How to have chrome extension button communicate with injected js?
<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>