Vite项目构建chrome extension，实现多入口

最新推荐文章于 2025-04-16 21:04:18 发布

聂大哥

最新推荐文章于 2025-04-16 21:04:18 发布

阅读量1.2k

点赞数 5

文章标签： chrome 前端

本文链接：https://blog.csdn.net/weixin_43729943/article/details/139357939

版权

本项目使用Vite5 + Vue3进行构建。

要使用vite工程构建浏览器插件，无非就是要实现popup页面和options页面。这就需要在项目中用到多入口打包（生成多个html文件）。

实现思路：

通过配置vite工程，使得项目打包后有两个html文件。
同时打包入口打包background.js。
在manifest.json文件中配置popup、options、background等内容。
将项目中的manifest.json文件打包至dist目录下。

第一步、创建Vue3项目并调整目录结构

npm create vue@latest

通过此命令创建项目，创建后调整项目目录结构，由下图所示：
在这里插入图片描述
项目根目录的index.html打包后配置为popup，options.html配置为options。
将manifest.json放在src目录下，当然也可以放在public目录下（打包时vite自动将静态资源打包至dist目录下）。放在src目录下更符合个人的开发模式。

第二步、编写index.html和options.html

由于index.html打包后配置为popup页面，所以应该这样写：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <!--    引入popup的入口ts-->
    <script type="module" src="src/popup/main.ts"></script>
  </body>
<