i'm trying sending data from website javascript to my chrome extension.
I read about sending msgs from website and i couldn't make it work.
in my website:
$("#button-id").click(function(){
chrome.runtime.sendMessage("msg", {arg: "1"},
function(response){alert("got response: " + response);});
});
and in background.js (in the chrome extension)
chrome.runtime.onMessageExternal.addListener(
function() {
alert("in background");
return "1";
});
I also added to the manifest:
"externally_connectable": {
"matches": ["*://localhost/project/public/*","http://localhost/project/public/*","*://*/*/*"]
},
and all I'm getting when I'm clicking that button is alert that says "got response undefined".
something that i tried that maybe will help to figure it out:
when I'm on my website, opening chrome developer console, typing "chrome.runtime.sendMessage("jjj");"
I'm getting 'undefined'.
thanks in advance!!!
To send a response, you need to pass it to sendResponse parameter of the listener, which is the third parameter:
chrome.runtime.onMessageExternal.addListener(
function(message, sender, sendResponse) {
alert("in background");
sendResponse("1");
}
);
One thing to note: if sendResponse is going to be called asynchronously, you have to return true;
Also, when sending a message from a webpage, you have to supply the extension's id as the first parameter. In your example code it's "msg": it must be an extension id.
Related
I'm new to javascript so I apologies if this is obvious and everyone knows.
I'm using Message Passing to intruct the background.js of my Chrome Extension to perform an action when you press a button in the extensions popup.js
popup.js:
getCurrentTab(function(tab) {
chrome.runtime.sendMessage(
{type: 'status', tabId: tab.id },
function(response) {
console.log(response.message)
}
)
})
Background.js:
chrome.runtime.onMessage.addListener(
function(message, sender, callback) {
console.log("Received message" + message + ", " + sender + "," + callback)
alert('received')
callback({message: message.type});
})
I've already learned that i need to "Inspect" my popup window for it's console (where I can see the response being printed).
I can see the page is alerting, and I can see the response in my popups console. But the main pages console isn't being filled (with message starting "Received message").
Can someone help a poor js beginner out?
#Amedina has rightly suggested my answer is here:
https://stackoverflow.com/a/17293612/726954
I should be using the extension page to access my background.js console
I have developed a Chrome Extension and it's mostly compatible to firefox web-extensions API. Just one problem:
In Chrome Extension i have popup.js and background.js. User click's a button, popup.js does chrome.sendMessage to background.js where data is received and afterwards (popup.html may be closed meanwhile) i just call in background.js:
newWin = window.open("about:blank", "Document Query", "width=800,height=500");
newWin.document.open();
newWin.document.write('<html><body><pre>' + documentJson + '</pre></body></html>');
// newWin.document.close();
so that works fine in Chrome extension but not in firefox. I read here (https://javascript.info/popup-windows) that for safety reasons firefox will only open with a "button click event". And if i move above code to popup.js, inside button-click-evenListener, it will open this way (but i dont have the data prepared yet, thats really not what i want)
So i tried everything i found but i dont get the chrome.tabs.executeScript running. Here is my code with comments:
popup.js
// working in firefox and chrome (popup.js)
const newWin = window.open("about:blank", "hello", "width=200,height=200");
newWin.document.write("Hello, world!");
// not working firefox: id's match, he enters function (newWindow) but document.write doing nothing (but no error in log)
// not working chrome: doesnt even enter "function (newWindow)""
chrome.windows.create({
type: 'popup',
url: "output.html"
}, function (newWindow) {
console.log(newWindow);
console.log(newWindow.id);
chrome.tabs.executeScript(newWindow.tabs[0].id, {
code: 'document.write("hello world");'
});
});
background.js
(created local output.html and gave several permissions in Manifest.json - tabs, activeTab, output.html, , about:blank)
// opening but executeScript not working in firefox: Unchecked lastError value: Error: The operation is insecure.
// opening but executeScript not working in chrome: Unchecked runtime.lastError: Cannot access contents of url "chrome-extension://plhphckppghaijagdmghdnjpilpdidkh/output.html". Extension manifest must request permission to access this host
chrome.tabs.create({
// type: 'popup',
url: "output.html"
}, function (newWindow) {
console.log(newWindow);
console.log(newWindow.id);
chrome.tabs.executeScript(newWindow.id, {
code: 'document.write("hello world");'
});
});
How can I get the data into the new window/popup from background.js - i can open an empty page from there, so it's only about getting executeScript() running
Thanks to #wOxxOm for pointing me to a data URI to transport the json document into the browser from background.js.
While searching for a javascript method to build a data URI i found this thread, with the suggestion to create a Blob :
https://stackoverflow.com/a/57243399/13292573
So my solution is this:
background.js
var documentJson = JSON.stringify(documents, null, 2)
let a = URL.createObjectURL(new Blob([documentJson]))
chrome.windows.create({
type: 'popup',
url: a
});
I am trying to pass data from my webpage to the chrome extension.
manifest.json (I am trying to do this in my local environment first)
"externally_connectable": {
"matches": ["*://localhost/*"]
}
In listen.js (a background script):
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
if (sender.url == blacklistedWebsite)
return; // don't allow this web page access
if (request.openUrlInEditor)
alert('test2');
alert(request.openUrlInEditor);
});
None of the alerts display above.
I got the extension ID of the unpacked chrome extension by viewing the ID when I navigate to chrome://extensions/. In my webpage in localhost environment
// DEVELOPMENT extension ID
var editorExtensionId = "fppgjikaoolnlcmdjalbfkmlcadcckmb";
var url = 'test';
// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
function(response) {
if (!response.success)
handleError(url);
});
When I run this. in the browser, I get an error saying:
Error in event handler for (unknown): TypeError: Cannot read property 'success' of undefined
I'm not sure where to begin debugging this.
After making a few changes in your code I am able achieve your goal.
See below the complete code.
manifest.json
{
"manifest_version": 2,
"name": "CS to Bg Communication",
"version": "0.1",
"background": {
"scripts": ["listen.js"]
},
"content_scripts": [
{
"all_frames" : true,
"matches": ["<all_urls>"],
"js": ["contentscript.js"]
}
],
"browser_action": {
"default_popup": "popup.html"
},
"externally_connectable": {
"matches": ["*://localhost/*"]
}
}
listen.js - the background script
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
blacklistedWebsite = 'http : / / yourdomain . com /';
if (sender.url == blacklistedWebsite)
return; // don't allow this web page access
if (request.openUrlInEditor) {
alert('test2 - ' + request.openUrlInEditor);
sendResponse({"success": true, "AckFromBG": "I have received your messgae. Thanks!"}); // sending back the acknowlege to the webpage
}
});
contentscript.js - the content script - actually does nothing
console.log("this is content script");
web-page.html - The local web page
<html>
<body>
This page will will send some message to BG script
<script type="text/javascript">
// DEVELOPMENT extension ID
var editorExtensionId = "fjaedjckfjgifecmgonfmpaoemochghb"; // replace with your extension ID
var url = 'test';
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url}, function(response) {
console.log(response);
if (!response.success)
handleError(url);
});
function handleError(url) {
console.log(url);
}
</script>
</body>
</html>
Summary of changes:
Defined blacklistedWebsite - this was undefined.
Added sendResponse({"success": true, "AckFromBG": "I have received
your messgae. Thanks!"}); to send back the acknowledgment to the
webpage.
Define function handleError(url) {
console.log(url);
} this was not defined.
That's it. Hope this will solve your issue.
The error you are getting indicates that chrome.runtime.sendMessage is executed. This means that external messaging is set up correctly: otherwise, chrome.runtime.sendMessage wouldn't be exposed to your page's code.
I think the problem is here:
if (sender.url == blacklistedWebsite)
return; // don't allow this web page access
I suspect the problem is blacklistedWebsite being undefined; the code fails with a ReferenceError and no meaningful response is being sent. Since the onMessage listener terminates (even with an error), the calling code gets an undefined response.
Check your background console to confirm if that's the case; if you copied this partial example code but aren't using this blacklisting functionality, delete this branch.
In future, please make sure you understand what every line of code you copy does!
I have a requirement to launch a chrome application from a web page button click. I have found the following resources,'
Run Google Chrome application from url
Activate chrome app from web page?
How can I launch a Chrome Packaged App through javascript?
Which suggests to use externally_connectable and url_handlers but doesn't seem to work. Is there a proper way I could launch a chrome application via button click on web page by calling the chrome app extension id?.
I am new to this field and any help from you experts would be greatly appreciated :)
PS
I tried the following command on a button click on my web page,
chrome.management.launchApp('app id');
This resulted in an error Uncaught TypeError: Cannot read property 'launchApp' of undefined.
I found how to achieve this incase someone else comes across this issue.
in your web page on button click for example, include the following code,
//data passed from web to chrome app
chrome.runtime.sendMessage('your_chrome_app_id', { message: "version" },
function (reply) {
if (reply) {
if (reply.version) {
//log the response received from the chrome application
console.log(reply.version);
}
}
}
);
in your chrome application manifest.json define the externally_connectable url/ urls as follows,
{
"name": "App name",
"description": "App Desc",
"version": "1",
...
"externally_connectable": {
"matches": ["*://localhost:*/"]
}
}
In your application background.js setup a listener to be invoked when a message is sent from the web page as follows,
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
if (request) {
if (request.message) {
if (request.message == "version") {
//my chrome application initial load screen is login.html
window.open('login.html');
//if required can send a response back to the web site aswell. I have logged the reply on the web site
sendResponse({version: '1.1.1'});
}
}
}
return true;
});
Hope this helps :)
Hasitha's reply worked. However in the manifest file I needed to do a regex change.
For the URL
localhost:3905/manager
obviously the externally_connectible value should be set as
"externally_connectable": {
"matches": ["*://localhost:*/*"]
}
But for some reason, the same URL cannot be matched with
"externally_connectable": {
"matches": ["*://localhost*"]
}
did not work.
Generated error Invalid match pattern '://localhost'
I try to create a communication channel between specific webpage (per example : www.website.dev) and a chrome extension I created.
By using postMessage it's work from webpage to extension but I can't do that from extension to webpage.
I tried Google example but it uses background page
Thanks for your help
EDIT : sorry I don't understand the difference between content_script and background.js
In my manifest I have content script = test.js
What's about "background" ?
Following the documentation you can pass messages to your extension if you know the extension id:
https://developer.chrome.com/extensions/messaging#external-webpage
manifest.json
"externally_connectable": {
"matches": ["*://*.example.com/*"]
}
website:
// The ID of the extension we want to talk to.
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";
// Make a simple request:
chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},
function(response) {
if (!response.success)
handleError(url);
});
extension:
chrome.runtime.onMessageExternal.addListener(
function(request, sender, sendResponse) {
if (sender.url == blocklistedWebsite)
return; // don't allow this web page access
if (request.openUrlInEditor)
openUrl(request.openUrlInEditor);
});
You will find all the details in the documentation https://developer.chrome.com/extensions/messaging
You would have one piece use sendMessage function while the other piece is listening for the event, which could be either a webpage or content script.
either the webpage's content script should initiate the communication (so you would get the tab id) or you can have the background query for tabs with specific url and then use sendMessage. Notice two separate functions chrome.extension.sendMessage and chrome.tabs.sendMessage used here.
the following code works for me:
content_script.js:
chrome.extension.sendMessage({"msg":"hello"});
background.js:
chrome.extension.onMessage.addListener(function (request, sender, sendResponse) {
if (request.msg == "hello"){
senderTab = sender.tab.id;
chrome.tabs.sendMessage(senderTab, {"msg": "ehlo"});
};
})