最近在做采集，发现用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图片下载插件的开发过程的更多相关文章

  1. Chrome IDM下载插件安装使用方法

    一. 下载IDM (1)官方网站: http://www.internetdownloadmanager.com/download.html 二.安装IDM IDM安装 (1)运行安装程序    前进 ...

  2. 安利给班里的大家一个chrome的GitHub插件-----gayhub

    title: 一个好用的Github插件--gayhub date: 2017-09-20 15:41:36 tags: --- 别跑, 这真是正经插件. 效果, 一图流: 具体效果在项目地址很详细 ...

  3. python做一个简易图片下载工具

    代码有点乱,先这样 # -*- coding:utf-8 -*- #__author__ :kusy #__content__:文件说明 #__date__:2018/11/01 11:01 impo ...

  4. 一款超炫的jquery图片播放插件[Cloud Carousel]

    今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...

  5. jQuery 图片裁剪插件 Jcrop

    Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...

  6. browse下载插件DownThemAll!

    DownThemAll!是一个不错的下载插件,它安装在各类browse上.

  7. 如何下载Image Properties Context Menu（图片）插件

    如何下载Image Properties Context Menu(图片)插件 可以通过:http://www.cnplugins.com/zhuanti/four-image-processing. ...

  8. Discuz！图片查看插件（支持鼠标缩放、实际大小、旋转、下载）

    Discuz!图片查看插件(支持鼠标缩放.实际大小.旋转.下载) 图片查看是网站中的常用功能,用于展示详细的图片.在discuz图片插件的基础上进行了改造,因此这篇文章主要从以下几个方面来讨论图片查看 ...

  9. 图片延时加载原理 和 使用jquery实现的一个图片延迟加载插件（含图片延迟加载原理）

    图片加载技术分为:图片预加载和图片延时加载. javascript图片预加载和延时加载的区别主要体现在图片传输到客户端的时机上,都是为了提升用户体验的,延时加载又叫懒加载.两种技术的本质:两者的行为是 ...

随机推荐

  1. 使用python爬取东方财富网机构调研数据

    最近有一个需求,需要爬取东方财富网的机构调研数据.数据所在的网页地址为: 机构调研 网页如下所示: 可见数据共有8464页,此处不能直接使用scrapy爬虫进行爬取,因为点击下一页时,浏览器只是发起了 ...

  2. zepto js 源码 解读

    /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ;(funct ...

  3. php字符串比较

    比较两个字符串是否相等,最常见的方法就是使用“===”来判断,至于它和“==”的区别,简单来说 就是前者强调“identical”类型也要求一样:后者要求“equal”,值相同就可以了.或者使用str ...

  4. HTML5+MUI+HBuilder 之初探情人

    07,08年那会儿正当Java火爆,C/C++仍是广泛运用的一门语言的时候,所以 我的大学都献给了C/C++和Java.当诺基亚的倒闭成为按键机时代衰落的标志时,移动APP的开发也如破堤之洪,爆炸式的 ...

  5. iOS 之 自动释放池

    向一个对象发送autorelease消息时,cocoa会将该对象的一个引用放入最新的自动释放池.作用域结束时,自动释放池会被释放,池中所有的对象也就被释放了.

  6. delphi的TFileStream 内存流

    一.文件 文本文件是以行为单位进行读.写操作的.文本文件只能单独为读或写而打开,在一个打开的文本文件上同时进行读.写操作是不允许的. 二.定义 FileStream: TFileStream; 三.打 ...

  7. HTML 表单元素、 输入类型、Input 属性

    <input> 元素 最重要的表单元素是 <input> 元素. <input> 元素根据不同的 type 属性,可以变化为多种形态. 注释:下一章讲解所有 HTM ...

  8. linux学习笔记----权限与命令之间的关系(极重要)

    一.权限与命令之间的关系 二.文件与目录的默认权限与隐藏权限 1)umask为默认的权限(通过umask -S)查看你的系统的默认权限. umask的分数是指该默认值需要减掉的权限,比如说umask= ...

  9. Bootstrap入门（十九）组件13：页头与缩略图

    Bootstrap入门(十九)组件13:页头与缩略 1.页头 2.默认的缩略图 3.自定义缩略图 页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔.它支持 h1 标签内内嵌 ...

  10. 为苹果ATS和微信小程序搭建 Nginx + HTTPS 服务

    昨天测试开发微信小程序,才发现微信也要求用HTTPS加密数据,想来是由于之前苹果的ATS审核政策的缘故吧,微信想在苹果上开放小程序必然也只能要求开发者必须使用HTTPS了,于是在服务器上测试安装Ngi ...