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
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