title: Script loading order in Google Chrome extension
body: <p>I am new to chrome extension coding and am currently trying to build a extension as a hobby</p>
  
  <p>Here is my manifest.json</p>
  
  <pre class="lang-json prettyprint-override"><code>    {
          "manifest_version": 2,
          "name": "LOL",
          "version": "0.1",
          "background": {
              "persistent": false,
              "scripts": ["background.js", "back.js"]
          },
          "browser_action": {
              "default_icon": "icon.png",
              "default_popup": "popup.html"
          },
          "permissions": [
              "downloads", "downloads.open", "downloads.shelf", "activeTab", "background"
          ]
      }
  </code></pre>
  
  <p>Here I have two radio buttons in <em>popup.html</em>. On click, I am executing <em>background.js</em> and <em>back.js</em>.</p>
  
  <p>However, even though I select second radio button, <em>background.js</em> is being executed.</p>
  
  <p>The strange behaviour that I observed is: if I swap the script order in my <em>manifest.json</em> as <em>back.js</em>, <em>background.js</em>.. whatever radio button I select, only <em>back.js</em> is executing.</p>
  
  <p>I'm not sure what is wrong with my script. Please suggest what the issue might be.</p>
  
  <p>Here is my popup.js</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>    function hello() {
          chrome.tabs.executeScript({
              file: 'background.js'
          });}
  
          function hello2() {
              chrome.tabs.executeScript({
                  file: 'back.js'
              });
          }
  
  
      var radio1 = document.getElementById('option1').value;
      if (radio1 == "folder1") {
          document.getElementById('option1').addEventListener('click', hello);
      }
      if (radio1 == "folder2") {
          document.getElementById('option2').addEventListener('click', hello2);
      }
  </code></pre>
  
  <p>This is background.js</p>
  
  <pre class="lang-js prettyprint-override"><code>function alertlol() {
  
  chrome.downloads.onDeterminingFilename.addListener(function(item, suggest) {
  suggest({filename: "mysubdirectory/" + item.filename});
  });
  
  }
  chrome.browserAction.onClicked.addListener(alertlol);
  alertlol();
  </code></pre>
  
  <p>This is back.js</p>
  
  <pre class="lang-js prettyprint-override"><code>function alertlol1() {
  
  chrome.downloads.onDeterminingFilename.addListener(function(item, suggest) {
  suggest({filename: "mydir/" + item.filename});
  });
  
  }
  chrome.browserAction.onClicked.addListener(alertlol1);
  alertlol1();
  </code></pre>
  
  <p>This is popup.html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;body style="width: 300px"&gt;
      Select download folder
      &lt;/br&gt;&lt;input type="radio"  name="option1" onclick="background.js" value="folder1"&gt;Download folder one &lt;/input&gt;
      &lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt;&lt;/br&gt;
      &lt;input type="radio"  name="option1" onclick="back.js" value="folder2"&gt;Download folder two &lt;/input&gt;
      &lt;script type="text/javascript" src="popup.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>here is the code base</p>
  
  <p><a href="https://github.com/beardlessgenius/DLM" rel="nofollow noreferrer">https://github.com/beardlessgenius/DLM</a></p>