谷歌插件inject注入脚本与content script基于Promise+async/await 同步通信实现过程

背景

因为 web page 和 content script 是两个隔离环境，在 web page（普通网页） 中有 CSP 安全机制，而在 mac m1 环境，MV3 版本下无法修改 response.header 这个 bug 半年前反馈给谷歌，后续也没见结果，所以，想在 web page 网页中直接请求远程 url 是走不通的，只有借助 content script 来协助请求数据，但是这里牵涉到两个步骤，能否实现异步转同步方式来处理这个过程？

前置知识

1. content script 如果要访问服务端，需要将服务端的域名放在 host_permissions 中，这样 content script 才能访问线上

2. 线上 api 接口需要允许跨域，并且还必须是 https 协议，否则普通网页使用 https 协议的话，content script 访问 http 协议浏览器会报错

3. 普通网页（web page）和 content script 通信方式有两种，一种是 window.postmessage 方式，一种是事件监听，这里我们使用事件监听，因为这个处理起来比较常见，且已能满足需求了

4. 如何做到普通网页请求阻塞呢？我们使用 Promise +async/await 来处理

架构设计

1. 插件的 content script 只作为数据处理层，也即类似本地的 service api，如果学过 nuxt.js 的人不会陌生，将执行层都放到网页层面去，content script 负责与插件 api 进行交互，数据通过事件监听的方式传递给普通网页，这样可以让 content script 逻辑清晰移动，不混杂 css 和 html，也有利于团队协作开发

2. 普通网页作为 DOM 操作者，并且还可以使用普通网页中的函数来执行特定的逻辑，只专注于执行过程，不做业务复杂数据分析和处理

3. background 作为服务层，负责周转调度多个 tab 之间的通信，类似于 Java web 中的 Application 的概念，如果不牵涉到多 tab 间协作的，都不需要 background 进行周转和调度

4. vue 作为对象进行打包然后挂载到 web page 的一个 DOM 节点上，这样 Vue 的开发就可以完全按照网页版的标准进行开发，而不用掺杂着 chrome extension 各种 api 在里面，造成代码的侵入性和不可读性

5. 代码狂叫是基于 vue-cli-plugin-browser-extension，进行开发，这个架子还是很不错的

代码实现

目录结构介绍

initCheck.js 只负责初始化 vue 对象，引入 vue main.js 中抛出来的函数

main.js 的代码结构，将 vue 挂载到 body 上即可

插入之后的样式

vue 代码完全遵守 vue 的开发结构，没有侵入式逻辑

如何实现阻塞式 content script 调用？

App.vue 通过监听来自 content script 的事件和数据

以上方式实现了程序走到 await this.getServerPrefixRecord(p) 会等待数据返回来之后才会继续执行下面的逻辑，这样就做到了异步转同步调度了

思考

1. 如果没有 Promise+async/await 这个过程处理可麻烦了

2. 一个前端只有达到如此灵活地使用 Promise + async/await 才能算是一个有经验的前端

3. 如果不想使用 http 作为中转代理，而改用 websocket 来处理，通过 Promise+async/await 方式也可以很方便地接入，并且还能实时双向地处理一些逻辑，这个未来会在实时聊天中尝试