Can I create a Chrome extension or a Firefox plugin that take screen shots of web pages?

Question

I am a web developer/aspiring web designer who looks at a lot of web design examples. While I bookmark them, text links are a pretty bad way for me to keep track of designs I like. I am planning to create my own bookmarking application which would use a Chrome extension/Firefox plugin to add a custom bookmarking button to the browser. When clicked, that button would pull up a dialogue that would allow me to take screen shots of the current web page and then upload them directly to my site, and modify the sql database there to include refrences to the new image files, a website name, website link, and list of tags. Ideally, I would like to create both a Chrome extention and a Firefox plugin to do this, since I jump between both browsers while I'm developing. Also ideally, I would love to be able to crop the screenshots as I take them within the browser window.

Is it possible to create a Chrome extention / Firefox plugin which take screenshots of the current page? Can I specify the part of the page to crop the image I'm saving?

Answer 1

You can use chrome.tabs.captureVisibleTab and HTML5 canvas to achieve that.

Answer 2

There's already a Google Chrome Extension developed by Google that does that: https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknpmg

Since it's open source, you could try to hack it and make it "Save to DB".

Source is here for reference: http://code.google.com/p/chrome-screen-capture/