如何做一个简单的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

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

  • 确认保存截屏

你可能感兴趣的:(JavaScript,html5,chrome,extension)