基于WXT开发chrome插件教程(一)-Demo

admin 2024年2月22日17:37:23评论40 views字数 942阅读3分8秒阅读模式

前言

前面研发安全系列讲解——上线前安全测试 简单介绍了半自动化的测试工具,基于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框架,并且初始化一个工程

基于WXT开发chrome插件教程(一)-Demo

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

pnpm run dev

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

基于WXT开发chrome插件教程(一)-Demo

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

原文始发于微信公众号(YY的黑板报):基于WXT开发chrome插件教程(一)-Demo

  • 左青龙
  • 微信扫一扫
  • weinxin
  • 右白虎
  • 微信扫一扫
  • weinxin
admin
  • 本文由 发表于 2024年2月22日17:37:23
  • 转载请保留本文链接(CN-SEC中文网:感谢原作者辛苦付出):
                   基于WXT开发chrome插件教程(一)-Demohttp://cn-sec.com/archives/2513992.html

发表评论

匿名网友 填写信息