Chrome Extension Pass Variable from popup.js to content script

Question

I have popup.js script:

function FireInjectionScript() {
    //Want to Pass this variable.
    var updateTextTo = document.getElementById('mat_no').value.trim()
    chrome.tabs.executeScript({
        file: 'InjectionScript.js'
    }); 
}

document.getElementById('caseButton').addEventListener('click', FireInjectionScript);

I have gone through pretty much every question in the the first 5 pages of google and stackoverflow and can't get this simple parameter pass working.

Have tried this, this, this. Many of the questions are rather old. Is this not possible in chrome anymore ? My ultimate goal is to pass the variable and then return data from a WebApi to fill out some controls on the page based on the variable passed - am I barking up the wrong tree. Any guidance is greatly appreciated.

score 5 · Accepted Answer · answered Sep 08 '20 at 21:30

You can use messaging to send the data to the injected script, but you need the tab Id.

popup.js

function FireInjectionScript() {
    //Want to Pass this variable.
    var updateTextTo = document.getElementById('mat_no').value.trim();
    chrome.tabs.query({active: true, currentWindow: true}, tabs => {
        chrome.tabs.executeScript(tabs[0].id,{file: 'InjectionScript.js'},()=>{
            chrome.tabs.sendMessage(tabs[0].id,{myVar:updateTextTo});
        });
    }); 
}

document.getElementById('caseButton').addEventListener('click', FireInjectionScript);

InjectionScript.js

chrome.runtime.onMessage.addListener(message=>{
    if (message.myVar) {
        //here you can access message.myVar
    }
});

Nokonoko Gonna give it a go, I've tried this method but maybe the syntax was old — bumble_bee_tuna, Sep 10 '20 at 16:16
Works. Must have had bad syntax from the code example I was using from old example — bumble_bee_tuna, Sep 10 '20 at 21:49

Chrome Extension Pass Variable from popup.js to content script

1 Answers1