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

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.

Related

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.

Remove all cookies for a tab

I'm trying to remove all data that belongs to a specific given tab in Chrome via my chrome extenstion.
For an example I would like to delete all the data (cookies, local storage, cache) set by a specific tab as seen in the below screenshot.
So far I have found how to delete all the cookies but is there a way to clear all data stored by a tab via Chrome API?
When it comes to specifying a tab, I looked around the community and found this answer that might be useful to you. It states:
...the navigation API. The Chrome history is not related to a particular tab. If you want to use or delete from the history a element of the tab navigation you can use the history search function with the navigation information.
Here's the link to the Navigation API mentioned above.
I think you've already seen this (since you mentioned you can already remove the cookies), but I'm gonna go ahead and mention it, it might also be helpful. The chrome.browsingData API has functions that when called remove specific types of browsing data, though it's not only specific to a single tab.

Create a chrome extension which modifies a web page?

every time I go to a particular web page I hit F12 delete a node and uncheck a few absolute position boxes on two others. I would like to know how to do this with a chrome extension.
I have not made a chrome extension before so I thorough guide to making one would also be appreciated
I recommend you to read this guide first as Google suggests.
http://developer.chrome.com/extensions/getstarted.html
Also, I think in order to implement what you want to do, you'll need to use page action.
So, take a look at this page about page action.
http://developer.chrome.com/extensions/pageAction.html

Disable automatic saving of CSS changes in Chrome Developer Tools

I am referring to the save feature in the 'Sources' panel of the Chrome Dev Tools. I have been using this feature for a long time in the stable release of Chrome, but after installing the build from the developer channel, I notice that once I have saved the file the first time, Chrome no longer prompts me to save and just does it automatically after every change I make.
This is quite a pain, as I make a lot of changes experimentally in the dev tools whilst debugging which I don't wish to save, I would like Chrome to save the file only when I explicitly tell it to.
Does anyone know if there is a way to disable this automatic CSS saving?
(Apologies for no screenshot, my PrtScn key seemingly won't operate when I am in a context menu)
Update:
I have reverted to the current stable build, 27.0.1453.93, and the behaviour appears to be the same.
I am having the same problem, I can only offer workarounds: use another browser, such as Firefox, for doing tests!
Alternatively you could launch another instance of Chrome with a different profile. You could also launch a Chrome "Incognito Window", it seems to not apply the filesystem mappings.
I normally use an Incognito Window or inline styles to test changes.
Alas, I learned after reading a post by Google's dev relations person
that the automatic save cannot be disabled and it seems that's the way
it's going to stay.
html5rocks.com/en/tutorials/developertools/revolutions2013
– tommypyatt Feb 21 '14 at 14:22
While not solving the issue directly, it is a decent work around:
In Chrome, in the css inspector you can click and hold the + button, then choose to add your changes to the inspector-stylesheet. It's not as convenient as directly editing in your css-selectors, but what you write will all be in inspector-stylesheet.css, so not saved to your project. Then when you are happy with your changes, you can manually put them in to your css.

Get Window Handle of Chrome Tab from Within Extension?

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.