"Communicate" The Contents Js And Background Js Files In Extension

June 23, 2022 Post a Comment

I am writing an extension and I encountered a problem: I can not send data from the extension menu to content.js. In the extension menu I have a couple of intuitions, after filling

Solution 1:

Your files' structure is unclear: what is the content of popup.html? why do you load both content.js and background.js in the same page?

Here is an example that does what I think you try to accomplish.

It works like this:

The popup screen will display the inputs for the user to fill. When the button is pressed, the value of the inputs is sent to the background script which, in turn, sends them to the content script. The content script then uses those values in the way you want: for instance, to fill an input in the host webpage.

manifest.json

{

 "manifest_version": 2,
 "version": "1.3",
 "description": "name",
 "browser_action":{
    "default_popup": "content/popup.html"
 },
 "background": {
     "persistent": true,
     "scripts": ["content/background.js"]
 },
 "content_scripts": [
     {
         "matches": [ "https://google.com/*" ],
         "js": ["content/content.js"],
         "css": ["content/qq.css"],
         "run_at": "document_end"
     }
 ]
}

background.js

var contentTabId;

chrome.runtime.onMessage.addListener(function(msg,sender) {
  if (msg.from == "content") {  //get content scripts tab id
    contentTabId = sender.tab.id;
  }
  if (msg.from == "popup" && contentTabId) {  //got message from popup
    chrome.tabs.sendMessage(contentTabId, {  //send it to content script
      from: "background",
      first: msg.first,
      second: msg.second
    });
  }
});

content.js

chrome.runtime.sendMessage({from:"content"}); //first, tell the background page that this is the tab that wants to receive the messages.

chrome.runtime.onMessage.addListener(function(msg) {
  if (msg.from == "background") {
    var first = msg.first;
    var second = msg.second;
    //here you use the values as you wish, for example:
    //document.getElementById("anInput").value = first;
  }
});

popup.html

<html>
  <body>
    <input type="text" id="first">
    <input type="text" id="second">
    <button id="send">Send</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js (this file must be located in the same directory as popup.html)

document.getElementById("send").onclick = function() {
  chrome.runtime.sendMessage({  //send a message to the background script
    from: "popup",
    first: document.getElementById("first").value,
    second: document.getElementById("second").value
  });
}

I hope that helps.

Solution 2:

I think you are looking for the runtime property of the chrome / browser object.

This would make your send message command chrome.runtime.sendMessage without the use of the extension property.

Likewise the on message event would be chrome.runtime.onMessage.

I'm pulling this info from the following documentation: https://developer.chrome.com/apps/messaging

Solution 3:

content.js should not be included into popup.html. content.js is run whenever a site matches the pattern in your manifest.json. Right now, whenever someone visits google.com with your extension installed, the content.js script is run in the background of google.com.

background.js also shouldn't be loaded into the popup. It's a script that's always run in the background of the browser, it's not something that should get loaded by anything. It's where you add stuff like code to change the omnibox behavior.

You should create a new popup.js script that gets included by popup.html, and it should only handle things like onload and onclick events for the actual popup window.

The various files you mention, content.js, background.js and the file you should create popup.js all have different jobs and should not communicate between each other. There's neither a need nor a possibility for it. If you want to e.g. get the value of what's inside some other site put it in content.js, which is run on each site that matches your pattern, and do all the handling in there.

background.js = code that sets up your extension inside the browser, stuff like changing the omnibox behavior.

content.js = code that runs on each website that matches a certain pattern.

popup.js = code that runs when the user opens the popup window of your extension.

So don't have them communicate, they aren't supposed to, they fill entirely different functions.

There's no reason why you should need to communicate between them either, please explain a scenario where you'd need this and I'll explain why you don't need it. :)

Solution 4:

To communicate with content.js, you need to use chrome.tabs.sendMessage instead of chrome.extension.sendMessage, because to communicate with the content.js you need to provide the tabId, which is passed as an argument in the former listed API.

JavaScript Guide

"Communicate" The Contents Js And Background Js Files In Extension

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Post a Comment for ""Communicate" The Contents Js And Background Js Files In Extension"