关于vue3:chrome-extension-v3-示例pnpm-vite-elementplus-typescript

背景

我的项目中应用的 chrome extension 是v2版本的，不反对一些新个性，比方办法的 promise 化。

同时心愿对框架进行整体的降级，以储备踩坑教训

性能

基于之前的开发痛点，心愿新的我的项目如下

框架：

• 包治理：pnpm
• vue 3
• typescript
• 打包工具：vite
• ui 组件库：element-plus

background | popup | content | page 4 方同时反对：

• 热更新
• 代码复用
• 互通能力，并反对promise

现状

首先找到了个库

• vite-plugin-chrome-extension
• []()

惋惜 2 个库都无奈启动咱们的我的项目，可能是因为 manifest v3 自身也在疾速迭代中，甚至在我开发的短短工夫内，mv3就反对了 popup 的script module个性。因而插件开发者跟不上 chrome 的 api 更新速度十分失常。

要做的事件

打包

不过插件的思路是能够借鉴的，对我比拟重要的中央是：

对 background | popup | content | page 别离进行打包。然而 vite 临时不反对我的项目中不同文件多种打包形式，所以利用 rollup-plugin 来达到目标。

对于咱们的我的项目，须要对不反对 script module 的模块儿 content | page 采纳 iife 打包模式

const outputs = (await build.generate({ format: "iife"})).output;

bridge

因为 background | popup | content | page 是相互隔离的，因而想对获取对方数据或者告诉对方须要借助 chrome.runtime 模块儿。然而这种模块儿不反对返回值，因而咱们对这个模块儿进行了封装，可能反对 4 方通信，用法大略如下

// content.js
import api from '@/utils/api';
api.onMessage('server:fetch-iframe-src', async ({ data, sender}: any) => {const iframeEl = window.document.querySelector('iframe');
    if (iframeEl) {
      const src = iframeEl.src;
      const urlObj = new URL(src);
      return {src, host: urlObj.hostname};
    }
    
    return null;
});

// popup.html
import api from '@/utils/api';
const {data} = await api.sendTabMessage('server:fetch-iframe-src') as any;
const iframeHost = data.data?.host;

实现

也有可能前面随着 mv3 的迭代，可能进一步简化 vite 的配置，将来可期。

因为本文次要是解决方案，没有什么原理性内容，因而大家还是间接看代码吧，各取所需。

https://github.com/defghy/dem…

完