对于跨境电商行业的IT部门来说，经常需要获取各种店铺相关数据，但是仅靠官方提供的接口来获取数据远远不够，这个时候我们就需要插件或者RPA的方式来获取数据。
以下是关于自研紫鸟插件的简单demo，紫鸟浏览器使用的是火狐和谷歌的插件，下面以谷歌插件作为演示。
- 创建插件应用
首先要进入开发者控制台，有些权限需要找企业管理员给你授权，然后创建插件应用，内部使用，一般自研应用就够了，也不需要审核。
- 开通debug调试权限
要开发插件，调试控制台必不可少。要开通调试权限也需要企业管理员才可针对个人开通。
官方图片：
- 开发插件
-
首先是插件开发的目录结构：
后台脚本：可直接与你后端服务做交互，否则在其他的目录文件中会出现同源策略问它；
嵌入页：这个目录就是直接与目标网站做交互的脚本，调用网站的接口、下载、获取网页内容等，也可以自己写个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 APIchrome.notifications.create({type: "basic",title: "消息通知标题",message: "消息通知",// iconUrl: "../icons/icon.png"},(notificationId) => {console.log('消息通知ID-->', notificationId)});}, 3000)// 监听消息chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {if (message.action === 'fromPopup') {chrome.notifications.create({type: "basic",title: "Notifications Title",message: "Notifications message to display",iconUrl: "../icons/icon.png"},(notificationId) => {console.log('插件popup发来的消息')});} -
centent
console.log('this is content js') console.log('document', document) console.log('location', location) console.log('window', window)//创建页面函数 function createPage () {const page = "<div id='cj_move_page'>"+"<h3 id='cj_move_h3'>my Plugin</h3>"+"<button id='cj_but1'>消息通知</button>"+"<button id='cj_but2'>fetch http 请求</button>"+"</div>"document.body.insertAdjacentHTML('beforeend',page)document.getElementById('cj_but1').onclick = () => {console.log("消息通知按钮触发")chrome.runtime.sendMessage({action: "fromContent"});}document.getElementById('cj_but2').onclick = async() => {console.log("fetch http 请求 按钮触发")const response = await fetch("https://movie.douban.com/j/tv/recommend_groups")if (!response.ok) {throw new Error('Network response was not ok')}const allData = await response.json()console.log('fetch http 请求返回值', allData)}//拖拽drag(cj_move_h3) } createPage()//拖拽 function drag(ele) {let oldX, oldY, newX, newYele.onmousedown = function (e) {if (!cj_move_page.style.right && !cj_move_page.style.bottom) {cj_move_page.style.right = 0cj_move_page.style.bottom = 0}oldX = e.clientXoldY = e.clientYdocument.onmousemove = function (e) {newX = e.clientXnewY = e.clientYcj_move_page.style.right = parseInt(cj_move_page.style.right) - newX + oldX + 'px'cj_move_page.style.bottom = parseInt(cj_move_page.style.bottom) - newY + oldY + 'px'oldX = newXoldY = newY}document.onmouseup = function () {document.onmousemove = nulldocument.onmouseup = null}} }// 监听插件popup发来的消息 chrome.runtime.onMessage.addListener((e) => {console.log('content:', 'popup发来的消息') }) -
popup
html<!-- 插件的UI界面 --><!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css"> </head> <body><div class="plugin_search"><div class="plugin_search_bar"><input id="plugin_search_inp" /><input id="plugin_search_but" type="button" value="翻译" /></div><div class="plugin_span"><span>翻译此页面</span></div></div><div class="plugin_footer"><span>© 2015 Google -</span><a target="_blank" href="https://google.com/">扩展程序选项</a><a target="_blank" href="https://translate.google.com/?source=gtx">Google 翻译</a></div> </body> <script src="./index.js"></script> </html>js
const plugin_search_but = document.getElementById('plugin_search_but') const plugin_search_inp = document.getElementById('plugin_search_inp') plugin_search_but.onclick = async function () {// alert('plugin_search_inp的值为：' + plugin_search_inp.value.trim())console.log('plugin_search_inp的值为：' + plugin_search_inp.value.trim())// 向 Service Worker 发送消息chrome.runtime.sendMessage({action: 'fromPopup',message: 'Hello from Popup!'});// 向嵌入页面content发送消息const [tab] = await chrome.tabs.query({url: ["https://lkcoffee.com/*"],active: true,currentWindow: true});console.log('tab', tab)if (tab) {// 使用 chrome.tabs.sendMessage 发送消息chrome.tabs.sendMessage(tab.id, {action: 'fromPopup2Content'})} }
-
-
调试
将整个文件夹上传，在目标网页中刷新就可以看到我们的插件了
-
打包
点上面的【打包扩展程序】
第一打包是不需要密钥文件的，第一次打包后会生成一个密钥文件，后续的打包都需要这个密钥文件，否则生成的就是一个新的插件，无法按版本升级的方式发布。
-
上线
将打好的包上传，按要求填写一些信息，完成！
