How to do a simple Chrome extension for Web screen screenshots

Chrome extension is a package that contains a profile manifest.json, as well as some files and resources for Web development (HTML, JavaScript, CSS, etc.).

Chrome Extension Development Guide

• Chrome Extension Overview

• Chrome Extension Debugging

• Chrome Extension Samples

How to implement the screen screenshot function

Take a look at the manifest file:

{      "name":  "Screenshot extension",      "version ": " 1.0 ",     " description ": " A simple screenshot extension " ,      "Background": {          " Persistent ": false,         " scripts ":  [" Background.js " ]     },      "Content_scripts": [          {               "matches"  : ["<all_urls>"],               "JS":  ["Content.js"]         }      ],      "Browser_action": {           "DEfault_icon ": " Camera.png ",         " Default_title ": " Screenshot "     },     " Permissions ":  [" tabs ", " <all_urls> ", " Activetab "],     " manifest_version ":  2 }

Attention:

• Background.js is used for extension, and content.js is used to interact with the Web. These two files need to be interacted with and passed through a messaging mechanism.

• Permission permissions configuration is important, if you want to let extension action on all Web site, it must be declared as <all_urls>. specific permissions can refer to the Https://developer.chrome.com/extensions/declare_permissions

Google provides an API to capture the visible areas of a Web page:

Chrome.browserAction.onClicked.addListener (function (tab) {Chrome.tabs.captureVisibleTab (null, {format: "P      Ng ", quality:100}, function (data) {screenshot.data = data;  }); });

If you want to implement a full Web page, you have to trigger scrolling and then stitch all the data together. The data in this case is the captured image.

To allow the user to make a screenshot selection, create a content.js to interact with the Web page. Send a message from background.js to Content.js to ask if you need to do a screenshot. If the user clicks on the confirmation, the message is uploaded to Background.js.

Background.js

Chrome.tabs.query ({active:true, currentwindow:true}, function (tabs) {chrome.tabs.sendMessage (Ta   Bs[0].id, {ready: ' ready '}, function (response) {if (response.download = = = "Download") {}}); });

Content.js

Chrome.extension.onMessage.addListener (function (msg, sender, Sendresponse) {if (Msg.ready = = = "Ready") {if ( Confirm (' Does want to capture the screen? ')         {sendresponse ({download: "Download"}); }     } });

To save the downloaded image:

Savescreenshot : function ()  {     var image = new  Image ();      image.onload = function ()  {          var canvas = screenshot.content;          canvas.width = image.width;          Canvas.height = image.height;         var context  = canvas.getcontext ("2d");          context.drawimage ( IMAGE, 0, 0);          // save the image          var link = document.createelement (' a ');          link.download =  "Download.png";      &nbsP;   link.href = screenshot.content.todataurl ();          link.click ();          screenshot.data =   ';     };     image.src = screenshot.data;  },

Install Run Chrome Extension

• In Chrome settings, tick the Developer mode

• Click Load unpacked Extension

• Open a webpage and click the button in the toolbar

• Confirm Save screenshot