Yapi插件 cross-request的理解以及修改-CSDN博客

本文深入探讨了Yapi插件中cross-request的工作原理，包括为何需要index.js、如何处理内容脚本与背景脚本间的通信以及为何需要background.js。同时，提出了现有实现的优化方案，通过移除定时轮询并引入事件监听的方式改进接口请求的处理流程。详细代码修改可见cross-request。

摘要由CSDN通过智能技术生成

最新又重新看了一遍cross-requset的代码，因为毕竟平台做了二次开发，cross-request 在接口运行上起到了至关重要的作用,所以还是需要了解它的作用，也方便后续的排查问题以及解决。

原理

重新花时间缕了下cross-request的整个流程大体如下：

我们需要解决几个疑惑

1. 为什么需要一个index.js进行脚本注入，暴露出一个crossRequest的方法出来。

如果对chrome插件有一定了解的话一定知道， content-script 与实际的页面只是共享dom内容，而不能够共享js的变量以及方法的。所以这里就有一个比较麻烦的问题了，真正的页面点击运行的时候，如何才能够将具体的请求的数据给到content-script呢? 所以就需要用到inject-script了。注入的脚本能够做到共享js变量的方式来解决这个事情。

2. 解决完变量共享的问题, 但是问题又来了。怎么将数据给到content-script呢。

因为我们第一个问题说过了，content-script 与实际的页面只是共享dom内容，所以传递数据就是通过修改dom的数据，来进行数据的传递了。所以上图的流程里面id为y-request的div就是起着这样子一个作用。

3. background.js的作用又是做什么呢？为什么不能通过content-script直接进行http的请求

这里就涉及到了chrome 浏览器安全的限制了。在chrome 72的版本以后就限制了不允许content-script进行跨域的请求。而我们的接口运行肯定是需要进行跨域的操作的。所以只能够将所有的信息再次传递给到background由它来完成我们的接口执行，最后再把执行的结果传递回来。

修改

从上面的流程图我们会发现一个问题，index.js 在收到接口请求发给content-script后就会不停的轮询去读取dom的变化来确定是否已经完成了接口请求，而response.js(content-script)同样，它更是启动后就在循环的读取dom里面一个status的状态值来判断是否需要获取接口数据进行请求。

这种方式的实现还是有点麻烦了。其实应该可以通过通知，订阅类似于这种模式来解决这个问题。所以我们下来可以考虑改造下cross-request

所以这里我们需要先普及下一个内容关于

element.dispatchEvent()
复制代码

对于标准浏览器，其提供了可供元素触发自定义事件的方法：element.dispatchEvent().。不过，在使用该方法之前，我们还需要做其他两件事，即创建和初始化。

document.createEvent()
event.initEvent()
element.dispatchEvent()
举个例子：

var dom = document.querySelector('#id')
document.addEventListener('alert', function (event) {
  console.log(event)
}, false);
 
// 创建
var<