Create a chrome extension which modifies a web page? - html

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

Related

Google Chrome Extension Top Sites Images

So using the Google Chrome Top Sites api has values for the url and the title, but when you load the default google chrome page it also has an image of those sites, is there any way to get that sort of image for an extension? If not how does google get that image and how can you get an image of the the user's top viewed website?
Since that it isn't possible to get a screenshot of a page without loading it inside a tab, Chrome is simply getting those screenshots while you're browsing your favourite sites. You can tell this easily because sometimes sites and images do not coincide (e.g. sometimes my facebook.com top site has the image of my profile page, but links to the home).
Then, if you want your screenshots of the Top Sites, you'll have to start without screenshots, and create them while the user browses the web by using the chrome.tabs API to check when a tab loads one of the Top Sites (listening to the event onUpdated), and get a screenshot of that tab using captureVisibleTab.
NOTES: make sure that you've requested the permission for "<all_urls>" in your manifest, which is required for captureVisibleTab to work. Additionally, you may find this question and its answer helpful.
It's unfortunately not possible*. Chrome stores those thumbnails internally in URIs not accessible from an extension.
There is an existing feature request: https://code.google.com/p/chromium/issues/detail?id=11854
If you look at the comments, one of the main use cases is to access site thumbnails to replicate the New Tab page.
Do star the feature request above to raise its priority if you want this functionality implemented.
* By that I mean that it's not possilbe to access Chrome's own internal store of thumbnails.
Furthermore, as Marco suggested the way to replicate that would be tab capture, but you can't do it "in the background" for privacy reasons - a user must make an explicit gesture (e.g. click the extension's button, press a shortcut, etc.) to perform capture.
Marco's answer is valid now, captureVisibleTab should be accessible upon events. But yes, as of now Chrome forces you to have very broad permissions and maintaining your own thumbnail store.

Chrome dev tools on all tabs

I'm trying to see a POST request that my browser is making on a certain form.
My problem is that the form is opened in a popup window (js initiated) and when the form is submitted it automatically closes the popup. So when I'm trying to use the developer tools' networking tab I can see the post request but don't have enough time to look into it since the window is closing too fast.
Even if I choose 'preserve log on navigation' it doesn't appear anywhere since the entire window is closing on submit.
Is there a way of opening the developer tools in the context of the entire Chrome application instead of a certain tab?
I don't believe there is. The best two solutions I can think of (that don't actually answer your question but I think achieve your aim) are:
Use another tool like Fiddler - http://fiddler2.com/ It's really good but only available for windows :(
It's a messy workaround but you could just comment out the line that closes the window while you carry out your debugging and then reinstate it once the issue is fixed.

Creating a bottom bar/panel on Google Chrome

I'm trying to create a Google Chrome extension with a bar that appears along the bottom like the Chrome "Developer tools". I dont want to use content scripts, if possible. Does chrome extension provide any way to do this.
You can create a panel IN the developer tools using the devtools API but it sounds like you want something separate from that.
The bad new is, unfortunately, there is no way to do this with out content scripts - Chrome is very strict on what it allows you to do. Why, may I ask, do you not want to use content scripts?

Chrome Extension: Hide and show the browser action icon

Is it possible to show and hide the browser action icon from the options page?
I know how to do it with the page actions using the show and hide methods, but I don't see any similarities in browser actions.
From https://developer.chrome.com/extensions/browserAction:
If you want to create an icon that isn't always visible, use a page action instead of a browser action.
In other words: no, this isn't possible. Browser actions are permanent by design.
Google defined Browser Action as static buttons, and Page Action as dynamic ones.
Google is very careful with Chrome's interface, and don't want people use buttons in a different way they are "supposed" to do.
They do so because they think users have tu put an effort to learn to use Chrome, and Google want to present a consistent, coherent and minimalist user interface.
You don't have much freedom with regard to Chrome user interface.

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.