Chrome extension是一个文件包，里面包含了一个配置文件manifest.json，以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等)。
Chrome Extension开发指南
如何实现网页截屏功能
看一下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
- 打开一个网页，点击工具栏中的按钮
- 确认保存截屏
如何做一个简单的Chrome Extension用于网页截屏
时间： 2024-12-08 03:53:03