Get Window Handle of Chrome Tab from Within Extension? - google-chrome

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.

Related

How can I use Chrome Devtools to figure out what adds a certain element to the page?

This question is similar to How can I inspect disappearing element in a browser?, except it's the reverse.
I'm trying to debug which JS adds a bunch of rogue <iframe> aswift_1, aswift_2, etc. elements to the page, like so:
I'd like to use Chrome Devtools (or Firefox) to pause execution as soon as such an element is added and inspect the call stack, hopefully finding the culprit.
Other ideas are welcome as well.
You can use this simple chrome extension.
It will trigger the debugger AFTER element with id matching aswift_ is added(of course you need to open chrome dev tools first).
https://gist.github.com/maciejmackowiak/8043c8630004644144711f730ef45f1b
To activate this extension download -> unpack, open manifest.json and in line 8 change the example.com to the domain you want to inspect.
Then go to chrome://extensions/
Click on Developer mode and Load unpacked
When you will go to the page maching the domain this should show up after element with id starting with aswift_ is added:
Paused in debugger
Now you can use "step over next function call(F10)" (you may need to hit it few times before it will loop thru all mutations and "go" to another function)
Quickest way in chrome would be to take a look at either the network tab (for response) or do a global search using Ctrl+Shift+F on Windows and look for certain tags used in those elements which are being added to the DOM

Chrome external application launch links

In Google Chrome, I can type the following in a new browser:
pycharm://open?file=file_name
and press Enter. The result is that PyCharm IDE will launch and open the specified file. I have also come across similar links that launch other applications.
I tried to look for information about such links but did not reach any conclusions. Specifically, I would like to know:
what is the name of such a link?
who defines those links? Since I cannot find any documentation about those links on PyCharm's side, I am led to think that those links are some form of standard command that work for every external application?
how do those links work under the hood? Is it the browser spawning a new subprocess or does the browser somehow communicate the command to the OS which takes it from there?
I can also do the above programmatically:
window.open('pycharm://open?file=file_name', '_top');
How can I ensure that the focus switches to the target application? (Right now the application does indeed start, but the focus stays on Chrome.)

Is there a browser tab identifier that I can set or use locally?

(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.

Duplicate a tab in Chrome without Reloading the Page?

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.

How can I display the same DOM across several tabs in a Chrome Extension?

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.