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

这篇文章介绍如何通过几行简单的代码，创建一个用于网页截屏的Chrome extension。 chrome extension HTML5 JavaScript 目录[-] Chrome Extension开发指南 如何实现网页截屏功能 安装运行Chrome Extension Chrome extension是一个文件包，里面包含了一个配置文件manifest/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 打开一个网页，点击工具栏中的按钮 确认保存截屏