15分钟撸一个谷歌插件采集器

15分钟撸一个谷歌插件采集器背景前段时间由于公司业务需要，需要爬取国外很多服装网站数据，刚刚开始用node superagent模块爬取一些比较传统没啥反爬的网站还是挺舒服，喝杯茶时间可能就爬完一个网站所有数据了好景不长，由于需要爬取的网站比较多，对一些稍微有校验的网站，superagent很快就GG了，于是还是回归老实用无头浏览器的方式puppeteer去爬数据,它还是比较给力,可以轻松屏蔽webdriver、设置ip，甚至滑块验证码等登录校验，基本能解决95%以上的网站了。直到有一天公司要采集1688商品详情,发现它有很强的反爬机制，不仅有滑块验证（很难去模拟拖动通过它），最开始前端同事分析了一下cookie,发现可以登录后直接写死cookie去抓取，不过这得需要每次更新cookie，比较繁琐。公司需求不是针对全站商品，是她们针对指定的商品链接采集,换句话说，就是她们已经进入到商品详情页给到你URL，你去采集对应URL的信息到自己公司系统针对这种页面，谷歌插件可以说是真香了，不用考虑登录之类的操作，直接采集就完事了。前言只要有HTML,CSS,JS基础，再阅读下文档,分分钟就能写一个谷歌插件,本文用最简单的方式写一个获取页面HTML,获取页面Cookie,获取页面标题的效果,其实只要获取到HTML,爬虫还不简单吗哈哈~效果

开始目录分析

css: 放一些公共的cssreset.csspopup.cssimgs：存放imgjs: 业务逻辑的jsclipboard.js 复制文本jspopup.js 插件页面popupjscontent_script.js 你当前打开的那个页面会执行你这个jsbackground.js 接口实现放这里pluginsaxios-0.21.1 引入axios,用来请求background.html 后台页面,可以理解就是你谷歌插件的一个后台管理(非必须)manifest.json 配置文件，就类似uni-app那种配置的东西popup.html 谷歌插件的页面文件分析一下css和img用来放一些样式文件，没什么讲的js里面主要是content_script.jsplugins是引入axios库而已popup.html比较重要,它是页面展示文件step1: 新建目录

也就那么几个文件,暂且理解为类似vue,和react那样固定命名，如App.vue那样的入口文件

