How can I pass a variable from the content script to the page script in WebExtensions?

Question

I need to pass my variable defined in my content script to the script that I inject into the web page. For example, I need to use an image defined in the content script like this:

var myImage = browser.extension.getURL("myImage.jpg");

Then I inject some script from the content script to the loaded page as:

var s = document.createElement('script');
s.src = browser.extension.getURL("myscript.js");
document.body.appendChild(s);

How can I access the variable "myImage" in the script "myscript.js"?

You can use CustomEvent messaging ([example](https://stackoverflow.com/a/19312198)). — wOxxOm, Jul 01 '19 at 15:04

score 0 · Answer 1 · answered Jul 03 '19 at 07:38

you can use either CustomEvent or window.postMessage and in myscript.js listen to the event or message.

Example for window.postmessage

window.postMessage({type: 'image-var', params: myImage }, "*");

in myscript.js

 window.addEventListener('message', function (e) {
        if (e.data.type === 'image-var') {
            console.log(e.data.params);
        }
    });

Example for CustomEvent:

document.dispatchEvent(new CustomEvent('yourCustomEvent', { detail: data }));

in myscript.js

document.addEventListener('yourCustomEvent', function (e) {
  var data = e.detail;
  console.log('received', data);
});

How can I pass a variable from the content script to the page script in WebExtensions?

1 Answers1