当前位置： 首页 > news >正文

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

news 2026/3/28 0:44:44

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

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

实现思路：

  1. 通过配置vite工程，使得项目打包后有两个html文件。
  2. 同时打包入口打包background.js。
  3. 在manifest.json文件中配置popup、options、background等内容。
  4. 将项目中的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>
</html>

同样options.html应引入src/options/main.ts

第三步、编写popup/main.ts和options/main.ts

两者的内容基本相同：

import '../assets/main.css'import { createApp } from 'vue'
import elementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// popup页面引入Popup组件，options页面引入Options组件
import Popup from './Popup.vue'const app = createApp(Popup)
app.use(elementPlus)
app.mount('#app')

第四步、编写vite配置文件

此文件主要实现两部分内容，其他实现读者可自行添加。

  1. 将src目录下的manifest.json打包构建时移到dist目录下。
  2. 配置多入口文件。
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteStaticCopy } from 'vite-plugin-static-copy'
import { resolve } from 'path'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),viteStaticCopy({targets: [{ src: 'src/*.json', dest: './' },]})],build: {rollupOptions: {input: {index: resolve(__dirname, 'index.html'),options: resolve(__dirname, 'options.html'),background: resolve(__dirname, 'src/background.ts'),},output: {entryFileNames: `[name].js`,}},outDir: 'dist',},resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})

第五步、编写manifest.json文件

{"name": "xxx","version": "1.0","description": "xxx","homepage_url": "https://xxx.com","manifest_version": 3,"icons": {"16": "logo.png","48": "logo.png","64": "logo.png","128": "logo.png"},"commands": {"reload_extension": {"suggested_key": {"default": "Ctrl+Shift+K","mac": "Command+Shift+K"},"global": true,"description": "Toggle My Extension"}},"action": {"default_icon": "logo.png","default_popup": "index.html"},"options_page": "options.html","background": {"service_worker": "background.js","type": "module"},"permissions": ["management","scripting","notifications","contextMenus","webRequest","storage","tabs","activeTab","nativeMessaging"]
}

通过以上的几个步骤，即可实现浏览器插件使用vue项目开发，同时支持popup页面和options页面，以及background.js。
在这里插入图片描述

在这里插入图片描述

相关文章：

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

本项目使用Vite5 Vue3进行构建。 要使用vite工程构建浏览器插件&#xff0c;无非就是要实现popup页面和options页面。这就需要在项目中用到多入口打包&#xff08;生成多个html文件&#xff09;。 实现思路&#xff1a; 通过配置vite工程&#xff0c;使得项目打包后有两个h…...

编程日记 2024/6/8 4:17:47

【vector模拟实现】附加代码讲解

vector模拟实现 一、看源代码简单实现1. push_backcapacity&#xff08;容量&#xff09;sizereserve&#xff08;扩容&#xff09;operator[ ] &#xff08;元素访问&#xff09; 2. pop_back3. itorator&#xff08;迭代器&#xff09;4.insert & erase &#xff08;头插…...

编程日记 2024/6/8 4:16:45

本地运行ChatTTS

TTS 是将文字转为语音的模型&#xff0c;最近很火的开源 TTS 项目&#xff0c;本地可以运行&#xff0c;运行环境 M2 Max&#xff0c;差不多每秒钟 4&#xff5e;&#xff5e;5 个字。本文将介绍如何在本地运行 ChatTTS。 下载源码 首先下载源代码 git clone https://github…...

编程日记 2024/6/8 4:15:44

应用解析 | 面向智能网联汽车的产教融合解决方案

背景介绍 随着科技的飞速发展&#xff0c;智能网联汽车已成为汽车产业的新宠&#xff0c;引领着未来出行的潮流。然而&#xff0c;行业的高速发展也带来了对高素质技术技能人才的迫切需求。为满足这一需求&#xff0c;推动教育链、人才链与产业链、创新链的深度融合&#xff0…...

编程日记 2024/6/8 4:14:42

华为设备动态路由OSPF（单区域+多区域）实验

动态路由OSPF的配置 OSPF分类两种情况&#xff1a;单区域 多区域路由 OSPF单区域路由配置 OSPF&#xff1a;开放最短路径优先的路由协议。属于大型动态路由协议&#xff0c;适用于中大型的园区网。 网络拓扑&#xff1a; 配置步骤&#xff1a; 1.完成基本配置&#xff08;略&a…...

编程日记 2024/6/8 4:13:42

R语言探索与分析19-CPI的分析和研究

一、选题背景 CPI&#xff08;居民消费价格指数&#xff09;作为一个重要的宏观经济指标&#xff0c;扮演着评估通货膨胀和居民生活水平的关键角色。在湖北省这个经济活跃的地区&#xff0c;CPI的波动对于居民生活、企业经营以及政府宏观经济政策制定都具有重要的影响。因此&a…...

编程日记 2024/6/8 4:12:41

【C++ | 拷贝构造函数】一文了解C++的 拷贝(复制)构造函数

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a;2024-06-07 2…...

编程日记 2024/6/8 4:09:38

【工具】Vmware17 安装mac（13.6.7）虚拟机

