如何做一个简单的Chrome Extension用于网页截屏

参考原文：

A Simple Chrome Extension to Save Web Page Screenshots to Local Disk

Chrome Extension开发指南

• Chrome Extension Overview

• Chrome Extension Debugging

• Chrome Extension Samples

如何实现网页截屏功能

看一下manifest文件：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41

{         "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    }

 

注意：

• background.js是用于extension的，而content.js是用于和网页交互的。这两个文件之间要交互，需要通过消息传递机制。

• permission的权限配置很重要，如果要让extension作用于所有的网页站点，就必须申明为<all_urls>。具体的各种权限可以参考 https://developer.chrome.com/extensions/declare_permissions

Google提供了一个API用于捕捉网页的可见区域：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

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

如果要实现全网页的截图，就必须要触发滚动，然后把所有的数据拼接起来。这里的data就是获取的图片数据。

为了让用户做出截屏的选择，创建一个content.js来和网页交互。从background.js发送消息到content.js询问是否需要做截屏操作。如果用户点击确认，把消息回传到background.js。

    background.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

chrome.tabs.query({           active :  true ,           currentWindow :  true       },  function (tabs) {           chrome.tabs.sendMessage(tabs[0].id, {ready :  "ready" },  function (response) {               if  (response.download ===  "download" ) {               }           });       });

    content.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13

chrome.extension.onMessage.addListener( function (msg, sender, sendResponse) {         if  (msg.ready ===  "ready" ) {             if  (confirm( 'Do you want to capture the screen?' )) {                 sendResponse({download :  "download" });             }         }    });

保存下载图片：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

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" ;             link.href = screenshot.content.toDataURL();             link.click();             screenshot.data =  '' ;         };         image.src = screenshot.data;    },

安装运行Chrome Extension

• 在Chrome设置中勾上Developer mode

• 点击Load unpacked extension

• 打开一个网页，点击工具栏中的按钮

• 确认保存截屏

Download Sample Code

Chrome_Screenshot