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

2014/07/16 09:55
阅读数 1.5W

Chrome extension是一个文件包,里面包含了一个配置文件manifest.json,以及一些用于Web开发的文件和资源 (HTML, JavaScript, CSS,等)。

参考原文:

A Simple Chrome Extension to Save Web Page Screenshots to Local Disk

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

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

  • 确认保存截屏

展开阅读全文
打赏
1
13 收藏
分享
加载中
yushulx博主

引用来自“西迷岛主”的评论

请教一下chrome.browserAction.onClicked.addListener(function(tab) {

chrome.tabs.captureVisibleTab(null, {

format : "png",

quality : 100

}, function(data) {

screenshot.data = data;

});

}); 这段代码, screenshot.data = data;你是怎么获取到数据的,我试了一整天就是获取不能将图片数据放到外面来,直接alert是可以的

引用来自“yushulx”的评论

代码:http://www.codepool.biz/wp-content/uploads/2014/07/Chrome_Screenshot.zip

引用来自“西迷岛主”的评论

我是从网页点击触发截图事件的,然后通过扩展程序返回图片代码,因为不能直接返回截图的信息,所以我又从扩展程序发了一条消息,然后网页端JS监测才获得了图片编码,虽然曲折了些,但还是实现了效果。对于你的热心,非常感谢,我就是从你的代码中找到了灵感的!
用stackoverflow+google应该没有解决不了的事
2015/11/24 09:19
回复
举报

引用来自“西迷岛主”的评论

请教一下chrome.browserAction.onClicked.addListener(function(tab) {

chrome.tabs.captureVisibleTab(null, {

format : "png",

quality : 100

}, function(data) {

screenshot.data = data;

});

}); 这段代码, screenshot.data = data;你是怎么获取到数据的,我试了一整天就是获取不能将图片数据放到外面来,直接alert是可以的

引用来自“yushulx”的评论

代码:http://www.codepool.biz/wp-content/uploads/2014/07/Chrome_Screenshot.zip
我是从网页点击触发截图事件的,然后通过扩展程序返回图片代码,因为不能直接返回截图的信息,所以我又从扩展程序发了一条消息,然后网页端JS监测才获得了图片编码,虽然曲折了些,但还是实现了效果。对于你的热心,非常感谢,我就是从你的代码中找到了灵感的!
2015/11/20 22:00
回复
举报
yushulx博主

引用来自“西迷岛主”的评论

请教一下chrome.browserAction.onClicked.addListener(function(tab) {

chrome.tabs.captureVisibleTab(null, {

format : "png",

quality : 100

}, function(data) {

screenshot.data = data;

});

}); 这段代码, screenshot.data = data;你是怎么获取到数据的,我试了一整天就是获取不能将图片数据放到外面来,直接alert是可以的
代码:http://www.codepool.biz/wp-content/uploads/2014/07/Chrome_Screenshot.zip
2015/11/19 17:15
回复
举报
yushulx博主

引用来自“西迷岛主”的评论

请教一下chrome.browserAction.onClicked.addListener(function(tab) {

chrome.tabs.captureVisibleTab(null, {

format : "png",

quality : 100

}, function(data) {

screenshot.data = data;

});

}); 这段代码, screenshot.data = data;你是怎么获取到数据的,我试了一整天就是获取不能将图片数据放到外面来,直接alert是可以的
chrome.browserAction.onClicked.addListener(function(tab) { chrome.tabs.captureVisibleTab(null, { format : "png", quality : 100 }, function(data) { screenshot.data = data; // send an alert message to webpage chrome.tabs.query({ active : true, currentWindow : true }, function(tabs) { chrome.tabs.sendMessage(tabs.id, {ready : "ready"}, function(response) { if (response.download === "download") { screenshot.saveScreenshot(); } else { screenshot.data = ''; } }); }); }); });
2015/11/19 17:14
回复
举报
请教一下chrome.browserAction.onClicked.addListener(function(tab) {

chrome.tabs.captureVisibleTab(null, {

format : "png",

quality : 100

}, function(data) {

screenshot.data = data;

});

}); 这段代码, screenshot.data = data;你是怎么获取到数据的,我试了一整天就是获取不能将图片数据放到外面来,直接alert是可以的
2015/11/19 17:05
回复
举报
更多评论
打赏
5 评论
13 收藏
1
分享
返回顶部
顶部