Taking screenshot using javascript for chrome extensions

by

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!

More Related Contents:

  1. Persistent Service Worker in Chrome Extension
  2. Pass a parameter to a content script injected using chrome.tabs.executeScript()
  3. Returning Chrome storage API value without function
  4. chrome extension – sendResponse not waiting for async function [duplicate]
  5. Chrome Extension: Port error: Could not establish connection. Receiving end does not exist.
  6. How to communicate between popup.js and background.js in chrome extension?
  7. Executing code at page-level from Background.js and returning the value
  8. Chrome Extension: Make it run every page load
  9. How can I get selected text in pdf in Javascript?
  10. saving and retrieving from chrome.storage.sync
  11. How to fetch URL of current Tab in my chrome extension using javascript
  12. String compression in JavaScript
  13. Why is chrome.browserAction.onClicked undefined?
  14. Can the window object be modified from a Chrome extension? [duplicate]
  15. Chrome extension Content Script not loaded until page is refreshed
  16. Completely lost on how to save extension popup window content
  17. I’m getting an error “Tabs cannot be edited right now (user may be dragging a tab)” on tab update/activate/focus event in chrome 91
  18. How to make side panel in chrome extension?
  19. google chrome extension :: console.log() from background page?
  20. the proper use of execcommand(“paste”) in a chrome extension
  21. chrome.storage.local.set using a variable key name
  22. Can I prevent an alert() with a Google Chrome Extension
  23. Is there a flexible way to modify the contents of an editable element?
  24. Devtools doesn’t show console or requests for extension popup? [duplicate]
  25. Accessing iframe from chrome extension
  26. Prevent window.open from focusing
  27. Associate a custom user agent to a specific Google Chrome page/tab
  28. Chrome extension message passing not working (background.js to content.js)
  29. Passing object from injected page script to content script
  30. Published extension doesn’t work with chrome API listeners inside onInstalled

Leave a Comment