Please Explain Background Communication with Google Chrome Extensions - javascript

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.

Related

Communication between web page and service_worker (both ways)

I am working on a Chrome Extension which is structured like this :
the service_worker : fetches a list of compatible websites every day and if it is compatible, I will inject a 'widget' in the website
the widget : is a React App injected inside the page (a 300x300px position:absolute div) that can help the user and that is linked to the user account from my website, for example he can save a product from Amazon and see it later in his account in my website.
My problem is the communication between these two parts.
An example :
I want to check if the user has currently a session opened in my website, if yes, in the React App (the widget) I will render him some tools and his items, and if not I will render him a link to login in my website.
Tried solutions:
Call my website API directly from the widget : but I dont want to make the verification from the widget because it is a part of the webpage and I am afraid of a cookie/token hijacking (tell me if i'm wrong).
Using CustomEvents to get a response : I found this useful post, the problem is that as said in the 5th point I cant really wait for a response from the service_worker and store it.
Using CustomEvents with callbacks : I also can't send a callback function as said here.
Using sendMessage from Chrome API : To use this between webpage and the service_worker you need to specify in the manifest.json the pattern of every website that needs to use it, but the list can change every day. Also the domain cannot be *, and we cannot use <all_urls>
So, my communication is only working from the web page to the extension but not in the opposite way.
Can you advise me a way of making this work ?
Thanks !

My website is loading an external JS that I don't know. What can I do?

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.

Chrome.extension.getURL and AJAX security issues in Chrome extensions

I'm working on an extension that injects script in a page.
The extension is basically a content script that injects another script into the DOM. ( Why not just a content script? )
(There aren't any issues with my code, it works fine. The main purpose here is to learn about security issues in web development only)
The injected script is a source file in my extension and I get it with JQuery.get, using the address from chrome.extension.getURL('myscript.js').
Are there any security issues I should be aware of?
The page is not https, can this get return something different from my script?
I also insert HTML content using the same method. The HTML file is from my extension, just like the scritp. Is there any possibility of the responsetext be corrupted by a man in the middle??
What are the common practices to avoid such security issues if they exist?
Differently, if I create a script (document.createElement('script')) and set its source to my file. Would it be possible for someone to interfere when I inject this cript into the dom? (document.documentElement.appendChild(myScipt))
Also, what are the security issues involving this approach? Injecting a script that changes the XMLHttpRequest methods open and send in order to capture ajax calls, add listeners and send them with the same exact original arguments.
So, namely, say I have these:
var myScript = document.createElement('script');
myScript.src = chrome.extension.getURL('myscript.js');
var page = chrome.extension.getURL('mypage.html');
In such context, can a $.get('mypage.html') return anything different from my page due to a man in the middle? (In other words, could I unknowingly inject a malicious page?)
Could a document.documentElement.append(myScript) inject a different script? Could a supposed man in the middle get between the .src and change the actual script?
Since the script is meant to change the XMLHttpRequest prototype as described in the linked approach, could I ever send with arguments different from those passed by the original call?
Thank you!
First of all, Chrome is both the client and the server when you fetch a file from an extension, so you don't need https, it's worthless in this scenario. There is no man in the middle here.
One can think of another extension intercepting the ajax, but to do so that extension should already have proper permissions granted by the user, so it won't be an unauthorized interception. At least it won't be any less secure than any https ajax.
And, as you say, another man in the middle attack consists in redefining XMLHttpRequest, which you can do with an extension (with proper user authorization) or any other way to inject a script in the page (specially if the page is not a secure one).
I wonder if you can inject and run a script before the page loads, or at least before any other script execute, with the only purpose to "secure" the original XMLHttpRequest object (with something like mySecureAjax = XMLHttpRequest;)
You can execute before any script on the page, but you can't guarantee to execute before another extension's injection.

How do you keep content from your previous web page after clicking a link?

I'm sorry if this is a newbie question but I don't really know what to search for either. How do you keep content from a previous page when navigating through a web site? For example, the right side Activity/Chat bar on facebook. It doesn't appear to refresh when going to different profiles; it's not an iframe and doesn't appear to be ajax (I could be wrong).
Thanks,
I believe what you're seeing in Facebook is not actual "page loads", but clever use of AJAX or AHAH.
So ... imagine you've got a web page. It contains links. Each of those links has a "hook" -- a chunk of JavaScript that gets executed when the link gets clicked.
If your browser doesn't support JavaScript, the link works as it normally would on an old-fashioned page, and loads another page.
But if JavaScript is turned on, then instead of navigating to an HREF, the code run by the hook causes a request to be placed to a different URL that spits out just the HTML that should be used to replace a DIV that's already showing somewhere on the page.
There's still a real link in the HTML just in case JS doesn't work, so the HTML you're seeing looks as it should. Try disabling JavaScript in your browser and see how Facebook works.
Live updates like this are all over the place in Web 2.0 applications, from Facebook to Google Docs to Workflowy to Basecamp, etc. The "better" tools provide the underlying HTML links where possible so that users without JavaScript can still get full use of the applications. (This is called Progressive Enhancement or Graceful degradation, depending on your perspective.) Of course, nobody would expect Google Docs to work without JavaScript.
In the case of a chat like Facebook, you must save the entire conversation on the server side (for example in a database). Then, when the user changes the page, you can restore the state of the conversation on the server side (with PHP) or by querying your server like you do for the chat (Javascript + AJAX).
This isn't done in Javascript. It needs to be done using your back-end scripting language.
In PHP, for example, you use Sessions. The variables set by server-side scripts can be maintained on the server and tied together (between multiple requests/hits) using a cookie.
One really helpful trick is to run HTTPFox in Firefox so you can actually monitor what's happening as you browse from one page to the next. You can check out the POST/Cookies/Response tabs and watch for which web methods are being called by the AJAX-like behaviors on the page. In doing this you can generally deduce how data is flowing to and from the pages, even though you don't have access to the server side code per se.
As for the answer to your specific question, there are too many approaches to list (cookies, server side persistence such as session or database writes, a simple form POST, VIEWSTATE in .net, etc..)
You can open your last closed web-page by pressing ctrl+shift+T . Now you can save content as you like. Example: if i closed a web-page related by document sharing and now i am on travel web page. Then i press ctrl+shift+T. Now automatic my last web-page will open. This function works on Mozilla, e explorer, opera and more. Hope this answer is helpful to you.

How to offer a webapp to other sites. (div with javascript, iframe or..?)

I am quite new to web application development and I need to know how would I make other sites use it.
My webapp basically gets a username and returns some data from my DB. This should be visible from other websites.
My options are:
iframe. The websites owners embed an iframe and they pass the userid in the querystring. I render a webpage with the data and is shown inside the iframe.
pros: easy to do, working already.
cons: the websites wont know the data returned, and they may like to know it.
javascript & div. They paste a div and some javascript code in their websites and the div content is updated with the data retrieved by the small javascript.
pros: the webside would be able to get the data.
cons: I could mess up with their website and I don't know wow would I run the javascript code appart from being triggered by a document ready, but I wouldn't like to add jquery libraries to their sites.
There must be better ways to integrate web applications than what I'm thinking. Could someone give me some advice?
Thanks
Iframes cannot communicate with pages that are on a different domain. If you want to inject content into someone else's page and still be able to interact with that page you need to include (or append) a JavaScript tag (that points to your code) to the hosting page, then use JavaScript to write your content into the hosting page.
Context Framework contains embedded mode support, where page components can be injected to other pages via Javascript. It does depend on jQuery but it can always be used in noConflict-mode. At current release the embedded pages must be on same domain so that same-origin-policy is not violated.
In the next release, embedded mode can be extended to use JSONP which enables embedding pages everywhere.
If what you really want is to expose the data, but not the visual content, then I'd consider exposing your data via JSONP. There are caveats to this approach, but it could work for you. There was an answer here a couple of days ago about using a Web Service, but this won't work directly from the client because of the browser's Same Origin policy. It's a shame that the poster of that answer deleted it rather than leave it here as he inadvertently highlighted some of the misconceptions about how browsers access remote content.

Categories