首页 前端知识 快速查找swagger接口的插件

快速查找swagger接口的插件

2024-03-06 09:03:10 前端知识 前端哥 321 752 我要收藏

前言

对于每一个前端开发者来说,当跟后台同学联调找接口时都是十分费力的,这么多接口,到哪里去找。
在这里插入图片描述
刚好最近一直在学习浏览器插件方面的知识,所以打算写这个插件来检验一下自己的学习成果。
关于一些插件开发的基础知识不会提太多,不清楚的可以看我的博客。

技术选型

学习时随便搞搞可以,但是以后要长久使用的话,还是尽可能做的好看一点。

这里选择使用 jqueryuikit

别说什么用vue,咋搭建项目不好搞,另外vue太大了,反而是jquery这种比较适合;而对于UI库来说,刚开始使用的layui,一开始是好好的,但是再依赖注入时出现了一个错误

在这里插入图片描述
原因不是样式请求超时,根本原因是layui.js里引用了样式,结果在加载时路径不对,找不到样式文件。

安装uikit

之前一直没接触过,这是第一次使用,就简单写一下。

下载
在这里插入图片描述
官方提供了cdn,直接打开链接把响应的内容复制到本地即可。

简单使用

在页面中引入,简单看一下按钮

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./uilit/uikit.min.css" />
    <script src="./uilit/uikit.min.js"></script>
    <script src="./uilit/uikit-icons.min.js"></script>

    <link type="text/css" rel="stylesheet" href="./popup.css" />
    <script type="text/javascript" src="./js/jquery.js"></script>
    <script type="text/javascript" src="./js/popup.js"></script>
  </head>

  <body>
    <button class="uk-button uk-button-primary" id="swagger-search">
      按钮
    </button>
  </body>
</html>

在这里插入图片描述

开始

获取当前激活的tab页

当点击按钮时判断一下当前页面是否是swagger的页面,可以通过判断url中有没有swagger-ui
在这里插入图片描述

$('#swagger-search').click(e => {
    chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
        let tab = tabs.length ? tabs[0] : null;
        if (tab) {
            //alert(tab.url)
            if (tab.url.includes('swagger-ui')) {

            } else {
              UIkit.notification('My message', "warning");
               
            }
        } else {
             UIkit.notification('My message', "warning");
        }
    });
})

在这里插入图片描述

这样的话是有一个问题的,提示是在插件主页里显示的。应该是在当前页面显示才对,这里应该通过依赖注入的方式实现。

chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: () => {
        UIkit.notification('My message', "warning");
    },
});

注意: 这里需要注意,需要先在manifest.json 中将js文件、css文件、字体文件先注入到页面,这样再调用api时就不会提示找不到

在这里插入图片描述

获取dom

通过查看源码我们可以看到,每一个接口的类都是opblock-tag
在这里插入图片描述
在这里插入图片描述

chrome.scripting.executeScript({
   target: { tabId: tab.id },
   function: () => {
       var resultStr = ''
       const list = $('.opblock-tag')
       for (let i = 0; i < list.length; i++) {
           resultStr += 'id:' + list[i].id + ',标题:' + list[i].innerText.replace('\n', '')
       }
       setTimeout(() => {
           alert(resultStr)
       },500)
   }
});

这里的话涉及两个问题:
1、你必须要通过依赖注入的方式才能获取到相应的元素,不然的话,永远只会获取插件主页面的元素
2、使用依赖注入的方式你必须要添加通信,不然插件没法拿到相应的数据。

优化

从功能上来看我们其实不需要通信,只需要完成将所有的swagger接口展开就好,然后通过浏览器自带的搜索功能进行搜索。

遇到的问题

问题1
自己基础不扎实,老是把一些概念搞混。插件要想操作页面必须通过依赖注入的方式才行。

问题2
依赖注入时是以插件的根目录为起始位置,不要写相对路径,哪怕在同一个文件夹下,这会导致找不到注入的脚本文件

问题3
依赖注入是无法注入图片的,要么你的图片可以通过网络访问到,要么检验使用svg,直接写在代码里。检验使用svg,因为不需要联网。

总结

开始做的时候满怀信心,当真正完成时感到很累,断断续续大概做了两天(包含吃饭、睡觉、玩游戏等等)。首先就是准备的不充分,边写边改,遇到问题时查资料,当问题无法解决时就换实现思路;另一个就是知识积累还是非常不足的,前端的知识实在是太多了,还需要继续加油。

说的也差不多了,看一下最后的效果。
在这里插入图片描述

最近发现了给问题,插件影响了其他页面的样式,比如:
在这里插入图片描述
原因是注入的css文件的html有背景色的设置,这块注释掉,或者直接把html这块给注释掉
在这里插入图片描述

插件获取

关注我的公众号,回复插件,获取插件和源码。
第一次搞公众号,如果公众号有问题,或者插件有问题,欢迎留言。

补充
最近突然发现,不能直接将.crx文件拖到浏览器扩展页里了,会报如下错误:
在这里插入图片描述
真的是服了,不是我自己添加的还是你给我添加的啊。

解决:
1:找到你自己本地下载的插件(就是“.crx”文件)
2:把后缀名改成zip,让后将zip文件拖进扩展里
3:如果2还不行,则将zip文件进行解压,再进edge(chrome)里加载解压缩的扩展 找到你解压缩的那个文件夹 点击打开 就可以了。
在这里插入图片描述

其实将后缀改为rar,再解压该文件,就能获得插件的源代码,当然如果代码已经被处理过了另说。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3347.html
标签
评论
发布的文章

JQuery简介与解析

2024-03-01 12:03:31

在Vue 3项目中使用 echarts

2024-03-29 15:03:05

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!