谷歌Google、紫鸟浏览器插件开发

对于跨境电商行业的IT部门来说，经常需要获取各种店铺相关数据，但是仅靠官方提供的接口来获取数据远远不够，这个时候我们就需要插件或者RPA的方式来获取数据。

以下是关于自研紫鸟插件的简单demo，紫鸟浏览器使用的是火狐和谷歌的插件，下面以谷歌插件作为演示。

1. 创建插件应用
   首先要进入开发者控制台，有些权限需要找企业管理员给你授权，然后创建插件应用，内部使用，一般自研应用就够了，也不需要审核。
   
2. 开通debug调试权限
   要开发插件，调试控制台必不可少。要开通调试权限也需要企业管理员才可针对个人开通。
   官方图片：
3. 开发插件

   • 首先是插件开发的目录结构：
     
     后台脚本：可直接与你后端服务做交互，否则在其他的目录文件中会出现同源策略问它；
     嵌入页：这个目录就是直接与目标网站做交互的脚本，调用网站的接口、下载、获取网页内容等，也可以自己写个html嵌入到网站中；
     插件页面：这就是点击插件时展示的页面，可以用来做一些插件登陆，配置等；
     配置文件：这里面就是整个工程的一些配置，插件的名称、权限、脚本等。

   • 配置文件manifest.json

     	{
            
       "manifest_version": 3,
       "name": "我的插件",
       "version": "1.0.0",
       "description": "插件开发学习测试",
       "action": {
            
         "default_title": "点击插件打开的页面",
         "default_popup": "popup/index.html"
       },
       "background": {
            
         "service_worker": "background/service_worker.js",
         "type": "module"
       },
       "permissions": [
         "notifications",
         "tabs"
       ],
       "content_scripts": [
         {
            
           "matches": ["https://lkcoffee.com/"],
           "css": ["content/index.css"],
           "js": ["content/index.js"]
         }
       ]
     }
     

   • background

     // 定时
     setInterval(() => {
            
         // google API
         chrome.notifications.create(
           {
            
             type: "basic",
             title: "消息通知标题",
             message: "消息通知",
             // iconUrl: "../icons/icon.png"
           },
           (notificationId) => {
            
             console.log('消息通知ID-->', notificationId)
           }
         );