I am new to javascript and writing web extensions. I want to write a web extension which changes the color of schedule entrys in my university planner.
After some starting struggle I've been finally able to write a Firefox WebExtension that does exactly that on my uni's platform.
The problem is that my uni uses multiple platforms for different tasks which can either be accessed directly or via a platform that connects them all.
I've only been able to succesfully change the colors on the platform that directly shows me my schedule, not on the "general" platform.
After some more research I found the problem. The planner is loaded in an iframe and since both platforms have a different domain this seems to be a bigger problem then I thought.
I read a lot of confusing information on how to work with these cross-domain iframes which I
couldn't really understand or am just unable to execute.
As far as I know I should be able to simply inject my script directly in the iframe and get the wanted result. But I haven't been able to do so. I didn't find any helpful information on how to do that with an WebExtension. I would really appreciate if someone could help me figure this out.
Maybe my idea is completly wrong and I need to try something else like using post message (which I didn't understand how to implement either) or something completly different. So anyways, I am looking forward to your replies.
As far as I know I should be able to simply inject my script directly
in the iframe and get the wanted result. But I haven't been able to do
so.
iframe is just like a web page and you can inject scripts into it like any web page.
There are the following considerations:
Extension must have to correct Permission for iframe (which maybe
from a different domain)
Setting all_frames: true (default is false) in
content_scripts
If you are injecting script by other method than manifest.json, let me know and I explain that too.
Solution
Thanks to erosman's comment I looked at my manifest.json again and played around a bit to finally get my script to work the way I wanted. My problem was actually in wrong URL-patterns I provided. For anyone having a similar problem like me I will provide what would've saved my past me a lot of time.
Like erosman says:
iframe is just like a web page and you can inject scripts into it like any web page.
Since I don't care about accessing the iframe's content from the parent document this means I can indeed just inject my script into the iframe directly and let it work there. The result will be visible on the webpage containing the iframe. In terms of Firefox WebExtensions this simply means setting the right parameters in your manifest.json. In content_scripts set "all_frames": true to allow your script to get injected into frames. Now you have to provide the URL of the webpage displaying the iframe aswell as the iframe's URL. Your content_scripts should look like:
"content_scripts": [
{
"matches": ["*://*.webpage.org/*", "*://*.iframe.com/*"],
"all_frames": true,
"js": ["script.js"]
}
]
I'm so sorry, but it is not posible to modify one website on an iframe if this iframe contains a website from other domain.
Maybe, you founded some examples with java script, but if you see this examples in deep you'll find that they works because the domain is always the same...
The different origin forbiden this actions.
Related
Is there a way to detect these website errors in iframes? I am working on a app that has a third party website that has to be embedded into an iframe (trust me I'm not happy about it.) and we have to be able to hide the iframe if these errors occur.
What is the most graceful way to handle this? I have tried a .error, but have had no success. Help would be appreciated so I can keep my brain intact and not have it explode everywhere.
No, it's not.
If iframe is coming from diferent source and doesn't allow access( X-Frame-Options ), you can't do anything about it.
read about it here same origin policy.
There are few things, however, you can do:
If those are singular clicks (people don't navigate further) you can just make request and check content and then actually open iframe.
You can add in app browser like Linkedin for example. Take a look at cordova in app that is really specific solution, different for each platform, but it removes need of iframe.
My website is loading JS to links similar to this one:
https://api.mixpanel.com/engage?data=eyIkdG9rZW4iOiI2NTQwMDNjNmRkZDAzZTg4NzY0MTM4ZTYwMDQ1M2E2NyIsIiRkaXN0aW5jdF9pZCI6InBpZmdzaXVhcmhsbHFjOXRncGw1OTlqdXJmIiwiJHNCI6eyJ0eXBlIjoiZnJlZSIsImlzTW96YmFyT24iOmZhbHNlLCJpc0RvY2tlZE9uQm90dG9tIjpmYWxzZSwiYnJvd3NlciI6ImNocm9tZSIsIm9zIjoid2luZG93cyIsInBhZ2VPbmJvYXJkaW5nU3RlcCI6InBhZ2UtaG90c3BvdHMiLCJzZXJwT25ib2FyZGluZ1N0ZXAiOiJzZXJwLWhvdHNwb3RzIn19&ip=0&verbose=0
I cannot find where it is linked from. I saw the site mixpanel.com and looks like they offer a web analytics service or something similar, but I have not any with them. Have I being hacked? What can I do to find witch file is doing the request?
I am almost sure the request is not being made directly for my website; maybe is made by some plugin? How can I be sure? Should I remove it? How?
Mixpanel is a tracking and analytics provider. If your website is hosted on your very own server, controlled by only you, then things to try are:
1) Disable all your browser's extensions. Turn them all off, confirm that it's either still happening of has been resolved. If it's no longer happening, turn them on one by one.
2) Different internet connection. Some poor WiFi hotspots may inject tracking code.
3) Try a different browser like Firefox, Chrome, Safari....
If your website is hosted by someone like Wix, SquareSpace, Weebly, etc then this tracking is very likely injected at their level and you will probably not be able to turn this off, but you should be able to get access to the insights in your control panel.
I hope this is the right place to ask this question - I did have a look at the rest of the sites in the network but this looked like the most appropriate place.
We are having issues serving third party adverts on our websites. For various reasons our ad setup is a bit complicated - we serve third party javascript tags (AppNexus) through our own ad server (OpenX) through iframes. Currently, the third party javascript tags are not showing correctly, although they have worked just fine in the past.
Debugging this in Safari I have discovered a few things which seem to me to be a bit unusual, and I'm struggling to work out what's going on. Using the web inspector to check the third party's javascript, it appears in the web inspector as a blank file. Additionally, if I check the network tab, the headers are shown and look fine, but there is no 'content' tab with which to check the returned content. The network tab shows the request for the file as complete, and with suitable status codes (200/302):
http://cl.ly/401C1D3Y3u2G2k2k3s0x
However, if I load the file directly in the web browser, it loads fine:
http://ib.adnxs.com/ttj?id=694021&cb=[CACHEBUSTER]&pubclick=[INSERT_CLICK_TAG]
FWIW, the javascript file uses document.write to spit out either an image or another iframe. It's also worth mentioning that there are no related errors in the console - there is one relating to Google Ads, but the problem persists if I load the Ad server's iframe directly without the rest of the site.
Has anyone seen this behaviour before, where a file loads just fine directly, but is (blank / not retrieved / not parsed / whatever's going on) when called as part of another page? If so, would you be able to help me fix this?
Thanks in advance for any help you can give me - I hope this makes some sense and will be happy to provide any further information that might help me get to the bottom of this!
Ollie
I'm guessing that the third party site is filtering output from their servers based on the HTTP referer being sent in the request (a technique employed by many web hosts to thwart hot-linking content). Try putting the link to the javascript file in a clickable link on a web page on your server and click it and then see if it loads or if you get a blank page. You could also try loading a browser extension which lets you forge the HTTP Referer (such as RefControl for Firefox) and then change your refer to be your site instead of the third party's and try pasting in the URL to the browser and see if it loads.
This isn't your fault if it's what turns out to be the actual problem. It's up to the third party to configure their web host to allow for this.
I have read and re-read this page, as well as run the samples:
http://code.google.com/chrome/extensions/background_pages.html
But I don't seem to grasp how to do the background communication between the background.html, popup.html, and content.js. I want to send messages to trigger functions, get responses, and process those responses. The map sample was sort of close to helping me, but I just need something super simple and not need all that map stuff. (Note, I know jQuery as well as Javascript, so feel free to mix in a bit of jQuery if you want.)
All extension pages (background page, popup, infobar, page action all run inside the same extension. Think of it as a webpage with one domain. And that domain is your extension ID. Each one of those extension pages is like a regular page (similar when you develop a website).
All extension pages (mentioned above) can communicate with each other easily, you have multiple ways doing so:
chrome.extension.getBackgroundPage()
You do it directly! I use this approach whenever I can. Its cleaner in my opinion.
var bkg = chrome.extension.getBackgroundPage();`
bkg.ping();`
chrome.extension.onRequest.addListener and chrome.extension.sendRequest
As shown below, you can use extension messaging to pass information as well. I use this approach when I want it to be event oriented. I rarely use this within extension pages.
popup.html
chrome.extension.sendRequest({method: 'ping'}, function(response) {
// response.result
});
background_page.html
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
if (request.method == 'ping') {
sendResponse({result: 'pong'});
}
});
Now there is a difference between "Extension Pages" and "Content Scripts". Please read that document carefully to understand it. A content script is not a extension page, you cannot do what extension pages do. You cannot directly communicate to any of those pages mentioned above. Content Scripts are JavaScript files that run in the context of web pages, not extension pages. Thats an important distinction to recognize.
So in order to communicate between your extension pages and content script, you need to use Messaging. That page has a lot of information, I highly recommend you to read it. It is very similar to how we used messaging (step 2 above), but the only different is how you send a request. You would need to use chrome.tabs.sendRequest, because you need to send a single request to the content script from your extension page (background, popup, page, etc). You would need to know the ID of your tab in order to do that. Please look at the Tab API for more info.
If your extension communicates with your content script very often, you can use Long Lived connections, which is explained pretty well in the Messaging section I liked above.
I have answered many questions and other people too regarding similar questions. Since your experienced in JavaScript, I highly recommend you to read the documentation, it has everything you need. Read the API, and I hope I you now understand the difference between Content Script and Extension Pages, and the communication between them is through Extension Messaging.
Let's say I'm a js script living inside a html page. I need to know if I am inside a specific IFrame.
Something like
if (top.location.href === 'http://specificurl/') ...
However I need this working from any domain.
I have also tried adding a value to the window element in the iframe owner and checking on the child with the same result (permission error).
Any suggestions?
Thanks
Guido
Can't be done unless you have control over both pages/sites/domains (that is, the frame's page AND the main page).
If you do have control, check out the easyXDM framework or google for "cross domain communication iframe"
And the reason this can't be done is simple security. Imagine if you visited a site that contained a frame which appeared to take up the whole page, and then visited your online banking site -> easy to see how malicious javascript could get all sorts of details, which is why it can only be done if the two sites/pages/domains are explicitly coded to work together
I figured out how I can do it in MY scenario. Fortunately my client script (living in frame) gets loaded dynamically by one of my scripts. I simply added a #anchor to the url and that was accessible inside the frame.
Very straight forward really.
Thanks for the help Graza, that product looks very interesting fortunately I don't need it.
Thanks
Guido