We Keep Coding

Check if a page is already opened

Is there a reliable way to know if an other instance of the same page is already opened in the browser?
I’ve tried setting up a variable in local storage at load and unload but mobile browsers do not always send the unload event..

The context of JavaScript code is per opened page (called window). Therefore, there is no reliable way to track open pages unless you open a WebSocket connection to the server and check the number of open pages by associating a unique identifier to each of them and prevent opening multiple pages. If you want to take this approach, search for a WebSocket implementation of your server-side application.

Javascript. Check if there is no tab in focus

Now i'm using visibilitychange event to see which browser tab is active. I use active tab to watch some events on server side, and I don't want to run this watcher in all open tabs.
But now I want to run this watcher even if no tab is in focus, but still, in just one tab.
How to check if no tab is in focus and ensure that some script is running in only one background tab?

You have to solve the issue of communicating between tabs. There are several options:
Cookies
Local storage
Server side syncing (WebSockets, Ajax pooling, etc)
Each tab will have to update its state in the shared data centre (one of the above).
Once that is done, you should use a master selecting algorithm to decide which one of the tab should communicate with the server. In your case, this could be as simple as the first opened tab.
There are some quirks when using local storage such as two different sub-domains can't access the same local storage. Cookies are another way around where you can define parent domain as well. I would say the third option is the best in terms of debugging and adding more complex selection logic.

How to communicate between popup page and background page and store the info that I already get?

I'm making a google chrome extension to give the specific information (via ajax with server side) for different url (tab).
I use chrome.tabs.onUpdated and chrome.tabs.onActivated event listener in background.js to detect whether the url of the active tab is changed, and then send an ajax request to change the icon using chrome.browserAction.setIcon. (Yes, I would like to use browser action instead of page action because I wanna show some overall information of the extension in popup page, like Adblock Plus does)
However, what I can't figure out is:
How could I communicate between the background and the popup page? I understand that I should use chrome.tabs.sendMessage() and chrome.runtime.onMessage to communicate between background and the content scripts, but how could I communicate between the former and the popup script? I can't see that I need content scripts to modify the content of the page.
How to "store" the information I already get, in the popup page of each page so that I don't need to send few more requests, when the user change the activated tab but the url is not changed?
Any idea? Thanks in advance!

For question #1, since the background page and popup page both live in extension process, they can communicate with each other directly like setting variables or calling functions. You could check the following two posts:
How to communicate between popup.js and background.js in chrome extension?
How to interact with background.js from the popup?
As for question #2,
After learning how to communicate between popup page and background page, you can save the info retrieved from popup page in background page, and remember to set persistent: true in manifest.json, it will ensure the background page lives through the whole extension life.
You can also use chrome.storage or localStorage api to store the data. You can save the data in one page and feel free to access it in another page (So this will be also a way to communicate between two pages to some degree)

How can I use postMessage to share data between top level windows?

Using Web Messaging (postMessage), it's easy to send messages between windows including iframes and popup windows opened through Javascript. However, is it possible for two windows opened individually by the user to find each other and communicate?
As an example, if the user opens www.example.com/app.html in the browser, then the same page in another tab/windows of the same browser, I want the second window to know that it should act as a "child" of the first one and exchange a stream of events via postMessage. How do I detect the presence of another open window and how to I get a handle to it that I can use with postMessage?

i don't know if it's possible with postMessage.
but, it should be possible with localStorage or sessionStorage (which lives in the session scope).
using this approach you can write a value in one window/tab, and read it in the other window/tab, of course assuming that it's all on the same domain.
see more here: http://php-html.net/tutorials/html5-local-storage-guide/
hope that helps.

Access elements on an external page

I have an html page that is being accessed via a link that places an external page in the url - e.g.
http://www.mydomain.com/mypage?external-page=encodedURL
It is the responsibility of my page to scrape some data from the URL it is handed.
How can I access the passed-in page using javascript/jquery? I need to be able to pull out the content for certain classes and ids.
Is this a violation of same origin policy? If so, is there some other way to process an external page like this? Seems strange to me that I can hit the web page in a browser or a terminal command and receive the content, but not in a js file.

You can use a browser extension to scrape the external page, then send the data to your site, OR display it within the page, so that it can then be accessed by your page's javascript via the DOM.
You can use a proxy on your domain which fetches the external page and hands it to your javascript whose origin is on your domain, too.
You can use an API for the external page which is accessible.
You can ask,command, change the code of the external page (if you have access to it) to serve pages with Access-Control-Allow-Origin=*
I think this is all you can do.
EDIT: The "seems strange" is until you realize the intended difference between a user, and a process. The user is not thought to be malicious, but a process could be. A process could for example, grab data from a user's logged in gmail session if it had access to the external page, and transmit that data to a server. Since the user on the terminal is probably (but not always !) the one who logged in to that session, the user is not thought to be malicious. But a script whose origin is some website that user navigates to, should not be able to act with the same permissions as that user. Since that script is an agent as well, and can make actions, but it is not created or directed by the user. That's the strongest reason for the isolation of origin's and the same origin policy.
Example
Execution Context of Bookmarklets, and IFrames
If you are injecting JS into every page via a bookmarklet, then that injected code will behave as if it has the same origin as the rest of the page, or at least the "top frame" of that page. It will execute in the same context as the top frame. If there are nested iframes in the page then you will get an "unsafe attempt to access page x from " error if your bookmarklet tries to inject into there. This is because the bookmarklet has it's origin in the top page, and the top page can never access nested iframes on different domains anyway.
So if some part of the site you wish to scrape is in an iframe below the top frame, your bookmarklet will fail to get it.
Transmitting Data using a bookmarklet
If you want to take a url on one page, on your domain, then grab data from that url, on another domain, then display that data back on the same page, you need a way to get the data across. You could use a bookmarklet but the flow would still involve some "user help". It would go something like this:
Load your domain's page, D. User puts a url into an input box. Clicks submit.
Javascript on D opens a new tab/window pointing to the user provided url.
User clicks your scraping bookmarklet on that external page, which collects the desired data, X.
Desired data, X, is sent via Ajax to a "server", S, with session identifier I.
Page D, polls the server S, until it gets notified that some data with session identifier I has been grabbed, then it gets that data and displays it on D.
There is the need for a server. You can't use local storage to transmit the information since this is specific to a domain. There is an alterative that does not require a server. It requires making a browser extension.
Transmitting data using a browser extension The "background page" of the extension is basically the same as a local server for all the browser tabs, it permits transmitting of information across tabs targeted to different domains. The "clients" in this set up are the "content scripts", which are loaded to every page (just like a bookmarklet, except without the requirement for a user to actually click the bookmarklet to load it. It happens automatically). The flow would go like this:
Page D again. User inputs url in input box. Clicks submit -> which triggers some code in the extension.
The extension background page instructs a tab to open and targets it to the url.
A content script loads automatically into that tab, checks with the background what data it should get. It gets that data, and sends it, via a message (a json string) to the background page.
The background page pushes that notification and the data on to the original contents script on page D. Which displays the information.
Optionally, the background page also transmits the information to your server for saving into that user's datastore.
The language I use for the browser extension "background page" and "content script" is pretty much focussed on Google Chrome. The same concepts are available in Safari, Firefox as well. If you want to support IE you're going to have to work out something else. IE10 does not plan to even support extensions.

If the external page and your page is on the same domain, then you should be able to access that external page using JavaScript. Otherwise, the JavaScript won't be allowed to access the external site, browsers will prevent Cross-site scripting.