step2: 修改manifest.json{ “name”: “crawler”, “manifest_version”: 2, “version”: “1.0.0”, “author”: “duqingyu”, “description”: “crawler-demo”, “browser_action”: { “default_title”: “我的谷歌插件”,//鼠标移上去谷歌插件时候的提示标题 “default_popup”: “popup.html” //这个配置就是popup.html,鼠标移上去谷歌插件就会显示这个html }, “icons”: { “16”: “imgs/logo.png”, // 找个logo放在imgs目录下就好了,我的logo就是我上图的那个红牛 “24”: “imgs/logo.png”, “48”: “imgs/logo.png” }, “background”: { “page”: “background.html” //写死就行,其实这里本文并没涉及,可以忽略 }, “permissions”: [ //一些权限配置,本文涉及到的就是这么几个 “tabs”, //tabs获取当前页 “notifications”, //桌面弹框提示 “cookies”, //获取cookie “http://*/*”, “https://*/*”, “declarativeContent” ], “content_scripts”: [ { “matches”: [ “https://*/*”, //配置content_scirpt.js注入到哪些页面,我们这里是任何页面都允许 “http://*/*” ], “js”: [ “js/clipboard.js”, //注入clipboard.js用来复制文本 “js/content_script.js” //注入content_scirpt.js ], “run_at”: “document_start” } ]}复制代码step3: 修改popup.html 我的采集器 采集界面 获取页面HTML 获取Cookie 获取页面标题 复制代码此时鼠标移动上去已经可以看到效果了,只是没有加任何js脚本而已step4: 修改popup.js,为popup添加事件// 获取当前tabIdfunction getCurrentTab() { return new Promise(resolve => { chrome.tabs.query({ active: true, currentWindow: true }, tabs => { resolve(tabs[0]) }) })}// 桌面通知function notification({ iconUrl, title, content }) { chrome.notifications.create(null, { type: ‘basic’, title, iconUrl: iconUrl || ‘imgs/tip.png’, // imageUrl: imgUrl, message: content, contextMessage: ‘谷歌采集’ })}// 初始化function init() { const crawlerPageHtml = document.getElementById(‘crawlerPageHtml’) crawlerPageHtml.onclick = crawlerHtml const crawlerPageCookie = document.getElementById(‘crawlerPageCookie’) crawlerPageCookie.onclick = crawlerCookie const crawlerPageTitle = document.getElementById(‘crawlerPageTitle’) crawlerPageTitle.onclick = crawlerTitle}// 获取页面HTMLasync function crawlerHtml() { const tab = await getCurrentTab() tab && getHtml(tab)}// 获取页面Cookieasync function crawlerCookie() { const tab = await getCurrentTab() tab && getCookie(tab)}// 获取页面标题async function crawlerTitle() { const tab = await getCurrentTab() tab && getTitle(tab)}function getHtml(tab) { chrome.tabs.sendMessage(tab.id, { type: ‘html’ }, async data => { alert(data) notification({ title: ‘获取HTML采集结果提示’, content: ‘采集成功’ }) // 接下来可以愉快地去做一些ajax请求去发送到服务器了.. // const bgTab = chrome.extension.getBackgroundPage() // const res = await bgTab.sendData(data) // notification({ // title: ‘采集结果提示’, // content: res.code === 1 ? ‘采集成功’ : res.msg || ‘采集失败’ // }) })}function getCookie(tab) { const name = document.getElementById(‘cookieKey’).value if (!name) { return notification({ title: ‘获取Cookie结果提示’, content: ‘请输入Cookie对应的key值’ }) } chrome.cookies.get({ url: tab.url, name }, cookie => { if (!cookie) { return notification({ title: ‘获取Cookie结果提示’, content: ‘没有找到响应的cookie,请清除缓存刷新重试’ }) } console.log(23, cookie); const cookieText = `${cookie.name}=${cookie.value}` copyCookie(tab, cookieText) })}function copyCookie(tab, cookie) { chrome.tabs.sendMessage(tab.id, { type: ‘clipboard’, text: cookie }, () => { notification({ title: ‘获取Cookie结果提示’, content: ‘Cookie已经复制到剪切板’ }) })}function getTitle(tab) { return notification({ title: ‘获取页面标题提示’, content: tab.title })}init()复制代码chrome.tabs和chrome.notifications是谷歌内置的变量,可以用来获取当前页签和弹框等(上面配置了权限的)这里的代码就是初始化了一下绑定监听事件注意js不要写内联,谷歌插件不支持step5: 修改content_scirpt,让popup能和当前页面与通信// 监听chrome.runtime.onMessage.addListener(async (msg, sender, sendResponse) => { if (msg.type === ‘html’) { const node = document.querySelector(‘html’) sendResponse(node.innerHTML) } else if (msg.type === ‘clipboard’) { // 复制到剪切板 await clipboard(msg.text) sendResponse() } // 继续添加事件 // code…})复制代码content_scirpt.js当你打开新页面的时候会注入到你当前页面,它能执行dom相关Api所以在这里可以直接document.querySelector(‘html’)获取html,再返回给popupclipboard方法也是之前配置manifest的时候指明了的当到这一步的时候其实功能基本都实现了,可以愉快的将数据处理一下发到服务器了~step6 发送ajax（本文不涉及,稍微讲一下）在plugins目录下有下载好的axios.js在background.js引入,所有接口Api相关操作对于简单的插件可以直接放到background,简单粗暴。=======background.html======= 后台控制页面 这是后台控制页面复制代码=======background.js=======/** * 数据传输 * @param {String} username 用户名 * @param {String} data 数据 */async function sendData({ username, data} = {}) { return axios.post(‘/api/…’, { username, data })}复制代码安装

进入谷歌扩展管理页chrome://extensions/,直接加载我们新建的那个文件夹就可以了想法给其他人打包一下发个crx文件直接点一下打包选一下目录就完事了总结一下popup写好插件页面popup.js绑定事件,当需要获取dom之类的时候,通过chrome.tabs.sendMessage事件机制与conent_scirpt通信获取页面节点等数据获取其他操作获取到数据再通过axios去和服务器交互对于一些需求,用谷歌插件还是很吃香的文章提供的文件目录只是一个例子,事实上可以很灵活的去设置及和封装一些插件,本文只是简单地提及开发的一些步骤,万变不离其中,核心还是那些东西~附上完整源码github,求star个人博客欢迎各位巨佬交流其他前端/后端技术