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

前言

在上一篇文章如何开发一个google插件(一)里主要介绍了google插件的基本结构。

在这篇文章中主要结合react+webpack进行一个代码演示,源码地址:源码地址

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

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

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

开发流程

  1. 安装依赖npm install
  2. 执行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使用又分为静态插入和动态插入。

  1. 使用静态方法插入,我们需要在popup点击后通知到网页进行我们需要的处理,这里就涉及到了popup->content_script的通信
  2. 使用动态方法插入,我们可以在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插件的逻辑,工作中开发的插件流程会复杂许多,如状态回显同步、录屏操作、与后端交互等。

相关推荐
uhakadotcom15 分钟前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom19 分钟前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom20 分钟前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom29 分钟前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom39 分钟前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI2 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端
ONE_Gua2 小时前
chromium魔改——CDP(Chrome DevTools Protocol)检测01
前端·后端·爬虫
LaoZhangAI2 小时前
2025最全Cherry Studio使用MCP指南:8种强大工具配置方法与实战案例
前端
咖啡教室2 小时前
前端开发日常工作每日记录笔记(2019至2024合集)
前端·javascript
溪饱鱼2 小时前
Nuxt3能上生产吗?
前端