chrome浏览器插件开发

• 效果
• • 插件的加载
  • • 配置文件
  • api在线测试工具的思路
  • 代码仓库

效果

发送get请求

发送post请求

插件的加载

• 入口 在配置文件manifest.json文件中
• 全局变量的使用（localStorage、sessionStorage、chrom.sync.storage）

配置文件

学习官网：https://developer.chrome/docs/extensions/whatsnew/

{
	"manifest_version": 3,
	"name": "佑语",
	"version": "1.0",
	"description": "资源导航",
	"icons": {
		"128": "./static/img/logo.jpg",
		"48": "./static/img/logo.jpg",
		"16": "./static/img/logo.jpg"
	},
	"background": {
		".service_worke": ["./js/background/main.js"]
	},
	"permissions": ["storage", "activeTab", "scripting"],
	"action": {
		"default_popup": "index.html",
		"default_icon": {
			"128": "./static/img/logo.jpg",
			"48": "./static/img/logo.jpg",
			"16": "./static/img/logo.jpg"
		}
	},
	"options_page":"./options/index.html"
}

api在线测试工具的思路

灵感来源：postman
思路：http协议的的请求方式入手，一般有6种请求方式分别为get、post、put、delete、head、options，
需要有户填如ip端口路径作为基本参数，然后用户可以自定义添加header参数和body参数

代码仓库

https://gitcode/qq_38870145/chrome_extension