circumvent the same origin policy using a browser plugin

Question

I recently read that the "same origin policy" doesn't apply for browser plugins.

I want to create a project where users can use web services as Gmail, Facebook, Twitter etc. via iframes.

Simply using an iframe is impossible due to the same origin policy headers on those sites but I'm trying to figure out if there's a way to do it if a browser plugin of mine will be installed.

If anyone can contribute any ideas I'll be thankful.

Answer 1

webview (https://developer.chrome.com/apps/tags/webview) should be able to achieve everything you would like to do.

This includes methods like "insertCSS" and "executeScript" and a lot more. Only required permission is "webview"

Answer 2

While you can't do it with iFrames (to my knowledge), the documentation for chrome extensions would allow you to fetch the html from any domain and display it as long as the domain is in your permissions.

i.e. in your manifest.json in the "permissions" array, add entries as strings ("http://www.facebook.com").

You should be able to programatically render a page from there with whatever you like in it.

Answer 3

You can avoid browser cross-origin restrictions and still write HTML5 javascript if you go for a Desktop App written in Node-Webkit:

Basically you create a single web page application and start it running on the desktop using a node.js commandline. It can then read and manipulate data from any url you like.

Here is a tutorial on how to start: http://code.tutsplus.com/tutorials/introduction-to-html5-desktop-apps-with-node-webkit--net-36296

Answer 4

Your question is pretty broad, but let's assume that you have 3 iframes on one page, twitter facebook and gmail, and you want, for arguments sake, a new tweet to pop an alert box in gmail and facebook.

I think you have two (possibly three) options. You could use window.postMessage to post a message to the parent window, and then have the extension handle the message content in the parent window (e.g. parent.postMessage(message, "*");. Bear in mind that you can post objects).

Or, your other solution, if I'm correct, is to make use of the chrome extension's background page functionality. (https://developer.chrome.com/extensions/background_pages#details).

I think this snippet seems most relevant to what you want to do (Taken from the above link):

You can communicate between your various pages using direct script calls, similar to how frames can communicate. The extension.getViews method returns a list of window objects for every active page belonging to your extension, and the extension.getBackgroundPage method returns the background page.

There is an example on that page underneath the section I have linked to which I won't copy into here as it's quite large.

Actually, having read through that, it's quite ambiguous as to whether it means pages that the extension is running on, or pages that are contained within the extension itself.

There is also the chrome "Message Passing" function (https://developer.chrome.com/extensions/messaging) which begins with:

Since content scripts run in the context of a web page and not the extension, they often need some way of communicating with the rest of the extension

Bear in mind that if you want the extension to run in any frame other than the parent window, you will need to specify "all_frames": true in your manifest.json.