How to do a simple Chrome extension for Web screen screenshots

Source: Internet
Author: User

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,&NBSP;0,&NBSP;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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.