如何作一個簡單的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

• 打開一個網頁，點擊工具欄中的按鈕

• 確認保存截屏