一个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

posted @ 2017-03-03 08:51  SubjectiveInitiative  阅读(1008)  评论(0)  编辑  收藏  举报