I trying send some data from my web application to my chrome extension (like it described in the google documentation), but I have an error: Unchecked runtime.lastError: Could not establish connection. Receiving end does not exist.
My content script:
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);
});
And it's my manifest:
{
"name": "test-extension",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": ["src/bg/background.js"],
"persistent": false
},
"content_scripts": [
{
"matches": ["http://localhost/*"],
"js": ["src/inject/inject.js"]
}
],
"externally_connectable": {
"ids": ["abcdefghijklmnoabcdefhijklmnoabc"],
"matches": ["http://localhost/*"],
"accepts_tls_channel_id": false
}
}
And test page, where I'm trying to send data:
<body>
<button onclick="processData()">Send data to extension</button>
</body>
<script>
function processData() {
/* ... */
// The ID of the extension we want to talk to.
var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";
// Make a simple request:
chrome.runtime.sendMessage(
editorExtensionId,
{ openUrlInEditor: 'https://google.com' },
function(response) {
if (!response.success) handleError(url);
}
);
}
</script>
Problem was been in the externally_connectable configuration. It's dosen't work with localhost. For work with it on the localhost I added in my host file this lines:
127.0.0.1 my.localhost
Then changed manifest to:
"externally_connectable": {
"ids": ["*"],
"matches": [
"http://my.localhost/*",
]
This will expose the messaging API to any page which matches the URL patterns you specify. The URL pattern must contain at least a second-level domain - that is, hostname patterns like "", ".com", ".co.uk", and ".appspot.com" are prohibited. From the web page, use the runtime.sendMessage or runtime.connect APIs to send a message to a specific app or extension
ref: https://developer.chrome.com/extensions/messaging#external-webpage
Maybe it's because of your http://localhost/*
Related
I am trying to load a website inside an iFrame but the server is sending the X-Frame-Options: SAMEORIGIN header so I've tried to use onHeadersReceived to modify the headers though I cannot get it to work.
manifest.json
{
"manifest_version": 2,
"name": "__MSG_extensionName__",
"description": "__MSG_extensionDescription__",
"default_locale": "en",
"version": "0.1",
"author": "author",
"homepage_url": "https://github.com/",
"icons": {
"48": "assets/icons/logo.png"
},
"background": {
"page": "../../background.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["scripts/dist/bundle.js"],
"css": ["assets/css/main.css"]
}
],
"permissions": [
"tabs",
"webRequest",
"contextMenus",
"webNavigation",
"webRequestBlocking"
],
"web_accessible_resources": [
"assets/icons/logo.png"
]
}
background.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="module" src="scripts/dist/contextMenu.js"></script>
<script type="module" src="scripts/dist/modifyHeaders.js"></script>
</head>
</html>
contextMenu.js
browser.contextMenus.create( {
id: "customsearch",
title: "Search",
contexts: ["selection"]
} );
// Context menu onClicked listener
browser.contextMenus.onClicked.addListener( (info, tab) => {
if (info.menuItemId = "custom-search") {
sendMessageToTab(tab, info);
}
} );
function sendMessageToTab(tab, info) {
browser.tabs.sendMessage(
tab.id,
{ query: info.selectionText }
);
}
background.js
var extraInfoSpec = ['blocking', 'responseHeaders'];
var filter = {
urls: ['<all_urls>'],
tabId: -1
};
// Bypass X-Frame-Options
browser.webRequest.onHeadersReceived.addListener(
modifyHeadersCallback,
filter,
extraInfoSpec
);
// onHeadersReceived Callback
function modifyHeadersCallback(details) {
let modifiedResponseHeaders = details.responseHeaders.filter(
header => !(header.name.toLowerCase() == 'x-frame-options' || header.name.toLowerCase() == 'content-security-policy')
);
return {responseHeaders: modifiedResponseHeaders};
};
Context menu works as expected, the problem is with the browser.webRequest.onHeadersReceived listener which seems to not get fired at all as I don't get any errors or logs to the console.
I did any extensive search and tried most of the solutions I've found but nothing worked for my case. Can you spot anything wrong in my approach?
Firefox
All you need is to remove tabId: -1 from your filter object:
browser.webRequest.onHeadersReceived.addListener(
modifyHeadersCallback,
{ urls: ['<all_urls>'] },
['blocking', 'responseHeaders']
);
Chrome
Modern Chrome requires the extraHeaders mode in extraInfoSpec parameter so the universal code for iframes would look like this:
browser.webRequest.onHeadersReceived.addListener(
modifyHeadersCallback,
{ urls: ['<all_urls>'], types: ['sub_frame'] },
// Modern Chrome needs 'extraHeaders' to see and change this header,
// so the following code evaluates to 'extraHeaders' only in modern Chrome.
['blocking', 'responseHeaders', chrome.webRequest.OnHeadersReceivedOptions.EXTRA_HEADERS]
.filter(Boolean)
);
And of course "permissions" in manifest.json should contain the URLs you want to process e.g. in this case it's "<all_urls>".
So, this is either a bug or an intentional change, which wasn't documented yet, so if someone wants to report it please open a new issue on https://crbug.com. I guess it's intentional because the extraHeaders mode means this header is handled in the internal network process, which is separate from the browser process.
I wrote this script to send a message from a background script to a script in a new tab but for some reason, the script in the tab isn't receiving the message. Is this a problem with my script or my browser (Firefox 62.0.3)
my "manifest":
{
"manifest_version":2,
"name": "test",
"version": "1.0",
"description": "this is a test extension",
"background":{
"scripts": ["OnButtonClick.js"]
},
"permissions": [
"tabs"
],
"content_scripts": [{
"matches": ["www.youtube.com"],
"js": ["input.js"]
}],
"browser_action": {
"default_icon": "button.png",
"default_title": "test button"
}
}
my "OnButtonClick.js":
function action(){
browser.tabs.create({
url: "www.youtube.com"
});
browser.tabs.sendMessage(1,{"message":"hi"})
}
browser.browserAction.onClicked.addListener(action);
and my "input.js":
function handleMessage(msg){
console.log(msg);
}
browser.runtime.onMessage.addListener(handleMessage)
browser.tabs.create() is a asynchronous therefore, browser.tabs.sendMessage() runs even before a tab is created.
You have to wait for it to run first.
Here are some suggestions:
// first create the tab
const newTab = browser.tabs.create({
url: 'https://example.org'
});
newTAb.then(onCreated, onError);
// after tab is created
function onCreated(tab) {
browser.tabs.sendMessage(tab.id,{message: 'hi'});
}
// in case of error
function onError(error) {
console.log(`Error: ${error}`);
}
// above can also be written as this
browser.tabs.create({
url: 'https://example.org'
}).then(
tab => browser.tabs.sendMessage(tab.id,{message: 'hi'}),
error => console.log(error)
);
// another alternative for above
browser.tabs.create({url: 'https://example.org'})
.then(tab => browser.tabs.sendMessage(tab.id,{message: 'hi'}))
.catch(error => console.log(error));
// Using chrome and callback function
chrome.tabs.create({url: 'https://example.org'}, tab =>
browser.tabs.sendMessage(tab.id,{message: 'hi'})
);
// same as above, all with chrome
chrome.tabs.create({url: 'https://example.org'}, tab =>
chrome.tabs.sendMessage(tab.id,{message: 'hi'})
);
You can also use async/await but that may make it more complicated in this case.
Update on comment:
content_scripts by default run at "document_idle" (corresponds to complete. The document and all its resources have finished loading.)
"content_scripts": [{
"matches": ["www.youtube.com"],
"js": ["input.js"]
}],
Therefore, the input.js is injected once everything is loaded. However, the sendMessage() runs as soon as tab is created and thus there is no listener to listen to its message.
In your simple example, that can be fixed by "run_at": "document_start"
"content_scripts": [{
"matches": ["www.youtube.com"],
"js": ["input.js"],
"run_at": "document_start"
}],
However, if input.js needs to access DOM after receiving message, then you need to add a DOMContentLoaded or load listener and run it after the document is loaded.
why do you want to use "sendMessage"?
you can use this code
browser.tabs.executeScript(tabID, { code: "func()" /* your function in content script*/,frameId:0 /* for send to all frame or put id for use a special frame id*/});
or this code as file
browser.tabs.executeScript(tabID, { file: "/filename.js",frameId:0});
First off, I'm new to making chrome extensions, so don't assume I know a whole lot. For the extension I'm making the user needs to be able to right click on a link, select a context menu item, and the extension needs to get sent the final url of that link.
Specifically amazon affiliate links. So for example the following:
http://amzn.to/1VO7dlp
Would need to get converted to:
http://www.amazon.com/gp/product/0470281731/ref=as_li_ss_tl?ie=UTF8&fpl=fresh&pf_rd_m=ATVPDKIKX0DER&pf_rd_s=desktop-1&pf_rd_r=0WRZW1V7VVDJWS54WCM4&..... blah blah blah
I've looked around and I can't find any answers. Am I SOL?
The code I have so far is pretty basic:
//background.js
chrome.runtime.onInstalled.addListener(function() {
chrome.contextMenus.create({
title: 'Add this Link',
id: 'linkContext',
contexts: ['link'],
});
});
chrome.contextMenus.onClicked.addListener(function(data, tab) {
if (data.menuItemId === "linkContext") {
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id,
{
linkUrl: data.linkUrl,
},
function(response) {
alert(response.host);
});
});
}
});
chrome.runtime.onMessage.addListener(
//content_script.js
function(request, sender, sendResponse) {
if (request.linkUrl){
pathArray = request.linkUrl.split( '/' );
protocol = pathArray[0];
host = pathArray[2];
url = protocol + '//' + host;
sendResponse({host: host});
}
});
//manifest.json
{
"name": "jQuery DOM",
"manifest_version": 2,
"version": "1.0",
"description": "Manipulate the DOM when the page is done loading",
"browser_action": {
"name": "Manipulate DOM",
"icons": ["icon.png"],
"default_icon": "icon.png"
},
"background": {
"scripts": ["background.js"],
"persistent": false
},
"permissions": [
"contextMenus"
],
"content_scripts": [ {
"js": [ "jquery.min.js", "content_script.js" ],
"matches": [ "http://*/*", "https://*/*"]
}],
"web_accessible_resources":[
"menu.html",
"menu.css"
]
}
Like I said I'm pretty new to this, so I'm unsure of how to proceed. I'd like to do some parsing of the "final url" so I can present information about it to the user. I.E. the Affiliate ID. But for that I can't use the shortened link from above.
As Redirects is a response from the server back to you, you can read the header-field and see what url your initial url redirects to.
In this case, I just tested to open a new tab in Chrome, and opened the Network tab and navigated to your initial url. Then I saw two separate redirects (http status code 301), before the the full url of the resulting page was shown.
This you can do in code as well, to be able to get to the final url. :)
When i use this following script it works with normal browser. But when iframe is used then its showing me this error:
Does anyone know what is causing this and can be resolved?
ERROR:
channel message Object {type: "getScreenPending", id: 24504, request: 6} content.js:4
channel message Object {type: "gotScreen", id: 24504, request: 6} content.js:4
>>> ShareScreen: if any err NavigatorUserMediaError {constraintName: "", message: "", name: "InvalidStateError"} test.js:1616
manifest.json:
{
"name": "Screen sharing",
"description": "Screensharing utility",
"version": "0.0.2",
"manifest_version": 2,
"minimum_chrome_version": "34",
"icons": {
"48" : "icon.png"
},
"permissions": [
"desktopCapture"
],
"background": {
"scripts": ["background.js"]
},
"content_scripts": [ {
"js": [ "content.js" ],
"all_frames": true,
"run_at": "document_start",
"matches": ["*://*.a.com/*", "*://*.b.com/*"]
}],
"web_accessible_resources": [
"icon.png"
]
}
background.js:
/* background page, responsible for actually choosing media */
chrome.runtime.onConnect.addListener(function (channel) {
channel.onMessage.addListener(function (message) {
switch(message.type) {
case 'getScreen':
var pending = chrome.desktopCapture.chooseDesktopMedia(message.options || ['screen', 'window'],
channel.sender.tab, function (streamid) {
// communicate this string to the app so it can call getUserMedia with it
message.type = 'gotScreen';
message.sourceId = streamid;
channel.postMessage(message);
});
// let the app know that it can cancel the timeout
message.type = 'getScreenPending';
message.request = pending;
channel.postMessage(message);
break;
case 'cancelGetScreen':
chrome.desktopCapture.cancelChooseDesktopMedia(message.request);
message.type = 'canceledGetScreen';
channel.postMessage(message);
break;
}
});
});
content.js:
/* the chrome content script which can listen to the page dom events */
var channel = chrome.runtime.connect();
channel.onMessage.addListener(function (message) {
console.log('channel message', message);
window.postMessage(message, '*');
});
window.addEventListener('message', function (event) {
if (event.source != window)
return;
if (!event.data && (event.data.type == 'getScreen' || event.data.type == 'cancelGetScreen'))
return;
channel.postMessage(event.data);
});
This is caused by the fact that the a stream can only be used by frames whose URL match the origin of the tab. Starting with Chrome 40, you can use the stream in frames as well if you set tab.url to a URL whose origin matches the frame (crbug.com/425344).
The stream is only valid for ten seconds, so you have to follow the following flow:
Load the iframe that contains the page that should handle the stream. This page must be served from a secure scheme, e.g. https: or chrome-extension:.
Send the frame's origin (location.origin) to the background page.
Request the desktop stream using the tab info, with tab.url set to the frame's URL or origin.
Send the streamId back to the frame and use it (within ten seconds).
Example (based on the code in the question):
var tab = channel.sender.tab;
// NEW (Chrome 40+)
tab.url = message.url; // Your custom message, e.g. {url: location.origin}
chrome.desktopCapture.chooseDesktopMedia(['screen', 'window'], tab,
function (streamid) {
// ... see question for the rest of the code
});
1 - this is not a code problem, browser problem
2 - this is not working because i am launching the extension from HTTP (http://www.maindomain.com) using iframe a HTTPS (https://subdomain.maindomain.com) link which is using the browser extension
So to fix it. I needed to use HTTPS (https://www.maindomain.com) opening HTTPS iframe links (https://subdomain.maindomain.com) . Since then it works now.
Hope this help others.
NOTE: problem occurred: when i run the iframe from same subdomain subdomain.maindomain.com/test.php (iframe src=subdomain.maindomain.com/core.php) then it works. But when i am running it as maindomain.com/otherpages (iframe src=subdomain.maindomain.com/core.php) then this is not working. Was very confusing.
EDIT: This still did not resolved the problem. screen share dialog box opens but when i press share screen then it gives same error and fails.
I have a Chrome extension that I'm working on that redirects users of a non-HTTPS site to the HTTPS version automatically.
However, the current problem with this is that the user must activate this redirection manually.
This would be an easy feat to accomplish using content_scripts in manifest.json, however, according to the Chrome documentation, content scripts "Cannot...Use chrome.* APIs (except for parts of chrome.extension)".
So, here's the manifest file for my extension:
{
"name": "SSL Redirect",
"version": "1.0",
"manifest_version": 2,
"description": "Redirects plain HTTP domain.com to the encrypted, HTTPS secured version.",
"permissions": [ "tabs", "http://*/*", "https://*/*" ],
"background" : {
"page": "body.html"
},
"browser_action": {
"default_icon": "icon.png"
},
"content_scripts": [
{
"matches": ["http://www.domain.com/*"],
"js": ["redirect.js"]
}
]
}
And here's the js:
var domain = /domain.com\//;
var ssldomain = "ssl.domain.com\/";
function updateUrl(tab){
if(tab.url.match(ssldomain)) {
alert("You're already using the SSL site. :)")
throw { name: 'Error', message: 'Stopped running, already in SSL mode.' };
}
if(tab.url.match(domain)) {
var newurl = tab.url.replace(domain, ssldomain);
newurl = newurl.replace(/^http:/, 'https:');
newurl = newurl.replace("www.", "");
chrome.tabs.update(tab.id, {url: newurl});
}
if(!(tab.url.match(domain))) {
alert("This extension only works on domain.com.")
throw { name: 'Error', message: 'Stopped running, not on domain.com.' };
}
}
chrome.browserAction.onClicked.addListener(function(tab) {updateUrl(tab);});
My ultimate goal is to get this to run automatically on any page matching domain.com, without user interaction.
I'm a little stuck. Any ideas?
1) From within the content script, you can use standard methods of changing URL, since you are running in the context of the page. I.e.:
var oldUrl = location.href;
/* construct newUrl */
if(newUrl != oldUrl) location.replace(newUrl);
2) Scrap what you've written already and read about chrome.webRequest API.
This will achieve what you need without a content script or tab manipulation.
Example:
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
var url = details.url.replace(/^http/, "https");
return {redirectUrl: url};
},
{urls: ["http://domain.com/*"]},
["blocking"]
);
Note: you need host permissions for "*://domain.com/*"