CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Sridarshan
Sridarshan

Reputation: 1298

Taking screenshot using javascript for chrome extensions

I have made a lot of search regarding taking pictures using JS but none seem to be useful. Some say using activeX controls, which doesn't suit my situation. I was hoping to take picture using JS and upload it a server.

Upvotes: 76

Views: 61404

Answers (5)

Todd Price
Todd Price

Reputation: 2760

I'm not sure if this was available when the original answer was given, but Google now has an example available that shows how to take screenshots:

http://developer.chrome.com/extensions/samples.html

Search for "Test Screenshot Extension" on this page.

UPDATE 2024: Here's the new example using the tabCapture API:

https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/sample.tabcapture-recorder

Upvotes: 33

ksridhar
ksridhar

Reputation: 199

Here is another approach that worked for me.
The requirements were as follows:
(a) capture a screenshot in a chrome extension
(b) the screenshot must have a transparent background
(c) the screenshot must be communicated to a different process (through HTTP)

In this section i will present a code fragment addressing requirement (b)
Useful references are:
chrome extensions debugger api
chrome devtools protocol debugger domain
You may want to start reading code from the last function attachToDebugger

function captureScreenshot(tabId) {

    logMsg(`{page}: captureScreenshot: status=aboutTo, tabId=${tabId}`);

    chrome.debugger.sendCommand(
        {tabId:tabId},
        "Page.captureScreenshot", 
        {format: "png", fromSurface: true},
        response => {
            if(chrome.runtime.lastError) {
                logMsg(`{back}: captureScreenshot: status=failed, tabId=${tabId}`);
            }
            else {
                var dataType = typeof(response.data);
                logMsg(`{back}: captureScreenshot: status=success, tabId=${tabId}, dataType=${dataType}`);
                saveScreenshotRemotely(response.data);
            }
        });

    logMsg(`{page}: captureScreenshot: status=commandSent, tabId=${tabId}`);
}

//---------------------------------------------------------------------------

function setColorlessBackground(tabId) {

    logMsg(`{back}: setColorlessBackground: status=aboutTo, tabId=${tabId}`);

    chrome.debugger.sendCommand(
        {tabId:tabId}, 
        "Emulation.setDefaultBackgroundColorOverride",
        {'color': {'r': 0, 'g': 0, 'b': 0, 'a': 0}},
        function () {
            logMsg(`{back}: setColorlessBackground: status=enabled, tabId=${tabId}`);
            captureScreenshot(tabId);
        });

    logMsg(`{back}: setColorlessBackground: status=commandSent, tabId=${tabId}`);
}

//---------------------------------------------------------------------------

function enableDTPage(tabId) {

    logMsg(`{back}: enableDTPage: status=aboutTo, tabId=${tabId}`);

    chrome.debugger.sendCommand(
        {tabId:tabId}, 
        "Page.enable", 
        {}, 
        function () {
            logMsg(`{back}: enableDTPage: status=enabled, tabId=${tabId}`);
            setColorlessBackground(tabId);
            /*
             * you can comment 
             * setColorlessBackground(tabId);
             * and invoke 
             * captureScreenshot(tabId);
             * directly if you are not interested in having a 
             * transparent background
             */
        });

    logMsg(`{back}: enableDTPage: status=commandSent, tabId=${tabId}`);
}

//---------------------------------------------------------------------------

function attachToDebugger(tabId) {
    chrome.debugger.attach(
        {tabId:tabId}, 
        g_devtools_protocol_version,
        () => {
            if (chrome.runtime.lastError) {
                alert(chrome.runtime.lastError.message);
                logMsg(`{back}: debugger attach failed: error=${chrome.runtime.lastError.message}`);
            }
            else {
                logMsg(`{back}: debugger attach success: tabId=${tabId}`);
                enableDTPage(tabId);
            }
        });
}

Upvotes: 4

YRabl
YRabl

Reputation: 41

If you’re inside an enterprise, your IT might set the policy DisableScreenshots to true. You can check it by going into chrome://policy and search for this key.

Upvotes: 1

Mohamed Mansour
Mohamed Mansour

Reputation: 40199

Since you're using this in Chrome Extensions, the Tab API has a method called captureVisibleTab, which allows captures the visible area of the currently selected tab in the specified window.

To use that you just add "tabs" to your permissions manifest. And from your background page, or popup (or any other extension page), you just call that method like this:

chrome.tabs.captureVisibleTab(null, {}, function (image) {
   // You can add that image HTML5 canvas, or Element.
});

You can control the property by adding {quality: 50} and change the format too, all described within the docs mentioned above.

The beauty of HTML5, you can alter that image with HTML5 Canvas, you can manipulate, transform, modify, clip, anything you want, very easily!

Hope that is what your looking for! Happy New Years!

Upvotes: 95

Marcin Wieprzkowicz
Marcin Wieprzkowicz

Reputation: 306

If you are looking for working example, I have created repo with extension which take screenshot of the entire web page. Take a look here: https://github.com/marcinwieprzkowicz/take-screenshot

Upvotes: 7

Related Questions