I'm creating an extension for my own use, but I have a problem. I want to assign a value to variable from background.js to content.js. The variable from background.js must always exist despite the refreshing of the content page. How to do this?

manifest.json

{

  "manifest_version": 2,
  "name": "Slownik",
  "version": "1.0",

  "description": "Slownik",

  "background": {
  "scripts": ["background.js"]
  },

  "content_scripts": [
    {
      "matches": ["*://*.sjp.pl/*"],
      "js": ["content.js"]
    }
  ]
}

background.js:

var test = "test";

content.js:

test = "testA";

I'm creating an extension for my own use, but I have a problem. I want to assign a value to variable from background.js to content.js. The variable from background.js must always exist despite the refreshing of the content page. How to do this?

manifest.json

{

  "manifest_version": 2,
  "name": "Slownik",
  "version": "1.0",

  "description": "Slownik",

  "background": {
  "scripts": ["background.js"]
  },

  "content_scripts": [
    {
      "matches": ["*://*.sjp.pl/*"],
      "js": ["content.js"]
    }
  ]
}

background.js:

var test = "test";

content.js:

test = "testA";

• javascript
• firefox-addon-webextensions

2 Answers 2

An alternative way is to use browser.runtime.sendMessage() API.

In content script:

document.addEventListener('DOMContentLoaded', function() {
    browser.runtime.sendMessage({
        type: "getText"
    }).then(function(message) {
        console.log("Value of text is: ", message.result);
    });

    browser.runtime.sendMessage({
        type: "setText",
        value: "Yes, I can get you!!"
    }).then(function(message) {
        console.log("New value of text is: ", message.result);
    });
});

In background script:

var text = "Can you get me??";

browser.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.type == "getText") {
        sendResponse({result: text});
    } else if (request.type == "setText") {
        text = request.value;
        sendResponse({result: text});
    }
});

In browser console, we can see output as:

Value of text is:  Can you get me??
New value of text is:  Yes, I can get you!!

Exactly what you desire is not possible. The background script(s) and content scripts execute in different contexts and, in some cases, different processes. It is not possible to directly share a variable between the two contexts. However, you can share information.

.storage.local exists to be able to store information within your extension in a way that is accessible to all of your scripts.¹ Data stored in .storage.local persists through the browser being restarted. You can set a value, using .storage.local.set(), within your background.js and then get the value, using .storage.local.get() from within your content.js.

There are examples of using .storage.local on the MDN pages linked above. There are also a good number of Stack Overflow questions/answers which provide examples.

^{1. Except scripts which you insert into the page context. These are not content scripts, but you insert them using content scripts. They are what you use to gain access to variables and functions which exist in the page scripts normally run on a webpage.}