如何开发一个google插件(二)

前言

在上一篇文章如何开发一个google插件(一)里主要介绍了google插件的基本结构。
在这篇文章中主要结合react+webpack进行一个代码演示，源码地址：源码地址

下载源码后打开浏览器的扩展程序管理->加载已解压的扩展程序，即可调试插件

此插件主要作为一个学习插件开发的例子：

1. 学习如何结合react、webpack、ts开发插件
2. 学习如何使用google api
3. 学习如何用插件操作网页
4. 学习插件通信方法

开发流程

1. 安装依赖npm install
2. 执行npm run dev(此时webpack会监听代码改动并自动构建)

目录结构

├── 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使用又分为静态插入和动态插入。

1. 使用静态方法插入，我们需要在popup点击后通知到网页进行我们需要的处理，这里就涉及到了popup->content_script的通信
2. 使用动态方法插入，我们可以在popup点击按钮后动态插入脚本并自执行脚本内容

插件里我演示了方法一，使用了短连接通信方式，其实短链接和长链接都可以使用。建议是相互通信频繁的场景使用长链接

动态插入content_script这里我也简单写一下

// 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插件的逻辑，工作中开发的插件流程会复杂许多，如状态回显同步、录屏操作、与后端交互等。