I know that there's a bunch of questions about the "not allowed by Access-Control-Allow-Origin." error.
But I've tried some of them without success. :(
Some appointments:
I'm trying to build a dev-tools-tab extension
I can touch flickr API like the example shows
I can't reach localhost
Already tried several permission wildcards
http://localhost/
http://*/
*://*/
Already tried pack'd and unpack'd extensions
currently, manifest.json has
"version": "0.0.1",
"manifest_version": 2,
"devtools_page": "components/devtools.html",
"permissions": [
"http://*/"
]
devtools.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script src="../js/devtools.js"></script>
</body>
</html>
and, devtools.js
(function (window) {
"use strict";
var xhr1, xhr2, url;
xhr1 = new window.XMLHttpRequest();
xhr2 = new window.XMLHttpRequest();
xhr1.onreadystatechange = function () {
if (this.readyState === 4) {
console.log('flickr ok');
}
};
xhr2.onreadystatechange = function () {
console.log(this.readyState);
if (this.readyState === 4) {
console.log(this.responseText);
}
};
url = 'https://secure.flickr.com/services/rest/?' +
'method=flickr.photos.search&' +
'api_key=90485e931f687a9b9c2a66bf58a3861a&' +
'text=' + encodeURIComponent('cats') + '&' +
'safe_search=1&' +
'content_type=1&' +
'sort=interestingness-desc&' +
'per_page=20';
xhr1.open('get', url, true);
xhr1.send();
url = 'http://apache.local';
xhr2.open('get', url, true);
xhr2.setRequestHeader('Origin', url);
xhr2.send();
Chrome console output:
1 devtools.js:12
Refused to set unsafe header "Origin" devtools.html:1
XMLHttpRequest cannot load http://apache.local/. Origin chrome-extension://nafbpegjhkifjgmlkjpaaglhdpjchlhk is not allowed by Access-Control-Allow-Origin. devtools.html:1
4 devtools.js:12
flickr ok devtools.js:8
Chrome version:
28.0.1500.20 dev
Thanks in any advice.
I've got it!
Actually, the problem is that I'm trying to perform XHR requests on devtools page and it seems to have no permissions to bypass cross-origin-access policies like a popup page do.
Devtools tab tries are also unsuccessful.
edit
Is an stage-permission related. Not wildcard-permission. As I've said, I've managed to perform queries on some domains, yet not having they explicitly on my permissions array.
The problem really lies on the type of script running.
The same script, if used as a popup, work'd fine. So, I've tried as an background-script with success too! I was facing the problem that devtools_page and related doesn't have such permissions...
The APIs available to extension pages within the Developer Tools window include all devtools modules listed above and chrome.extension API. Other extension APIs are not available to the Developer Tools pages, but you may invoke them by sending a request to the background page of your extension, similarly to how it's done in the content scripts.
http://developer.chrome.com/extensions/devtools.html
That level of script denies non explicit cross xhrs.
Solved the problem putting the requests in a background script and using messages api.
Thank you!
Related
Problem: I'm trying to have my webapp communicate with the background script of my chrome extension. However, when I invoke chrome.runtime.sendMessage() from my webapp, in order to send a message to the background.js script in my extension, the response callback never gets invoked. It also appears that background.js isn't receiving the message. Is what I'm trying to do possible? If so, given the information below, can anyone help me?
Background
My browser extension has a Newtab page, that I've configured to load my webapp. It does so by loading the webapp in an iframe:
<html>
<body style="margin:0px;padding:0px;overflow:hidden;">
<iframe src="https://www.example.com" frameBorder="0" style={{height:"100vh", width:"100vw", overflow: "hidden"}} height="100%" width="100%"/>
</body>
</html>
I have set the content-security-policy in manifest.json to allow this to happen:
"content_security_policy": {
"extension_pages": "object-src 'none'; child-src https://www.example.com https://example.com; frame-src https://www.example.com https://example.com; script-src 'self'"
}
I have enabled connectivity between my extension and my webapp using the externally_connectable manifest.json key:
"externally_connectable": {
"matches": [
"http://localhost:3000/*",
"https://*.example.com/*",
"https://example.com/*"
]
}
In my webapp (example.com), I have a script that tries to send a message to the background.js service worker. This script executes without any errors reported in the console. Note: this script is running on a webpage that is inside an iFrame in a page bundled with the extension.
function sendMessageToExtension() {
console.log("I got called");
if (chrome && chrome.runtime) {
console.log("Sending message to extension"); // this code is executed
chrome.runtime.sendMessage(
"extension_id",
{ type: "example.message.type"},
{includeTlsChannelId : true},
function(rsp) {
if(arguments.length === 0) {
console.log(chrome.runtime.lastError);
}
console.log(rsp.message)
} // this call back never gets invoked.
);
} else {
// TODO: need to detect this in production.
console.log("no chrome.runtime");
}
}
My background code to handle the message looks like this:
chrome.runtime.onMessageExternal.addListener(
(request, sender, sendResponse) => {
console.log("onMessageExternal invoked") // never gets called
if (request.type === "example.message.type") {
sendResponse({message: "message received by background worker."});
}
}
)
Other Notes: This doesn't appear to work even when I load the webpage by navigating to it in the URL bar, so I'm not entirely sure what's going on.
The answer to my question is yes you can! And as it turns out, the code I posted is exactly how you would do it.
I am learning to make a chrome extension and deveoped one with a popup browser action and have the following js file (called in popup.html via )
chrome.tabs.executeScript({
code:
"var frameworks = [];" +
"if(!!window.Vue) frameworks.push('Vue.js');" +
"if(!!window.jQuery) frameworks.push('jQuery.js');" +
"frameworks;"
}, (frameworks) => {
document.body.innerHTML = frameworks[0].length
})
But when I am testing it on my website made using both vue and jquery it returns 0, I also checked it on other websites but all behaved same.
What am I doing wrong here?
i'm making a chrome extension that opens a web-site if the current tab is not the same web-site, so i managed to get all of the tabs like this:
chrome.tabs.getAllInWindow(null, allTabs);
and i wrote a function to display it:
function allTabs(tabs) {
var tabsURLS = '';
for (var i = 0; i < tabs.length; i++) {
tabsURLS = tabs[i].url + '\n';
}
alert(tabsURLS);
}
but i need to get the current page url so i get the current tab by this:
var object=chrome.tabs.getCurrent(function(){;});
but i cant get to page properties like id or url and this alert shows "undefined" ...
alert(object);
while this alert doesn't work at all
alert(object.id);
in the end, i read this page chrome.tabs and i was shocked when i read this line
getCurrent
chrome.tabs.getCurrent(function callback)
Gets the tab that this script call is being made from. May be undefined if called from a non-tab context (for example: a background page or popup view).
so i don't think that there is a solution of getting the current opened tab from chrome extension...
I believe that you need to use getSelected instead
<html>
<head>
<script>
chrome.tabs.getSelected(null, function(tab) {
var tabId = tab.id;
var tabUrl = tab.url;
alert(tabUrl);
});
</script>
</head>
the final code was like this, and it worked just fine.. :
var tabUrl;
chrome.browserAction.onClicked.addListener(function(activeTab) {
var x=activeTab.url;
var newURL = "https://www.google.com";
if (x!= newURL) {
//to open a page in a new tab
chrome.tabs.create({url: newURL,"selected":true});
//to open the page with the current tab
chrome.tabs.update(activeTab.id, {url:newURL});
}
});
The current accepted answer is out of date.
According to MDN, tabs.getSelected() is depricated
Use this instead:
tabs.query({active: true})
Ensure to set the correct permissions in manifest.json to access tab information:
"permissions": [
"tabs",
"http://*/*"
],
After that, you can determine the URL by using
chrome.tabs.getSelected(null, function (tab) {
alert(tab.url);
});
I've written the following script to change the URL of a tab in Chrome, but can't figure out how to get it to automatically run on every page.
var nytimes = /.*nytimes\.com.*/;
var patt = /(&gwh=).*$/;
function updateUrl(tab){
if(tab.url.match(nytimes))
{
var newUrl = tab.url.replace(patt,"");
chrome.tabs.update(tab.id, {url: newurl});
}
}
chrome.tabs.onUpdated.addListener(function(tab) {updateUrl(tab);});
I put that into my background page, but it isn't working. Do I need to put the code somewhere else to get it to run?
I strongly suggest you read about content scripts. They are exactly what you're looking for but you need to understand that they have limited access to the Chrome.* API, so you'll have to use message passing in order to use your current functionality. However, by using content scripts you can probably make this simpler using one of my proposed solutions.
Solution 1
Assuming you want to send the redirect to the same URL every time, you can easily configure your extension to only run your content script on the NY Times site. For example;
Content Script: content.js
location = 'http://example.com';
Solution 2
However, if the redirect URL can vary you many want to abstract that logic in to your background page. For example;
Content Script: content.js
// Or you can pass a more specific section of the URL (e.g. `location.pathname`)
chrome.extension.sendRequest({href: location.href}, function(data) {
location = data.url;
});
Background Page: background.js
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
sendResponse({
url: getUrl(request.href) // TODO: `getUrl` method containing your logic...
});
});
Important!
Regardless of which approach you go for you will also need to request permission to run the content script on the target site in your manifest file.
Manifest: manifest.json
{
...
"content_scripts": [
{
"js": ["content.js"],
"matches": ["*://*.nytimes.com/*"],
"run_at": "document_start"
}
],
...
}
I've read all the cross domain iframe posts here (my thanks to all of you!) and elsewhere.
The postMessage script at cross-domain iframe resizer? works beautifully in Firefox 5 and up. It resizes the iframe every time a page is clicked within the iframe perfectly.
But it doesn't resize at all in IE (7 8 or 9) on my computer. I checked the security settings and the one in IE for access across domains was checked to enable.
Does postMessage not work in IE? - Or is there something else that needs to be added? thanks
It's a great script from thomax - it also works on so you can use iframes on mobile - iphones and android
For IE7 and IE8, you have to use window.attachEvent instead of window.addEventListener
It should also be onmessage instead of message (see below) ps you also need to do the same on the server with the content posting its size
<script type="text/javascript">
if (window.addEventListener)
{
function resizeCrossDomainIframe(id) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
var height = parseInt(event.data) + 32;
iframe.height = height + "px";
}, false);
}
}
else if (window.attachEvent)
{
function resizeCrossDomainIframe(id) {
var iframe = document.getElementById(id);
window.attachEvent('onmessage', function(event) {
var height = parseInt(event.data) + 32;
iframe.height = height + "px";
}, false);
}
}
</script>
Using Peter's code and some ideas from here, you could separate out the compatibility from the executable code, and add some cross-site validation.
<script type="text/javascript">
// Create browser compatible event handler.
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
// Listen for a message from the iframe.
eventer(messageEvent, function(e) {
if (e.origin !== 'http://yourdomain.com' || isNaN(e.data)) return;
document.getElementById('iframe_id_goes_here').style.height = e.data + 'px';
}, false);
</script>
Also, for completeness, you could use the following code within the iframe whenever you want to trigger the resize.
parent.postMessage(document.body.offsetHeight, '*');
You can use the implementation of Ben Alman. Here is an example of cross-domain communication, including an example of iframe resize.
http://benalman.com/code/projects/jquery-postmessage/examples/iframe/
According to the documentation, it works on Internet Explorer 6-8, Firefox 3, Safari 3-4, Chrome, Opera 9.
Having looked a lots of different solutions to this I ended up writing a simple jQuery plugin to take a account of a number of different use cases. As I needed a solution that supported multiple user generated iFrames on a portal page, supported browser resizes and could cope with the host page JavaScript loading after the iFrame. I also added support for sizing to width and a callback function and allow the override of the body.margin, as you will likely want to have this set to zero.
https://github.com/davidjbradshaw/iframe-resizer
The host page users jQuery, the iframe code is just a little self-contained JavaScript, so that it's a good guest on other people pages.
The jQuery is then initialised on the host page and has the following available options. More details on what these do on the GitHub page.
$('iframe').iFrameSizer({
log: false,
contentWindowBodyMargin:8,
doHeight:true,
doWidth:false,
enablePublicMethods:false,
interval:33,
autoResize: true,
callback:function(messageData){
$('p#callback').html('<b>Frame ID:</b> ' + messageData.iframe.id +
' <b>Height:</b> ' + messageData.height +
' <b>Width:</b> ' + messageData.width +
' <b>Event type:</b> ' + messageData.type);
}
});
If you set enablePublicMethods, it gives you access in the iframe to manually set the iFrame size and even remove the iframe from the host page.