目录 0.简介 1.环境 2.详细步骤 2.1下载mac镜像&#xff08;可以选择你所需要的&#xff09; 2.2 VMware安装 1&#xff09;创建新的虚拟机 2&#xff09;选择【典型】&#xff0c;点击下一步 3&#xff09;选择【安装程序光盘映像文件】&#xff0c;点击浏览&#xff…...

编程日记 2024/6/8 4:07:35

mac node版本切换 nvm install nvm ls-remote N/A问题

mac 使用nvm 切换node版本失败或者 nvm install &nvm ls-remote N/A问题 一、出现情况 输入 nvm install v16.18.0输出结果 Version 16.18.0 not found try nvm is-remote•to browse available versions.输入 nvm ls-remote输出结果 N/A二、原因分析 1. 镜像包获取…...

编程日记 2024/6/8 4:06:34

牛客小白月赛95

vp&#xff0c;为后面的比赛做准备 A.相遇 #include <iostream> #include <vector> #include <algorithm> #include <set> #include <unordered_map> #include <cstring> #include <cstdio> #include <string> #include <…...

编程日记 2024/6/8 4:05:31

Python实现调用并执行Linux系统命令

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。 &#x1f913; 同时欢迎大家关注其他专栏&#xff0c;我将分享Web前后端开发、人工智能、机器学习、深…...

编程日记 2024/6/8 4:04:30

古字画3d立体在线数字展览馆更高效便捷

在数字时代的浪潮中&#xff0c;大连图书馆以崭新的面貌跃然屏幕之上——3D全景图书馆。这座承载着城市文化精髓与丰富知识资源的数字图书馆&#xff0c;利用前沿的三维建模技术&#xff0c;为我们呈现了一个全新的知识世界。 随时随地&#xff0c;无论您身处何地&#xff0c;只…...

编程日记 2024/6/8 4:03:29

编写程序，提示用户输入以米/秒(m/s)为单位的速度v和以米/秒的平方(m/s)为单位的加速度 a，然后显示最短跑道长度。

(物理:求出跑道长度)假设一个飞机的加速度是a而起飞速度是v&#xff0c;那么可以使用下 面的公式计算出飞机起飞所需的最短跑道长度: 编写程序&#xff0c;提示用户输入以米/秒(m/s)为单位的速度v和以米/秒的平方(m/s)为单 位的加速度 a&#xff0c;然后显示最短跑道长度。下面…...

编程日记 2024/6/8 4:02:28

k8s 对外发布（ingress）

在k8s中&#xff0c;service的作用体现在两个方面&#xff0c;对集群内部&#xff0c;它不断跟踪pod的变化&#xff0c;更新endpoint中对应pod的对象&#xff0c;提供了ip不断变化的pod的服务发现机制&#xff1b; 对集群外部&#xff0c;他类似负载均衡器&#xff0c;可以在集…...

编程日记 2024/6/8 4:00:25

FL Studio21.2.7最新中文破解版免费激活，音乐制作全掌握！

在数字音乐制作的海洋中&#xff0c;你是否曾因软件的复杂操作、高昂费用而望而却步&#xff1f;是否梦想拥有一款既强大又亲民的音乐制作工具&#xff0c;让你的创作激情不受束缚&#xff1f;今天&#xff0c;让我们一起探索FL Studio21——这款官方中文破解激活码及免费版下载…...

编程日记 2024/6/8 3:59:25

2 - 寻找用户推荐人（高频 SQL 50 题基础版)

2.寻找用户推荐人 考点: sql里面的不等于&#xff0c;不包含null -- null 用数字判断筛选不出来 select name from Customer where referee_id !2 OR referee_id IS NULL;...

编程日记 2024/6/8 3:58:24

高考志愿填报有哪些技巧和方法

一年一度高考季&#xff0c;又高考志愿填报的时侯了。高考志愿填报的时侯&#xff0c;需要考虑的因素比较多&#xff0c;有的同学觉是离家越远越好&#xff0c;要放飞自我&#xff0c;家长再也管不了我了。有的同学觉得专业比学校牌子重要&#xff0c;只要报个好专业&#xff0…...

编程日记 2024/6/8 3:57:22

codereview时通常需要关注哪些

在团队成员之间互相进行代码审查&#xff08;codereview&#xff09;时&#xff0c;通常可以从以下几个方面来确保代码的质量和可维护性&#xff1a; 代码结构和格式&#xff1a; 检查代码是否遵循了项目约定的编码规范和风格指南。确保代码具有良好的可读性&#xff0c;比如合…...

编程日记 2024/6/8 3:56:21

DSP28335模块配置模板系列——定时器中断配置模板

一、配置步骤&#xff1a; 1.使能定时器时钟 EALLOW;SysCtrlRegs.PCLKCR3.bit.CPUTIMER2ENCLK 1; // CPU Timer 2EDIS; 2.设置定时器的中断向量 EALLOW;PieVectTable.TINT2 &TIM2_IRQn;EDIS;其中TIM2_IRQn时定时器中断服务程序的名称 &#xff0c;将中断服务函数的地址…...

