谷歌浏览器扩展插件开发-商品采集器

扩展介绍#

谷歌浏览器的扩展主要分5个类型页面，页面所能操作到的权限，都是有限制的，结合开放功能做实际需求操作。 

表格上可以轻松看到不同页面拥有的不同权限。也就是说只能在injected-script、content-script、devtools这3个文件下操作操作dom。而可调用的api也是有限制的，开发时，必须要确认现在要做的操作，是否对应了相应的页面。#

页面之间的数据交互，只能通过通讯api来进行通讯，比如：content-script页面下点击事件，需要传到background页面下进行网络请求操作，就需要通讯api来实现。#

通讯#

 这里写了多个页面之间的通讯需要的api，这里介绍一下content-script与background页面之间的通讯（api使用方法可以在插件文档上查询到）：

content-script发送时使用chrome.runtime.sendMessage，在background接收，用chrome.runtime.onMessage.addListener。

相反：

background发送时使用chrome.tabs.sendMessage，在content-script接收，用chrome.runtime.onMessage.addListener。

配置#

所有需要的权限都需要在manifest.json里的permissions字段进行配置，包括使用的域名。通配符http://*/*可能会存在一些问题，比如苹果电脑获取不到cookies的问题。

还有一些请求问题，这个问题折腾了挺久，最后在backgorund.html和manifest.json文件下都增加了通配符配置才能进行请求，可以参考一下，如果有更好的处理，欢迎评论。

//manifest.json
"content_security_policy": "script-src 'self' 'nonece-123456' 'unsafe-eval'; object-src 'self';"

//background.html
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' data: base64 gap: http://* https://* ;img-src *;style-src 'self' 'unsafe-inline'; media-src *;script-src * 'unsafe-inline' 'unsafe-eval'"> 

项目#

最后，做个项目的介绍。 这个项目主要实现1688和速卖通的产品采集到自己的管理系统，只是简单的在右键增加了按钮，进行采集。

• 每次右键的时候把id存起来，然后去backgorund.js页面下进行当前页面的数据请求和处理。
• 处理好的数据再去提交到管理后台，中途可能需要做登录，获取cookie啥的。
• 提交成功之后进行与content-script进行通讯，操作dom进行提示操作。