最近在做采集，发现用chrome的插件来下载整站也是一个不错的思路，所以想开发一个下载网页（仿站）的插件，学习过程如下：
首先查看一些文档资料
学习360翻译的开发文档：http://open.se.360.cn/open/extension_dev/overview.html
学习官网的开发文档：https://developer.chrome.com/extensions/getstarted
模仿别人写的类似插件
从chrome地址栏里输入：chrome://extensions/ 安装插件。
然后在：chrome://version/的个人资料路径里查找安装的插件目录。
一般是：C:UsersAdministratorAppDataLocalGoogleChromeUser DataProfile 2Extensions
或：C:UsersAdministratorAppDataLocalGoogleChromeUser DataDefaultExtensions
最近写了一个保存图片、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="200px;">保存图片样式脚本文件</button> <script type="text/javascript" src="jquery.js"></script> <script src="popup.js"></script> </body> </html>
Github源码地址：https://github.com/lilongsy/saveimages