编程日记 2024/6/8 3:55:20

使用 Apache Commons Exec 自动化脚本执行实现 MySQL 数据库备份

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…...

编程日记 2024/6/8 3:52:17

Android开机向导定制实战：从源码分析到禁用状态栏的隐藏技巧

Android开机向导深度定制&#xff1a;从源码解析到状态栏控制实战 第一次接触Android开机向导定制时&#xff0c;我被这个看似简单却隐藏复杂逻辑的系统组件深深吸引。作为设备初始化的第一道门户&#xff0c;开机向导不仅承载着用户体验的第一印象&#xff0c;更是厂商品牌展示…...

编程新知 2026/3/28 0:17:22

量子行走：从理论到Python实现——4. 量子算法设计与实现

目录 4. 量子算法设计与实现 4.1 基础量子算法 4.1.1 Deutsch-Jozsa算法 4.1.2 量子傅里叶变换 4.1.3 Grover搜索算法 4.2 Shor因数分解与离散对数 4.2.1 算法框架与经典预处理 4.2.2 量子相位估计的精度分析 4.3 变分量子算法 4.3.1 变分量子本征求解器 4.3.2 量子近…...

编程新知 2026/3/27 23:54:56

ZephyrOS--实战Bluetooth LE心率监测

1. 从零开始搭建ZephyrOS开发环境 第一次接触ZephyrOS时&#xff0c;我花了整整两天时间才把开发环境搭好。现在回想起来&#xff0c;其实只要掌握几个关键步骤就能避开那些坑。这里我以nRF52开发板为例&#xff0c;带你快速搭建起心率监测项目的开发环境。 首先需要安装Zephyr…...

编程新知 2026/3/27 23:10:36

Meshroom 3D重建：从照片到三维模型的视觉魔法之旅

Meshroom 3D重建&#xff1a;从照片到三维模型的视觉魔法之旅 【免费下载链接】Meshroom 3D Reconstruction Software 项目地址: https://gitcode.com/gh_mirrors/me/Meshroom 你是否曾想过&#xff0c;如何将普通的二维照片转化为生动的三维模型&#xff1f;Meshroom正…...

编程新知 2026/3/27 22:44:24

3天快速掌握RCWA光学仿真：从零到一的完整高效指南

3天快速掌握RCWA光学仿真&#xff1a;从零到一的完整高效指南 【免费下载链接】Rigorous-Coupled-Wave-Analysis modules for semi-analytic fourier series solutions for Maxwells equations. Includes transfer-matrix-method, plane-wave-expansion-method, and rigorous c…...

编程新知 2026/3/27 22:28:16

Undecimus技术解析与实战指南：iOS 11-12.4设备越狱完全攻略

Undecimus技术解析与实战指南&#xff1a;iOS 11-12.4设备越狱完全攻略 【免费下载链接】Undecimus unc0ver jailbreak for iOS 11.0 - 12.4 项目地址: https://gitcode.com/gh_mirrors/un/Undecimus Undecimus作为一款针对iOS 11.0至12.4系统的开源越狱工具&#xff0c…...

编程新知 2026/3/27 22:16:10

突破PDF转换困境：Marker全攻略——从格式混乱到精准转换的革新之路

突破PDF转换困境&#xff1a;Marker全攻略——从格式混乱到精准转换的革新之路 【免费下载链接】marker 一个高效、准确的工具&#xff0c;能够将 PDF 和图像快速转换为 Markdown、JSON 和 HTML 格式&#xff0c;支持多语言和复杂布局处理&#xff0c;可选集成 LLM 提升精度&am…...

编程新知 2026/3/27 19:49:03

Qwen3-32B-Chat API优化：降低OpenClaw任务Token消耗的5个技巧

Qwen3-32B-Chat API优化&#xff1a;降低OpenClaw任务Token消耗的5个技巧 1. 为什么需要关注Token消耗&#xff1f; 当我第一次在本地部署OpenClaw对接Qwen3-32B-Chat模型时&#xff0c;最让我震惊的不是它的推理能力&#xff0c;而是执行简单自动化任务后Token消耗的速度。一…...

编程新知 2026/3/27 19:42:59

2024年App上架全攻略：从软著申请到应用市场发布

1. 2024年App上架必备条件全解析 想在2024年把App成功上架到各大应用市场&#xff0c;开发者需要跨过几道硬性门槛。最近帮几个创业团队走完上架流程&#xff0c;发现很多新手容易在这些基础环节卡壳。先说最重要的三件套&#xff1a;软件著作权证书、App备案号、应用市场要求的…...

编程新知 2026/3/27 19:32:54

深入OpenBMC构建系统：Yocto项目与BitBake实战解析（以Romulus平台为例）

深入OpenBMC构建系统&#xff1a;Yocto项目与BitBake实战解析&#xff08;以Romulus平台为例&#xff09; 在服务器硬件管理领域&#xff0c;OpenBMC作为开源基板管理控制器固件堆栈&#xff0c;正逐渐成为企业级设备的标准配置。不同于简单的固件烧录&#xff0c;OpenBMC的构建…...

编程新知 2026/3/27 19:26:53