首页 > 代码库 > 如何做一个简单的Chrome Extension用于网页截屏
如何做一个简单的Chrome Extension用于网页截屏
Chrome extension是一个文件包,里面包含了一个配置文件manifest.json,以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等)。
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
打开一个网页,点击工具栏中的按钮
确认保存截屏
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。