前言
在上一篇文章如何开发一个google插件(一)里主要介绍了google插件的基本结构。
在这篇文章中主要结合react+webpack进行一个代码演示，源码地址：源码地址
下载源码后打开浏览器的扩展程序管理->加载已解压的扩展程序，即可调试插件
此插件主要作为一个学习插件开发的例子：
- 学习如何结合react、webpack、ts开发插件
- 学习如何使用google api
- 学习如何用插件操作网页
- 学习插件通信方法
开发流程
- 安装依赖
npm install - 执行
npm run dev(此时webpack会监听代码改动并自动构建)
目录结构
javascript
├── dist
│ ├── background.js # 打包后的backgroundjs
│ ├── content_script.js # 打包后的content_scriptjs
│ └── main.js # 打包后的popupjs
├── src
│ ├── App.less # popup的css
│ ├── App.tsx # popup的根组件
│ ├── main.tsx # popup的入口js文件
│ ├── background.ts # backgroundjs逻辑
│ └── content_script.ts # content_scriptjs逻辑
├── index.html # popup.html
├── manifest.json # 插件配置文件
├── package.json
├── README.md
├── tsconfig.json # ts配置文件
└── webpack.config.js # webpack配置文件src是我们的开发目录，webpack会将src的代码打包到dist目录下，我们插件里配置的所有js都是使用的dist目录下的文件
弹框popup.html、background.js和content_script.js需要在manifest.json配置文件中配置引入。其中background.js和content_script.js不是必须引入的，根据你插件是否有需求这两种类型的js进行配置引入
调试
在执行执行npm run dev后webpack会自动监听文件改动。
插件有三种类型的调试
1.调试弹框popup.html
在改动popup的代码后，等webpack自动编译完成后重新点击弹窗，即可生效
注意：popup的js只能访问和控制popup的dom，对网页操作不了，操作网页的js是content_script。这一点可以看我上一篇文章对几种js作用域和生命周期的介绍
2.调试background.js
background是全局的js逻辑，在浏览器打开到浏览器关闭时一直存在。修改background后需要点击刷新按钮后生效。
3.调试content_script.js
content_script是插入到网页中的js，插入方式分为静态插入和动态插入。在manifest.json中配置的为静态插入，每个网页 都会自动注入这段js；动态插入是动态调用google的api进行插入。
要调试content_script打开网页的控制台即可。
插件功能
1.截屏功能
在弹窗中新增一个截屏功能按钮，点击后调用google api进行截图，这个功能并没有什么复杂性。google插件的本质就是根据交互调用google api。在工作中我实现过一个商品价格监测的插件，自动获取任务，自动打开商品页进行截图、上传、关闭页面再打开下一个任务页面，流程相对复杂一点，但本质还是那些东西。
2.UI调试功能
这个功能是点击按钮就会显示网页的所有dom边框
因为我们要操作网页的dom，所以我们必须使用content_scriptjs，content_script使用又分为静态插入和动态插入。
- 使用静态方法插入，我们需要在popup点击后通知到网页进行我们需要的处理，这里就涉及到了popup->content_script的通信
- 使用动态方法插入，我们可以在popup点击按钮后动态插入脚本并自执行脚本内容
插件里我演示了方法一，使用了短连接通信方式，其实短链接和长链接都可以使用。建议是相互通信频繁的场景使用长链接
动态插入content_script这里我也简单写一下
javascript
// popup中的按钮点击事件
async function addUIScript(){
const curTab: any = (await chrome.tabs.query({ active: true }))[0];
chrome.scripting.executeScript({
target: { tabId: curTab.id },
files: ["./dist/content_script.js"],
});
}
// content_script.js
function addStyle() {
const elements = document.body.getElementsByTagName("*");
const items = [];
for (let i = 0; i < elements.length; i++) {
if (
elements[i].innerHTML.indexOf("html * { outline: 1px solid red }") != -1
) {
items.push(elements[i]);
}
}
if (items.length > 0) {
for (let i = 0; i < items.length; i++) {
items[i].innerHTML = "";
}
} else {
document.body.innerHTML +=
"<style>html * { outline: 1px solid red }</style>";
}
}
addStyle();尾声
这篇文章演示的例子主要还是帮助大家梳理如何开发google插件的逻辑，工作中开发的插件流程会复杂许多，如状态回显同步、录屏操作、与后端交互等。