Script loading order in Google Chrome extension

Question

I am new to chrome extension coding and am currently trying to build a extension as a hobby

Here is my manifest.json

    {
        "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"
        ]
    }

Here I have two radio buttons in popup.html. On click, I am executing background.js and back.js.

However, even though I select second radio button, background.js is being executed.

The strange behaviour that I observed is: if I swap the script order in my manifest.json as back.js, background.js.. whatever radio button I select, only back.js is executing.

I'm not sure what is wrong with my script. Please suggest what the issue might be.

Here is my popup.js

    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);
    }

This is background.js

function alertlol() {

chrome.downloads.onDeterminingFilename.addListener(function(item, suggest) {
suggest({filename: "mysubdirectory/" + item.filename});
});

}
chrome.browserAction.onClicked.addListener(alertlol);
alertlol();

This is back.js

function alertlol1() {

chrome.downloads.onDeterminingFilename.addListener(function(item, suggest) {
suggest({filename: "mydir/" + item.filename});
});

}
chrome.browserAction.onClicked.addListener(alertlol1);
alertlol1();

This is popup.html

<!DOCTYPE html>
<html>
  <body style="width: 300px">
    Select download folder
    </br><input type="radio"  name="option1" onclick="background.js" value="folder1">Download folder one </input>
    <script type="text/javascript" src="popup.js"></script></br>
    <input type="radio"  name="option1" onclick="back.js" value="folder2">Download folder two </input>
    <script type="text/javascript" src="popup.js"></script>
  </body>
</html>

here is the code base

https://github.com/beardlessgenius/DLM

It is strange to have the same scripts used as background scripts (manifest) and content scripts (tabs.executeScript()) (both back.js and background.js). Your code has an error which should be appearing the console for your popup (i.e. a reference error that hello2 is not defined when you attempt to add it as a listener). Please see the console for the popup. — Makyen♦
And your popup.html is? Also back.js and background.js. — Makyen♦
@KrishnaChaitanya, Please edit the content into the Question. While information in comments can be helpful, all information that is needed to answer the Question should be in the Question. You can duplicate it in comments, but the Question is primary. — Makyen♦
Okay, please explain what's happening here. You have two files which you declare as background scripts, and from a popup you try to inject them as content scripts, all while the code in them is not compatible with content scripts. Are you trying to simply execute code, and not inject a content script? If yes, in which context - the background? — Xan

Ani Ani · Accepted Answer · 2020-03-10T07:18:56

One thing that I can suggest is, a) Use the <script type="text/javascript" src="popup.js"></script> only once and in the starting of the HTML, in head or right after body tag. b) in popup.js, use onclick() event, instead of checking for value. This is because it checks for value only once and gets done with it. What if you click later or click the same button twice?

After adding the "onclick" event in html, if the issue still persists, then ping me. This will give you only a start, please get on from here.

Script loading order in Google Chrome extension

1 Answers