文档章节

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

yushulx
 yushulx
发布于 2014/07/16 09:55
字数 505
阅读 6454
收藏 13

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

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

  • 确认保存截屏

本文转载自:http://www.codepool.biz/?s=Chrome+Extension

共有 人打赏支持
yushulx
粉丝 28
博文 102
码字总数 58581
作品 0
杭州
私信 提问
加载中

评论(5)

yushulx
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应该没有解决不了的事
西迷岛主
西迷岛主

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

请教一下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监测才获得了图片编码,虽然曲折了些,但还是实现了效果。对于你的热心,非常感谢,我就是从你的代码中找到了灵感的!
yushulx
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
yushulx
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 = ''; } }); }); }); });
西迷岛主
西迷岛主
请教一下chrome.browserAction.onClicked.addListener(function(tab) {

chrome.tabs.captureVisibleTab(null, {

format : "png",

quality : 100

}, function(data) {

screenshot.data = data;

});

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

Chrome Extension可以加载到Chrome内,通过操纵Chrome浏览器,从而完成一些定制的工作。 假设你想要一个功能,它可以在你点击上下文菜单项目时剪贴当前标签的URL和标题的话,这个功能在Chrom...

RecoReco
2018/12/02
0
0
# 编写第二个Chrome Extension+Copy URL+Title

我们在上网时,常常需要把刚兴趣的文章记录下来,方便以后继续细看。如果记录为Markdown格式的话,还可以方便的把文章链接加入到自己创作的文章内。 今天编写的小工具,就是一个Chrome Exte...

RecoReco
2018/12/04
0
0
PhantomJS安装及快速入门教程

本文为大家讲解的是一个PhantomJS安装方法,及快速入门教程,感兴趣的同学参考下。 这里有新鲜出炉的PhantomJS教程,程序狗速度看过来! PhantomJS PhantomJS 是一个基于WebKit的服务器端 Ja...

不最醉不龟归
2016/09/20
197
0
微信二维码-服务号推广(将网页存储为图片存储到服务器)

本周预告了将会推出一个「将会讲讲项目中关于微信二维码生成和传播的事儿」的系列,现在我们就来开始讲讲; 首先本篇不会将会怎么调用二维码接口,因为该接口已经在上个月就写好了,在实际项...

jiiiiiin
2016/03/10
777
0
Snipaste强大离线/在线截屏软件的下载、安装和使用

步骤一: https://zh.snipaste.com/ ,去此官网下载。   步骤二:由于此是个绿色软件,直接解压即可。   步骤三:使用,见官网。ttps://zh.snipaste.com 按F1开始截屏   感谢下面哥的精彩...

技术小哥哥
2017/11/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

深入理解java虚拟机-垃圾收集器与内存分配策略

垃圾收集器与内存分配策略 引用计数法 就是给对象添加一个计数器,每当有一个地方引用它时,计数器值就加1;当引用失效时,计数器值就减1,计数器为0的对象就是不可能再被使用的。 缺点:无法...

须臾之余
32分钟前
2
0
git 忽略不必要的文件

通过 git 的 ignore 策略来忽略一些不必要的或者是敏感的文件,达到加速开发和保护隐私的效果 文件中配置: 文件夹:/vendor 文件: .env通配符: src/*.js 注意: .gitignore文件只对还没...

echojson
37分钟前
0
0
Python+Appium自动化测试环境搭建

1.Android SDK 下载SDK并配置系统环境变量ANDROID_HOME。 2.Appium 2.1 直接下载安装 官网下载安装appium-desktop-setup.exe。 2.2 通过npm下载安装 appium本质是一个nodejs库所以要先安装n...

维他ViTa
今天
3
0
MacOS安装单机版HBase

MacOS安装HBase,必然是用于测试了,从简入手、从简配置。 直接通过brew安装即可: brew install hbase 成功安装后,验证是否成功,如果不出意外的话,应该有如下输出: RippleMBP:~ userna...

RippleChan
今天
4
0
linux下oracle随操作系统启动而启动

大家一定还记得,我们在windows下安装oracle后,重起windows,数据库会自动启动,但在linux下,如果我们重起了操作系统, 就会发现数据库需要手工去输入,这个本来有好处,让dba知道操作系统已经重起...

突突突酱
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部