前言

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

技术选型

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

这里选择使用 jquery 和 uikit 。

别说什么用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)
   }
});