Chrome扩展程序/根据popup.html中的选择执行不同的内容脚本

Question

I need to do an extension with the following behavior. The popup.html should have two buttons or two radio buttons (button is easier because I don't have to save the selected value like with radio) and depending on the user selection I have to execute one script or another. Also after either of the scripts is loaded and the user wants to use the other one, I have to reload the page in order to "unload" the previous one. Could anyone give me an approach to accomplish this?

At the moment I have this:

popup.js

$(document).ready(function() {
    var firstTime = true;
    $("input[name='method']").change(function() {
       if($(this).val() === "events") {
            if(!firstTime) {
                chrome.tabs.reload(null, null, function(){
                    chrome.tabs.executeScript(null, {file: "content_events.js", runAt: "document_end"});
                });
            } else {
                chrome.tabs.executeScript(null, {file: "content_events.js", runAt: "document_end"});
                firstTime = false;
            }
        } else {
            if(!firstTime) {
                chrome.tabs.reload(null, null, function(){
                    chrome.tabs.executeScript(null, {file: "content_timer.js", runAt: "document_end"});
                });
            } else {
                chrome.tabs.executeScript(null, {file: "content_timer.js", runAt: "document_end"});
                firstTime = false;
            }
        }
    });
});

manifest.json

"permissions": [
"tabs",
"activeTab",
"<all_urls>"
],

The first time the script is loaded properly, but when I change it the page reloads but the new script is not loaded (I think it's loaded before the page refresh). I tried with all the possibilities for the runAt attribute and also without it. I tried without injecting the script in the callback function of the tabs.reload too with no luck.

Thanks for your help!

Answer 1

It looks like you want to inject a Javascript file into a page depending on the value of a variable. You could set a listener with the chrome.tabs.onUpdated method and then call chrome.tabs.executeScript to inject the correct file depending on the value of your variable. Be sure to listen for the window load event if you plan on doing any DOM manipulation in your script.