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 in and clicking on the button, I write down their values and I want to send them to content.js where this data will be used for implementation inhtml But for some reason, the data is not sent.
document.getElementById('btn').onclick = function() { var first = document.getElementById('first').value; var second = document.getElementById('second').value; //send in content chrome.extension.sendMessage('hello'); }<head> <script type="text/javascript" src="content.js"></script> <script type="text/javascript" src="background.js"></script> </head> <input type="text" id="first"> <input type="text" id="second"> <input type="button" id="btn" value="send">Here is the manifest.json (maybe there's something wrong)
{ "manifest_version": 2, "version": "1.3", "description": "name", "browser_action":{ "default_popup": "content/popup.html" }, "background": { "persistent": false, "scripts": ["content/background.js"] }, "content_scripts": [ { "matches": [ "https://google.com/*" ], "js": ["content/content.js"], "css": ["content/qq.css"], "run_at": "document_end" } ] } content.js: get data from background
chrome.extension.onMessage.addListener(function(request){ if(request=='hello'){ console.log('1. Принято: ', request); } }); As I can see everything, background.js is the file that is responsible forjs in the extension menu. content.js is the file that is responsible for making changes to the DOM on the sites.
3 Answers
Answers 1
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
Answers 2
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.
Answers 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. :)
0 comments:
Post a Comment