混迹博客园那么久，人也很懒。思考了一下还是把这篇文章记录下来。原创https://www.cnblogs.com/y112102/p/10788564.html。
这里说的是只基于google插件
30分钟
准备知识：javascript, sql(新建一个表就可以了），一个接口webapi(入库数据)。
传统的做法：
1：后台发送一个请求(request)，获取输出(response) 然后对输出的结果分析。筛选符合自己业务的数据 (还是不理解的查看 http://www.cnblogs.com/youuuu/archive/2011/06/17/2083714.html)。
2：【难度】数据筛选，后台模拟请求 可能采集的页面涉及到token，登入身份信息....当然我也不会说他不好。一个字麻烦。 系数大。
主角登场：先易后难。
场景：
1：建立好数据库，简单除暴 没啥好说的。
2：一个api接口能插入数据 就可以(接受参数，插入数据库)简单粗暴 没什么逻辑。
3：主角 google插件
1：一个manifest.json文件
2:1个html页面
3：一个js文件
manifest.json：
{ // 清单文件的版本， "manifest_version": 2, // 插件的名称 "name": "xxx采集", // 插件的版本 "version": "1.0", // 插件描述 "description": "色卡xxx内部使用", // 作者 "author": "sxei", // 图标，一般偷懒全部用一个尺寸的也没问题 "icons": { "48": "img/icon.png", "128": "img/icon.png" }, // 浏览器右上角图标设置，browser_action、page_action、app必须三选一 "browser_action": { "default_icon": "img/icon.png", "default_popup": "popup.html" }, // 需要直接注入页面的JS "content_scripts": [ { //匹配的网站 "matches": [ "https://www.x.com/Producttxxxx", "https://www.x.com/Color/*" ], // 多个JS按顺序注入 "js": [ "js/jquery-1.10.2.min.js", "js/content-script.js" ] } ], // 权限申请 (这个很重要 如何没有它 我们的请求是无法跨域的) 有啥就写啥 权限最大化 "permissions": [ "contextMenus", "tabs", "notifications", "webRequest", // web请求 "webRequestBlocking", "storage", "http://*/*", "https://*/*" ] }