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

Chrome extension是一个文件包，里面包含了一个配置文件manifest.json，以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等)。

参考原文：

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

Chrome Extension开发指南

• Chrome Extension Overview

• Chrome Extension Debugging

• Chrome Extension Samples

如何实现网页截屏功能

看一下manifest文件：

{
 
    "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用于捕捉网页的可见区域：

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

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

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

保存下载图片：

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

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

• 确认保存截屏