将变量从“浏览器操作”发送到“内容脚本”

Question

I am so new about making Chrome extension and somethings I will try :

I will to send JS variables from "browser_action" to "content_scripts"

---

"browser_action": {
    "default_popup": "src/browser_action/index.html"
},
"content_scripts": [
   {
      "matches": ["<all_urls>"],
      "js": ["src/inject/inject.js"]
   }
]

---

Example : If...

src/browser_action/main.js : (browser_action)

var MyVar = "Hello world";

And how to send MyVar to src/inject/inject.js ? Like..

// What function I should do before to alert()?
if (typeof MyVar !== 'undefined') {
   alert(MyVar);
}

Answer 1

If you want to send message(or data) from background to content script, you can use chrome.tabs.sendMessage() . But you need to specify which tab(using tabId ) to send it to. You should read message passing in extensions .

Example :

Sending a message to the content script in the selected tab

main.js

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {greeting: "hello"}, function(response) {
    console.log(response.farewell);
  });
});

On the receiving end, you need to set up an chrome.runtime.onMessage event listener to handle the message

inject.js:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.greeting == "hello")
      sendResponse({farewell: "goodbye"});
  });

Answer 2

I did it with chrome.storage #ref

Example :

Add "storage" permission on manifest.json

"permissions": [
   "storage"
]

On main.js (browser_action)

chrome.storage.sync.set({'user':{email:'hello@world.com'}});

On inject.js (content_scripts)

chrome.storage.onChanged.addListener(function(c,a){
   chrome.storage.sync.get('user',function(o){
      if(!$.isEmptyObject(o)){ // Check via jQuery function
          // Do somethings...
          console.log(o.user.email);
      }
   });
});