网站后台怎么转发网页内容(前后端联调插件的功能介绍及扩展目录结构介绍分析)
优采云 发布时间: 2022-04-19 03:09网站后台怎么转发网页内容(前后端联调插件的功能介绍及扩展目录结构介绍分析)
1.需求背景
现在前后端联调一般都需要后端在rap2上新建接口，并一一添加输入输出参数。编辑好界面后，需要在编写代码时一一定义输入和输出参数。过程有点难。由此产生了一个想法，是否可以根据后端代码的输入输出参数在rap2上自动生成一个界面，然后在前端请求真实界面时，浏览器插件将请求重定向到 rap2 上的相应接口。这样，真正联调只需要关闭浏览器插件的重定向功能，不需要更改请求地址。
研究发现rap2的接口地址（如：/app/mock/3130/orderSkuApprove/list）固定在/app/mock/前面，后面跟着一个id（3130），一般不同的应用将对应不同的id，最后是接口路径（/orderSkuApprove/list），以及/orderSkuApprove/list等真正的请求地址，转发到rap2只需要将/替换成/app/mock/3130/即可。因为上一部分是不变的，所以只需要记录域名对应的id即可。
从上面的分析可以看出，浏览器插件的功能是：一个开关，可以打开或关闭；可以对域名对应的id进行编辑和存储。开关打开时可以根据存储的域名和id映射关系自动转发，开关关闭时不转发。
2.目录结构介绍
chrome 扩展目录
2.1 manifest.json
这是 Chrome 插件中最重要和最重要的文件。用于配置所有插件相关的配置，必须放在根目录下。其中manifest_version、name、version是必不可少的，推荐使用description和icon。
manifest.json 代码
{
"name": "WdkMockData",
"version": "0.0.1",
"description": "五道口 Mock data",
"permissions": [
"",
"webRequest",
"webRequestBlocking",
"activeTab",
"storage",
"tabs"
],
"options_page": "options.html",
"background": {
"scripts": ["background.js"],
"persistent": true
},
"browser_action": {
"default_popup": "index.html",
"default_icon": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
// "content_security_policy": "script-src http://rap2api.taobao.org/; object-src 'self'"
}
2.2 弹出窗口
弹窗是一个小窗口网页，点击图标时打开，焦点离开网页后立即关闭。一般用于一些临时的交互。
popup.html 代码
（我在这个项目之后直接用 index.html 替换了 popup.html）
Dva Demo
popup.js也被替换成了index.js，因为js代码是经过工程压缩的，所以这里就不贴了。
2.3 背景
背景（让我们这样翻译）是一个常驻页面。它的生命周期是插件中所有类型页面中最长的。它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常情况下，需要一直运行的全局代码，启动并运行，都放在后台。后台的权限很高，几乎可以调用所有的Chrome扩展API（除了devtools），并且可以无限跨域访问，即你可以访问任意一个网站跨域而不需要其他设置 CORS 的一方。
background.js 代码
<p>'use strict';
let domainMapArr = [];
let domainSwitch = false;
chrome.storage.sync.get(
{
domainToRap2: [],
domainSwitch: false
},
(result) => {
domainMapArr = result.domainToRap2;
domainSwitch = result.domainSwitch
}
);
chrome.storage.onChanged.addListener((changes) => {
chrome.storage.sync.get({
domainToRap2: [],
domainSwitch: false
}, (result) => {
domainMapArr = result.domainToRap2;
domainSwitch = result.domainSwitch;
});
});
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
let domainMap = {}
domainMapArr.map(item => {
if(item){
domainMap[item.domain] = item.id
}
})
if(!domainSwitch){
return {cancel: false}
}else{
let domain = details.url.split('/')[2]
let pathName = details.url.split('/').splice(3).join('/')
if(domainMap[domain] && details.method.toLowerCase() !== 'options'){
return {
redirectUrl: `http://rap2api.alibaba-inc.com/app/mock/${domainMap[domain]}/${pathName}`
};
}
}
},
{urls: [""]},
['blocking', "requestBody"]
);
chrome.webRequest.onBeforeSendHeaders.addListener(function(details){
var headers = details.requestHeaders
if(headers && headers.length){
headers.map(item => {
if(item.name.toLowerCase() === "access-control-request-method"){
console.log('access-aontrol-request-method', item.value)
}
})
}
return {requestHeaders: headers};
},
{urls: [ "" ]},['blocking', 'requestHeaders']);
chrome.webRequest.onSendHeaders.addListener(function(details){
// console.log('onSendHeaders---', JSON.stringify(details))
},{urls: [ "" ]})
chrome.webRequest.onHeadersReceived.addListener(details => {
let headers = details.responseHeaders;
let temptOrigin = details.initiator || "*";
let domainMap = {}
domainMapArr.map(item => {
if(item){
domainMap[item.domain] = item.id
}
})
let domain = details.url.split('/')[2]
if(domainMap[domain]){
for( var i = 0, l = headers.length; i
