chrome插件-开发简陋的在线api测试工具

chrome浏览器插件开发

前言

大家好，我是yma16，本文分享chrome插件-开发简陋的在线api测试工具。
chrome插件入门

Chrome插件是一种可以在Chrome浏览器上安装的小型软件，用于增强浏览器的功能，例如在页面中显示特定的信息、定制网页显示、跨站点跟踪等功能。下面简单介绍一下Chrome插件的入门，包括创建插件、调试插件、发布插件等。

创建插件

首先，在Chrome浏览器中输入chrome://extensions/进入扩展程序页面。在页面右上角打开"开发者模式"，点击"新建扩展程序"按钮。

创建插件的方式有两种，一种是使用模板，另一种是自定义创建。如果您想使用模板，可以选择其中一种开始创建。如果您选择自定义创建，您需要创建一个文件夹包含以下文件：

manifest.json：描述插件的各种信息，包括插件名称、版本号、描述、权限等。
popup.html：弹出窗口的HTML文件。
popup.js：弹出窗口的JavaScript文件。
icon.png：插件的图标。

调试插件

在创建插件之后，需要进行调试。您可以使用Chrome浏览器的开发者工具进行调试。首先在"扩展程序"页面找到您创建的插件，点击"背景页"旁边的"调试"按钮，即可打开开发者工具。

在开发者工具中，您可以使用控制台进行调试、查看插件的日志信息和事件等等。通过调试工具，您可以确保您的插件能够正常运行，没有错误和问题。

发布插件

完成调试后，您可以将插件发布到Chrome Web Store上。首先需要注册开发者帐号，并在注册时提交个人或公司信息以验证开发者身份。然后在Chrome Web Store上创建一个新产品，并上传插件代码和图标。您还需要填写详细的插件信息，包括插件名称、版本、描述、截图等等。最后，您提交插件并等待审核结果即可。

以上是Chrome插件入门的一些步骤，希望可以帮助您了解该领域的基础知识。

效果

发送get请求

发送post请求

插件的加载

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

配置文件

学习官网：developer.chrome.com/docs/extens...

javascript 复制代码

{
	"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参数

代码仓库

gitcode.net/qq_38870145...

结束

本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！