一个chrome图片下载插件的开发过程
最近在做采集，发现用chrome的插件来下载整站也是一个不错的思路，所以想开发一个下载网页（仿站）的插件，学习过程如下：
首先查看一些文档资料
学习360翻译的开发文档：http://open.se.360.cn/open/extension_dev/overview.html
学习官网的开发文档：https://developer.chrome.com/extensions/getstarted
模仿别人写的类似插件
从chrome地址栏里输入：chrome://extensions/ 安装插件。
然后在：chrome://version/的个人资料路径里查找安装的插件目录。
一般是：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Profile 2\Extensions
或：C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\Extensions
最近写了一个保存图片、CSS文件、JS文件的插件，算是抛砖引玉，现在简单介绍一下：
主要功能：
1、可以保存当前标签页下，所有图片，包括背景图片、a链接图片、img src图片。
2、可以保存当前标签页下，所有的样式文件。
3、可以保存当前标签页下，所有的Javascript脚本文件。
4、可以通过右键和点击插件图片来调用下载功能。
5、下载的时候，建议把下载提示对话框选项关闭，否则会提示很多对话框。
配置文件manifest.json
{
"manifest_version": 2,
"name": "保存图片样式脚本文件",
"description": "Save and download all images CSS and JS file.",
"version": "1.0",
"background": {
"scripts": ["background.js"]
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"icons": {
"128": "icon128.png",
"32": "icon32.png",
"48": "icon48.png",
"64": "icon64.png"
},
"permissions": ["downloads", "contextMenus", "webRequestBlocking", "tabs", "\u003Call_urls>"]
}
后台运行程序background.js：
var theApp = {
init : function () {
this.initContextMenus();
this.initEventListener();
},
initContextMenus : function () {
chrome.contextMenus.create({
title: "保存图片样式脚本文件",
contexts: ["all"],
onclick: this.download
});
},
initEventListener: function () {
chrome.extension.onMessage.addListener(function (a) {
console.log(a.action);
if ("IMAGELIST_LOAD" == a.action) {
var images = a.images;
for(var i = 0; i<images.length; i++) {
var f = images[i].src.replace(/https*:\/\//, '');
console.log(f);
chrome.downloads.download({
url: images[i].src,
filename:f,
saveAs : !1,
conflictAction : "overwrite"
});
}
}
});
},
download: function() {
chrome.tabs.query(
{
active : !0,
windowId : chrome.windows.WINDOW_ID_CURRENT
},
function(b){
c = b[0];
chrome.tabs.executeScript(c.id, {
file: "content.js",
allFrames : !0
}, function () {
var a = "pageQuery.getList(" + c.id + ");";
chrome.tabs.executeScript(c.id, {
code : a,
allFrames : !0
})
});
}
);
}
}
theApp.init();
右上角弹框代码popup.html：
<!doctype html>
<html>
<head>
<title>Getting Started Extension's Popup</title>
</head>
<body>
<button id="status" style="width:200px;">保存图片样式脚本文件</button>
<script type="text/javascript" src="jquery.js"></script>
<script src="popup.js"></script>
</body>
</html>
Github源码地址：https://github.com/lilongsy/saveimages
一个chrome图片下载插件的开发过程的更多相关文章
- Chrome IDM下载插件安装使用方法
一. 下载IDM (1)官方网站: http://www.internetdownloadmanager.com/download.html 二.安装IDM IDM安装 (1)运行安装程序 前进 ...
- 安利给班里的大家一个chrome的GitHub插件-----gayhub
title: 一个好用的Github插件--gayhub date: 2017-09-20 15:41:36 tags: --- 别跑, 这真是正经插件. 效果, 一图流: 具体效果在项目地址很详细 ...
- python做一个简易图片下载工具
代码有点乱,先这样 # -*- coding:utf-8 -*- #__author__ :kusy #__content__:文件说明 #__date__:2018/11/01 11:01 impo ...
- 一款超炫的jquery图片播放插件[Cloud Carousel]
今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...
- jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...
- browse下载插件DownThemAll!
DownThemAll!是一个不错的下载插件,它安装在各类browse上.
- 如何下载Image Properties Context Menu（图片）插件
如何下载Image Properties Context Menu(图片)插件 可以通过:http://www.cnplugins.com/zhuanti/four-image-processing. ...
- Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）
Discuz!图片查看插件(支持鼠标缩放.实际大小.旋转.下载) 图片查看是网站中的常用功能,用于展示详细的图片.在discuz图片插件的基础上进行了改造,因此这篇文章主要从以下几个方面来讨论图片查看 ...
- 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）
图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...
随机推荐
- JS的组成部分、引入页面的方法以及命名规范
JS的组成部分.引入页面的方法以及命名规范 一.页面是由三部分组成 1)html标签(超文本标记语言) 2)css样式(层叠样式表) 3)javascript脚本编程语言(动态脚本语言) 二.将c ...
- zoom:1-hasLayout
在现代浏览器,如果子元素float,则父元素不会自动被撑开 #nofloatbox { border: 1px solid #FF0000; background: #CCC; width:200px ...
- loading.io一个loading图标网站，跟大家分享
loading.io是官方网址在首页选一款loading图标,看到左上角的 Try it now中有选中的图标后,可通过光标滑动选择图标大小,然后再点右边的get svg或get css等下载即可
- $http post 取不到数据
默认情况下,jQuery传输数据使用Content-Type: x-www-form-urlencoded 和类似于"foo=bar&baz=moe"的序列,然而Angul ...
- 编译安装mysql-server5.6.32手记
起因: CentOS内置源里面默认安装的Mysql-server太老旧,不支持一些新方法的调用,需要重新安装一个新版本 老版本里面有数据,不想卸载,想保留库和软件本身 机器上没有运行Docker,而且 ...
- JAVA中获取当前运行的类名，方法名，行数
JAVA中获取当前运行的类名,方法名,行数 public static String getTraceInfo(){ StringBuffer sb = new StringBuffer(); Sta ...
- Sql Server 查询多行并一行
干货 CREATE TABLE #benefit_code21 (id INT, number nvarchar(MAX), pname ), collegeID INT, applicationda ...
- JSTL标签之c:foreach,c:if标签小结
<c:forEach>标签用于通用数据循环,它有以下属性 属 性 描 述 是否必须 缺省值 items 进行循环的项目 否 无 begin 开始条件 否 0 end 结束条件 否 集合中的 ...
- HDU4403(暴搜)
A very hard Aoshu problem Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & ...
- KB奇遇记(2)：缘起
最早听到这家公司的名字,大概还是在好几年前. 正是2012年,之前的在一起灿坤待过的同事LY在这家公司当高层,正好公司规模大了,要上ERP项目.苦于公司没有这方面的人才,而内部IT又太差劲支撑不起来. ...