Integrate Google Chrome screen capture into website/html

Question

Is it possible to integrate the Google Chrome screen capture extension into website/html?

Source code can be found at https://code.google.com/p/chrome-screen-capture/source/browse/

Answer 1

It's not possible to integrate this extension, but I have an alternative way for taking a screenshot of your website. First thing, you have to download html2canvas. Then link it on your page.
Then add the code

HTML:

<div id="main-canvas">

            //content

        <div id="snip-controls">
            <a href="#" id="snip" onClick="snip()">Snip</a>
            <a href="#" id="save-snip" target="_blank" onClick="saveSnip()">Save</a>
        </div>
</div>

JavaScript:

function snip()
{
html2canvas($('#main-canvas'), {
   onrendered: function(canvas) {
     var img = canvas.toDataURL();
     document.getElementById('save-snip').href = img;
  }
});
}

Note: When you click on the snip button, the save button gets a link of a newly created snip, when you click the save snip button, the snip appears as a real image.

Answer 2

Yes you can!

As far as I know the externally_connectable is the only official way to call an extension or send messages (maybe with data) from a web page (using javascript) as mentioned here.

If extension not support being externally_connectable, this requires editing the extension and add predefined values for every single domain you wish to integrate with.

But we can implement a workaround to integrate with any website (and not to define any domains at all)

If you just want to notify the other side (extension) about some thing, you can use the native JS Event dispatching it on the document from one side(web page) and listening to it at document also from the other side(extension) as the document is shared between the extension content script pages and the web page.

You can't use JS CustomEvent to send data as every time you send data, you receive it empty as a result of sandbox effect of any extension.

If you want to share data (may be the limit of scrolling when taking the screenshot) so the only workaround I know so far is to have a combination between some sort of a storage and the JS native Event mechanism.

The solution in steps (suppose you need the web page to call and send some data to the extension):

1. Make an event on document from the web page.

2. Save the data temporarily inside any storage technology you prefer (localStorage, the DOM itself, or what ever..)

3. Edit the extension and add event listener to receive the event at the other side (extension) by listening on the document.
4. Read data and remove it.