I'm trying to communicate from a web page to an extension and vice versa.
To do so, I looked at the Mozilla documentation here : https://developer.mozilla.org/fr/Add-ons/WebExtensions/Content_scripts#Communicating_with_the_web_page
And it has a simple example, but I can't make it work. On the web page script, I have this :
// page-script.js
var messenger = document.getElementById("from-page-script");
messenger.addEventListener("click", messageContentScript);
function messageContentScript() {
window.postMessage({
direction: "from-page-script",
message: "Message from the page"
}, "*");
On the content scripts page in the extension :
// content-script.js
window.addEventListener("message", function(event) {
if (event.source == window &&
event.data.direction &&
event.data.direction == "from-page-script") {
alert("Content script received message: \"" + event.data.message + "\"");
}
});
I installed the extension (as a temporary one, I uploaded my xpi file), then I used the "Debugging" method of API WebExtensions, and put a breakpoint into the listener, but whenever I call the PostMessage, the extension never seems to receive the event, the breakpoint is never triggered.
Is it possible to communicate this way between a web page and an extension ? Or is there another one ?
The problem was in the manifest of my extension. I declared my content script as a background script.
So, instead of writing this :
"background": {
"scripts": ["myscript.js"],
"persistent": true
},
You have to declare the script like this :
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["myscript.js"]
}
]
I was experiencing similar issues and the problem for me is I was calling the
window.postMessage
function from within an iframe. After I changed this to
top.window.postMessage
it started working.
Related
Sorry for my poor English, i hope you can understand the issue.
I'm new to chrome extension development,and for sure in my code there are a lot of
thing to change or optimize;
anyway i've written a simple code that, (seems) works at least from my chrome.
The code clicks a button every X minutes in specific page, then wait and parse the result in page.
I've :
a content script (loaded from manifest.json) which "inject" some button and text Input box in page, so user can sets some "filter params" before click a "start button"; the start button then sendMessage() to background.js to set Alarm Event for the click ;
an eventPage (which is set persistent true in actually ) which handle the request from tabs and set a countdown alarm for each tab; when X min are passed fire a message to the interested tab;
I also have a popup.html e popup.js not important here (i think).
I've to distribuite this extension manually, so i would distribuite a zip that user can load with "developer mode ".
*Now the issue is: why the code was working only on my Chrome ? *
I've tested with others 2-3 laptop with Chrome, the background script is loaded (i can see the background page printint console log)
but in webpage the contents.js seems no way executed .
In my chrome works well: i can see in console some initial output (i print the name of dir extension to check) and
the dynamic created element (button,input box ect.) in page.
And all is working, i can fire the start button and receive results of parsing.
During the development i've never run the extension on other machine. Yesterday i've succssfully tested on 2-3 laptop.. then i made only few change but nothing serious.
Today i can run only in my chrome.
In other pc nothing, neither the simple console.log output first line of script.
I can read in console log :
"Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist."
but this also in my working istance in my laptop chrome .
The zip file is the same and the extraction is good, in fact i can actually load the extension and i see the background page debug console.log() sentences
In some case, in laptop where it dosen't work, i've received a message relative jQuery and the fact that chrome.runtime.sendMessage() is not defined; and it points to code in webpage, not mine.
I've see that in webpage code there is something like:
var extid = "mcmhdskbnejjjdjsdkksmeadjaibo";
var extVer = "1.5";
var extStatus = 0;
$(document).ready(function () {
///...
chrome.runtime.sendMessage(extid, {message: "version"},
function (reply) {
if (reply) {
if (reply.version) {
if (reply.version == extVer) {
if (reply.gminfo != 'OK') {
extStatus = 1; /// ...
Seems that chrome.runtime is undefined, and the webpage can't call the sendMessage().
EDIT: this undefined occurs only when my extension is loaded
Maybe there is some conflict when i load my extension? But in my chrome browser works...
Can some expert indicate in where direction i've to investigate?
Thanks a lot for any suggestions.
My Manifest.json :
{"manifest_version": 2,
"name": "myAlarm",
"description": "This extension alerts.",
"version": "0.1",
"permissions": [
"alarms",
"system.cpu",
"storage",
"tabs",
"webNavigation",
"https://www.mytargetsite.com/subUrl/"
],
"web_accessible_resources": [
"icon.png",
"vanillaSelectBox.css"],
"content_scripts": [
{
"matches": ["https://www.mytargetsite.com/subUrl/"],
"css": ["vanillaSelectBox.css"],
"js": ["jquery-3.3.1.min.js","vanillaSelectBox.js","taffy-min.js","content.js"],
"run_at": "document_end"
}
],
"background": {
"scripts": ["eventPage.js"],
"persistent": true
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"icons": {
....
}
}
My contents,js (stripped):
chrome.runtime.onMessage.addListener(
function(request, sender) {
// here i parse message "time'up" from background js
});
window.addEventListener('load', function() {
var pt=chrome.runtime.getURL('filterOff.wav');
var p=pt.split("/");
console.log("[myAlarm v0.1] started" );
console.log("[myAlarm v0.1] folder : ("+p[2]+")");
// here i start an active wait for the presence in page of button with ID= btntarget_id
waitForElementToDisplay("#btntarget_id", 500); //when function find button then create and add button and input text to webpage
});
My eventPage.js :
var curr_alarms =[];
chrome.extension.onMessage.addListener(function(request, sender)
{ /// here receive start countdown message from content.js and set alarm ...
}
chrome.alarms.onAlarm.addListener(function(alarm) {
/// here i manage each alarm for each tab
});
chrome.tabs.onRemoved.addListener(function(tabid, removed) {
// ...
});
chrome.tabs.onUpdated.addListener(function
(tabId, changeInfo, tab) {
//
});
edit : in browser where it dosen't work i can read also :
Access to XMLHttpRequest at 'https://mytargetsite.com/suburl/grid.php' (redirected from 'https://mytargetsite.com/suburl/grid.php') from origin 'https://mytargetsite.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
The fact that the declared content script runs or not, should be verified by inspecting in devtools => sources sub-tab => content scripts sub-sub-tab. If it really doesn't run, there can be just two explanations: the URL is different (for example not https) or extensions are blocked by their domain admin via runtime_blocked_hosts which you can see in chrome://policy.
Your development mode extension's id will be different on a different machine unless you pin it by adding a "key" in manifest.json
To use chrome.runtime to send messages to your extension from a webpage code (not from a content script!) your extension's manifest should declare "externally_connectable" and use a different event onMessageExternal, see also sending messages from web pages.
The CORS error may be irrelevant to your code (you can investigate the source of the error by expanding the error's call stack in devtools console).
My Script
var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
this.addEventListener('load', function() {
//console.log(this.responseURL);
if(this.responseURL == "https://get.example.com/dashboard/summary")
{
// Run the function
funMain();
}
});
origOpen.apply(this, arguments);
};
function funMain() {
// My codes
}
This is my script and it's working as expected.
What this does is, this listen to XMLHttpRequests and when an XMLHttpRequest is made to 'https://get.example.com/dashboard/summary', it calls funMain function. Since this is an event, this is not a one time event. This can be happened multiple times. This XMLHttpRequest is made by https://example.com/dashboard webpage.
Process: If an XMLHttpRequest is made to 'https://get.example.com/dashboard/summary' by https://example.com/dashboard webpage, then call funMain function.
So now, I want to build an extension using this working script.
This is what I have tried so far...
Content Script
function funMain() {
// My codes
}
Note: I know that I have to use browser.runtime.sendMessage() to communicate between background script and content script. But at the moment, I'm trying to get the event function (in the Background Script) working.
Background Script
console.log("Msg 01 - Background script is running.");
var origOpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
this.addEventListener('load', function() {
console.log("Msg 02 - " + this.responseURL);
if(this.responseURL == "https://get.example.com/dashboard/summary")
{
// Run the function
// funMain();
console.log("Msg 03 - Hello! I am working as expected.");
}
});
origOpen.apply(this, arguments);
};
Manifest
{
"manifest_version": 2,
"name": "Beastify",
"version": "1.0",
"description": "des",
"icons": {
"48": "icons/beasts-48.png"
},
"permissions": [
"webRequest",
"<all_urls>"
],
"content_scripts": [{
"matches": [
"*://*.example.com/dashboard"
],
"js": [
"content-script.js"
]
}],
"background": {
"scripts": ["background.js"]
}
}
The problem is, the event does not work as expected. Therefore, funMain cannot be called. When I inspect the background page, I can only see Msg 01. I cannot see Msg 02 or Msg 03.
Output: background.js
Msg 01 - Background script is running.
What am I doing wrong and how can I fix this?
It all depends on the actual situation. Here are some ideas that you can work on.
It is better to use standard JavaScript XMLHttpRequest instead of usingXMLHttpRequest.prototype.
Content script and browser have different scope and for security do not interact directly.
You can
Have XHR in the content script and use
webRequest
API in the background script to listen to HTTP requests
Use runtime.sendMessage() from content script to background script to run the XHR in the background script
Then from background script
Use
tabs.sendMessage() to send message to contentscript
Use tabs.executeScript() to directly run scripts in the content scope or initiate functions in the content script
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 want to be able to communicate from content-script (any tab) to background.
According to the documentation, I should be using chrome.extension chrome.runtime.onMessage with chrome.runtime.sendMessage.
So that's what I did:
manifest.json
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"*://*/*"
],
background.js
console.info('1');
chrome.runtime.onMessage.addListener((request, sender, sendReponse) => {
console.info('2');
sendReponse({ msg: 'foo' });
return true;
});
I'm not very sure the return true; is needed. I tried with and without.
After building and reloading the extension I accessed chrome background page through chrome://extensions
> 1 // background.js file was run
> chrome.runtime.sendMessage({ hello: 'so' }, v => console.info(v))
> undefined
> undefined // This is the callback response I get. Why?
More important, I also get an empty response callback when running sendMessage from other tabs (i.e. stackoverflow.com)
> chrome.runtime.sendMessage('extension id', { hello: 'so' }, v => console.info(v))
> undefined
> undefined
Why do I get an empty response callback?
Am I missing any special permission? Wrong parameters? Maybe wrong API functions to do so?
runtime.sendMessage doesn't send the message to the sender's context since Chrome 49.
If sending to your extension, the runtime.onMessage event will be fired in every frame of your extension (except for the sender's frame),
webpages can send messages to your background/event page in two cases:
externally_connectable key in manifest.json allowed that page
a content script of your extension is loaded for that page, in which case you can switch the context to your extension in the console toolbar to be able to send messages manually from console:
The content script can be declared in manifest.json in which case it's autoinjected by [re]loading the page. Or you can inject it explicitly with tabs.executeScript from the background/event page.
Manifest:
{
"manifest_version":2,
"name":"Optimize url",
"description":"Optimize url",
"page_action":{
"default_icon":{
"19":"url-icon16.png",
"38":"url-icon48.png"
},
"default_title":"Optimize url"
},
"background":{
"scripts":["background.js"]
},
"version":"0.1",
"permissions":[
"tabs",
"https://url.com/*"
]
}
Background JS:
function checkURL(){
var host = parseURL(tab.url).host;
if (host.indexOf("url.com") >= 0) {
chrome.pageAction.show(tabId);
}
}
chrome.tabs.onUpdated.addListener(checkURL);
Yet when I add it to the developing Extensions page. It doesn't show up anywhere. I was originally going to have this as a browser action but it made more since to use it as a page action since it's only going to be focused for one website only.
Can anyone explain to me what I may be doing wrong?
There are the following problems with your code:
The variable tab, which is used in checkURL, is nowhere defined.
The function parseURL is also nowhere defined (it is not a built-in function as you seem to assume).
It is, also, a good idea to filter the onUpdated events looking for status: 'complete', because several onUpdated events are triggered during a single tab update.
So, replace your background.js code with the following:
var hostRegex = /^[^:]+:\/\/[^\/]*url.com/i;
function checkURL(tabId, info, tab) {
if (info.status === "complete") {
if (hostRegex.test(tab.url)) {
chrome.pageAction.show(tabId);
}
}
}
chrome.tabs.onUpdated.addListener(checkURL);