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

注意：

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

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

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

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

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

background.js

content.js

保存下载图片：

安装运行Chrome Extension

在Chrome设置中勾上Developer mode

点击Load unpacked extension

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

确认保存截屏

Download Sample Code

Chrome_Screenshot