Screenshot using javascript for chrome extensions

Question

I have done many searches for shooting using JS, but none of them seem useful. Some say using activeX controls is not appropriate for my situation. I was hoping to take a snapshot using JS and upload it to the server.

Answer 1

Since you use this in Chrome extensions, the tabs API has a captureVisibleTab method that allows you to capture the visible area of ​​the currently selected tab in the specified window.

To use this, you simply add “tabs” to the manifest permissions . And from your background page or popup (or any other extension page), you simply call this method as follows:

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

You can manage the property by adding {quality: 50} and change the format too, everything is described in the documents mentioned above.

The beauty of HTML5, you can change this image using HTML5 Canvas, you can very easily manipulate, transform, modify, clip, anything you want!

Hope this is what you are looking for! Happy New Year!

Answer 2

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

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

Find the "Test Screenshot Extension" on this page.

Answer 3

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

Answer 4

If you are inside an enterprise, your IT professional can set the DisableScreenshots policy to true. You can verify this by going to chrome: // policy and searching for this key.

Answer 5

Here is another approach that worked for me.
The requirements were as follows:
(a) take a screenshot in the Chrome extension
(b) the screenshot should have a transparent background
(c) the screenshot must be transferred to another process (via HTTP)

In this section, I will introduce a code fragment addressing requirement (b)
Useful links:
Chrome Extension Debugger API
Chrome Devtools Protocol Debugger Domain
You can start reading the code from the last attachToDebugger function

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