admin 管理员组

文章数量: 1184232

引言

在前端开发过程中，一般分为三个环境：开发环境、测试环境和生产环境。这三个环境对于前端而言，不过就是请求的 API 接口不同罢了。如果是vue3项目，可以通过 import.meta.env.MODE来区分环境，可是站在后端兄弟角度，就必须修改配置文件的地址才能调试。如果要在本地调试，必须 clone 前端代码部署才行，这极为不方便。为此，我开发了一个 Chrome 插件用于解决这个问题，与项目的配置文件配合使用，可以提高后端同事的调试效率。

为什么采用插件

一般情况下，前端项目的配置文件会单独拧出来，方法网站根目录下。如果项目部署需要部署在不同的环境或者平台中，只需修改 config.js 的地址即可。我们可以将其挂载到window上，使之成为一个全局变量。通过浏览器的控制台console修改，这个没问题，但是如果页面刷新，修改的内容由于是保存在内存中，会被清空。

为此，修改的内容需要持久化储存。没错，数据可以储存在storage中，页面刷新后，可以从storage中读取应用。但是数据在控制台修改毕竟很繁琐，因此还需要一个可视化的页面去修改数据，将数据存储到storage中。如果开发一个前端页面去做这事，就有点得不偿失，而选择开发插件是一种更优的选择。

插件的介绍与开发

谷歌的插件网上有非常多的文档，本文只讲述为项目定制插件的核心实现。

其效果如下：

插件的功能

插件提供的功能非常简单。用户安装插件后，可以动态修改 接口地址，项目自动刷新，启用新的接口地址访问后台；在修改接口地址后，也可以恢复默认配置，系统会启用默认地址。

插件要主要解决的问题就是将输入的地址存储到网页的storage中，网页会去读取storage的值，并刷新页面，应用新值。

其核心工作与实现如下：

popup.html 界面

popup.html提供数据的入口以及交互操作界面，其中还会引入popup.js

<div class="container">
  <div class="formItem">
    <h3>MMS自定义API地址：</h3>
    <img id="reset" title="重置" />
  </div>
  <div>
    <p>BASE_URL:</p>
    <div class="formItem">
      <input type="text" id="baseURL" placeholder="http://" />
      <button id="btn">保存</button>
    </div>
  </div>
</div>
<script src="../js/popup.js">

本文标签： 插件 地址 chrome

版权声明：本文标题：开发chrome扩展插件修改地址 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1754668238a3026077.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。