(I am developing a Node.js/Express web application.)
Is there a way to identify a tab and have its identifier saved locally in the browser so that the identifier is persistent across different pages of the same web site?
Example, my web application is opened by the user in two tabs of the same browser. I would like to know that they are opened in different tabs. Even if the user in tab A presses F5 to refresh the page, I (in the client Javascript) would like to know that the page is still in tab A.
Is there a property of window or another object in the DOM that identifies the browser tab?
Nothing simple. However, there are two interesting technologies that may help you solve your problem.
sessionStorage is the closest to what you described. It gives each tab a different Storage object that you can store random IDs in. It doesn't quite work though, because when you open a link in a new tab the second tab gets a copy of the parent page's sessionStorage object, including whatever you stored in the parent page's sessionStorage.
The storage event is probably what you want to use. You can have your tabs communicate directly with each other to coordinate unique IDs or detect multiple tabs being open. See this question which is focused on how to communicate across tabs in javascript.
Some combination of these two technologies will probably help you solve whatever you are trying to accomplish.
Related
I'm building a Google Chrome extension at the moment and I have a question about when to use an event page.
A quick look at the Chrome extension docs shows that Google really want its developers to use event pages, if possible.
My extension currently uses a background page, but I was wondering if I should switch to an event page?
This is what my extension does:
When matched with a particular website, it injects a script that adds buttons for the user to access extra functionality.
Most of this extra functionality consists of doing fairly computationally expensive operations on user-entered data - this is all done in the background page (it is all it does).
When a user wants to run these operations on their data they press a button and this passes a message, from the injected script to the background page, which then passes a message back containing the results of its operations.
Essentially, all the background page is doing is waiting for message passing from an injected script in one particular website and then running some operations. Since it doesn't need to be active all the time, this suggests that I should be using an event page.
Can anyone confirm if this would be a good idea for me? Or are there reasons why I should stick to a background page?
Allowing the background page to suspend (chrome.runtime.onSusend) is great, because it will free up system resources. The page will automatically be launched when a matching event happens (chrome.tab.onUpdated etc). I can't think of any compelling reason to use a persistent background page. You can always store any long term state in chrome.storage.local or indexedDb, etc.
Is there any way to completely duplicate the state of a current tab in Google Chrome? I want an exact copy of the current state of the page without having to reload the page in another tab.
An example use case:
While browsing a "slideshow" on a news website, I want to preserve the current slide that I'm on, but create a duplicate so that I can continue viewing the next slide. If I simply Right-Click and "Duplicate" the tab, the new page will completely Reload, reprocessing all of the Javascript and running the pre-slideshow advertisement again.
In short "NO" you can't.
I am not expert on this
but a similar behavior can be achieved in some ways i know :
Dump the whole DOM
Never tried this though. You can convert the DOM to a string, pass it to the new window and then parse it as a document. This will let you lose your DOM events and State manipulation javascript. (But that's good for your case)
var dtab = window.open('about:blank', 'duplicate_a_tab');
dtab.document.open();
dtab.document.write("... yout html string ..");
dtab.document.close();
Develop an extension
Let the users continue on the current tab with the current state, your extension should be able to capture the screenshot of that area and open that screenshot in new tab. There are plenty of screenshot taking extensions are available in the market.
If that website is your own
You can develop your services that uses state locally like progressive web apps. Give a link separately to 'duplicate' which will eventually open the same URL in different tab with the same local state and with the flag do-not-sync.
This will not work when the user uses browser inbuilt duplicate
feature.
I've written a Chrome Extension (w/ NPAPI as well) that allows my application and Chrome to communicate with each other. That is all mostly working fine.
What I'm trying to do now is be able to tie the HWND of a Chrome window to a particular Window ID & Tab ID.
When I'm inside of Chrome (via the plugin) I have the Tab ID and Window ID and I can do most operations based on that.
When I'm outside of Chrome (via my application) I can see the window structure and get the HWND of the various tabs.
Is there any way that I can tie them together reliably such that my application could tell Chrome to get me information about/from a specific tab?
If you have Spy++ you'll see that site titles stay consistent with tab window titles. You should definitely use that.
To eliminate title collisions simply call chrome.tabs.query() and chrome.tabs.update() from extension to save, change, and restore a tab's title. Then use GetCurrentProcess() and EnumWindows()/WindowEnumProc() to get child windows hierarchy and match your custom title. You will have to pass it to an EnumWindowsProc callback function.
I'd like a hyperlink on a page to open its site's landing page, in a new tab if it's not already open, or, if it is already open to have the browser switch to that tab.
My idea for this was to use the target attribute but the problem is that the tab for the landing page doesn't have a name that I can refer to.
So my question is, can a tab be named by the page loaded in it so that it can be referred to by the target attribute?
In general, no.
However, if you open a child "window" with JavaScript, you can retain a handle to that window and modify things that way.
In general, browsers control the behavior of how a link opens. Some default to open in the same viewport, others default to a new tab, and still others default to a new window entirely.
The best thing to do, however, is to not try to control this and instead allow the browser (and more importantly, the user) to decide how the clicked link should be opened. This allows your power users to control how they use your site, and at the same time keeps the behavior of the browser consistent for your users, which is a critical component in keeping your users happy.
I'm looking to build a chrome extension that allows the user to have an independent subwindow that is the same in each tab (for example you are taking notes and the notes are synchronized among each tab). Also, clicking a link should not destroy this subwindow.
One solution is to inject an iframe in each tab, and try to synchronize this data serverside and send back to each client tab, as it is updated.
This seems very tedious, plus the iframe would be provided by a third party, and I want to make it the easiest for them.
Is there a way I can have a shared dom piece and display it in its current state across several tabs?
There's an API (still experimental as of Chrome 17) that does more or less exactly what you want. If you visit about:flags, and enable "Panels" (they're enabled by default in Dev and on Canary (and on ChromeOS)), you'll be able to use chrome.windows.create with a type of panel to create a floating pane that exists independently from the browser window. That would likely meet your need.
Take a look at the Google Talk extension for an example of how it might work.