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参数
代码仓库
结束
本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！