基于WXT开发chrome插件教程（一）-Demo

前言

前面研发安全系列讲解——上线前安全测试 简单介绍了半自动化的测试工具，基于chrome做插件来做，这里我们详细介绍下如何开发一款自己的扫描插件，这里使用的wxt框架进行，开发比较方便，当然你也可以使用原生方法开发。

简介

以前开发chrome插件主要采用原生的js和html进行，界面比较丑，而且开发效率比较低，这里介绍一款开发框架，可以快速实现插件的开发。

• 持所有浏览器，包括 Chrome、Firefox、Edge、Safari 和一切基于 Chromium 的浏览器。

• 一套代码支持 Manifest V2 和 V3 的插件。

• 更新内容不再需要重新加载整个插件。

• 入口点，manifest.json 是根据入口点的文件生成。

• 自动下载远程代码，Google Manifest V3 要求拓展程序不依赖远程代码。

• 同时具备多个模板使用

若是没有接触过chrome插件开发的话前期可以先了解下chrome插件里面必须的几个文件：

• Manifest(manifest.json)：是一个配置文件，包含插件的基础信息和功能，使用插件会自动创建，要是采用传统方式需要自己手工编写。

• 入口文件：有四个文件是必不可少的，后台核心运行代码-background.js、点击插件弹出页面-popup.html

安装

这里我们计划创建一个基于chrome的xss扫描插件，首先创建一个工程

npx wxt@latest init ChromeScan

这样将安装上WXT框架，并且初始化一个工程

这里选择采用vue模板进行开发，回车后选择采用pnpm进行包管理
运行完成之后可以看到项目Demo创建完成，
运行

pnpm run dev

即可运行插件,剩下的就是对代码进行调整来实现我们的功能了

[!INFO]
这里有个小技巧，若是你安装的是其他chrome内核的浏览器，比如我的是ARC，运行时候会报错找不到chrome浏览器，此时你可以更改/ChromeScan/node_modules/.pnpm/[email protected]/node_modules/chrome-launcher/dist/chrome-finder.js文件，把ARC路径加进去即可