javascript - How to get access to a background script variable from content script - Stack Overflow

admin管理员组

文章数量:1335847

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

Share Improve this question Follow edited Jul 28, 2017 at 2:39 Makyen♦ 33.4k1212 gold badges9292 silver badges125125 bronze badges asked Jul 27, 2017 at 23:41 Maciej GrzesiakMaciej Grzesiak 2311 silver badge55 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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.}

本文标签： javascriptHow to get access to a background script variable from content scriptStack Overflow