Taking screenshot using javascript for chrome extensions

Question

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

Answer 1

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);
            }
        });
}