使用vite+vue创建chrome extension(一)

最新推荐文章于 2024-09-14 08:10:55 发布
最新推荐文章于 2024-09-14 08:10:55 发布
阅读量1.5k 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： chrome vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zwf193071/article/details/122634131
版权
本文介绍如何使用Vite脚手架快速创建Chrome插件项目，并通过一系列命令安装必要的依赖，包括vite-plugin-chrome-extension和tailwindcss等。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

创建项目

使用yarn create vite自动创建项目,如下所示:
在这里插入图片描述
再通过命令code 'chrome-vite extension'快速用vscode打开chrome-vite extension项目

安装依赖

需先安装vite-plugin-chrome-extension, 如下所示:

yarn add vite-plugin-chrome-extension -D

紧接着, 使用npx tailwindcss init -p安装tailwindcss, 完成后, 会自动在项目下生成postcss.config.js和tailwind.config.js两个文件, 如下所示:
在这里插入图片描述

如何使用CRXJS Vite Plugin开发从零开始开发一款浏览器插件
码觉客的博客
04-17 1732
通过以上步骤，你应该能够使用 CRXJS Vite Plugin 顺利地从零开始开发你的浏览器插件了。我们将以创建一个简单的 React + TypeScript 插件为例，该插件包含一个弹出窗口 (Popup) 和一个内容脚本 (Content Script)。CRXJS 的核心优势在于它极大地简化了配置和开发流程，特别是 Manifest V3 的处理和热模块替换 (HMR)。CRXJS 会在构建或开发时自动为你添加必要的字段（例如内容脚本的入口、HMR 相关配置、web 可访问资源等）。
使用Vite+Vue3开发谷歌浏览器插件【V3版本】
初级码农~
09-11 3054
使用vite+vue3开发谷歌浏览器插件，本文针对已对浏览器插件有了解的对象，对浏览器插件的介绍不做赘述，本文不完全是开发教程，更多的为本人日常学习记录，用来记录项目中相对重要以及需要注意的点，以实操和实现功能为主，如有疑问可联系博主解答相关问题。
vite-plugin-chrome-extension:一个Vite插件，用于捆绑Manifest V3的chrome扩展
04-16
Vite-plugin-chrome-extension 从rollup-plugin-chrome-extension vite ，并发展为vite和Chrome Extension Manifest V3 目录 安装 npm install -D vite-plugin-chrome-extension 用法 在vite.config.ts中， // vite.config.ts import { resolve } from "path" ; import { defineConfig } from "vite" ; import { chromeExtension } from "vite-plugin-chrome-extension" ; export default defineConfig ( { resolve : { alias : {
Vite 打造 Chrome 插件：基于 vite-chrome-extension 的快速上手指南
gitblog_01186的博客
09-12 1237
Vite 打造 Chrome 插件：基于 vite-chrome-extension 的快速上手指南 项目地址:https://gitcode.com/gh_mirrors/vi/vite-chrome-extension 欢迎来到 Vite 与 Chrome 插件开发的交汇点。本指南旨在帮助您理解并迅速开始使用 vite-chrome-extension 这个开源项目。以下内容将详细介绍项目的三...
推荐开源项目：vite-plugin-chrome-extension —— Vite 与 Chrome 扩展程序开发的完美融合
gitblog_00089的博客
05-22 524
推荐开源项目：vite-plugin-chrome-extension —— Vite 与 Chrome 扩展程序开发的完美融合 vite-plugin-chrome-extensionA vite plugin to bundle chrome extensions for Manifest V3.项目地址:https://gitcode.com/gh_mirrors/vi/vite-plug...
vite chrome extension 制作流程
xo19882011的专栏
03-16 994
vite for chrome extension
Vue 3 + Vite 实现chrome extension扩展开发热加载!!
weixin_44972715的博客
08-28 610
Vue 3、Vite 和 crxjs 开发一个支持热加载的 Chrome 插件
Electron + Vue3 + Vite + Ts + Sqlite3 + Sequelize搭建笔记
Angel_moon777的博客
09-14 4569
Electron + Vue3 + Vite + Ts + Sqlite3 + Sequelize搭建笔记，包含数据库创建连接封装
vue3+vite+electron开发桌面端应用流程
qq_39460057的博客
04-09 2713
【代码】vue3+vite+electron开发桌面端应用流程。
使用CRXjs、Vite、Vue 开发 Chrome 多页面插件，手动配置 vite.config.ts 和 manifest.json 文件
guoqkmiss的博客
03-29 2599
使用 crxjs vite vue 开发 Chrome 多页面插件
Vite项目构建chrome extension，实现多入口
专注前端技术，包括Web端、移动端、小程序、APP
05-31 1318
本项目使用Vite5 + Vue3进行构建。要使用vite工程构建浏览器插件，无非就是要实现popup页面和options页面。这就需要在项目中用到多入口打包（生成多个html文件）。
vue-chrome-extension-template：用于chrome扩展的Vue Webpack（v4）模板，具有自动manifest.json和图标生成以及sass支持
01-31
Vue Chrome扩展程序模板 chrome扩展程序的Vue Webpack（v4）模板（开箱即用支持sass）。 自动填充manifest.json并创建适当大小的图标，因此您不必这样做。 在开发模式下，它还会在服务器的根目录处创建一个index.html ，以便在扩展的各部分之间轻松导航，并提供指向chrome中实际扩展页面的链接（例如chrome-extension://your-extension-id/popup/popup.html ），这意味着它们可以在彼此之间正常通信！ 如果您想更改输入/输出位置和结构，则webpack配置也很容易自定义。 您唯一需要编辑的就是chrome扩展程序的权限，具体取决于您的需求。 declarativeContent默认情况下处于启用状态，因此演示可以正常工作（如果您在chrome-extension页面或localhost上，图标应闪烁红色）。 另外，只有在不存在tabs权限时才打开它进行开发，以便localhost/index.html页面正确地重定向您。 另外，如果使用content_scripts ，则理想情况下应手动指定这
vite-plugin-html:一个用于处理html的vite插件。 它基于lodash模板开发
05-14
vite-plugin-html English | 用于index.html的Vite插件，可提供基于Minify和EJS模板的功能。 安装（纱线或npm） 节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add vite-plugin-html -D 或者 npm i vite-plugin-html -D 用法 更新您的index.html以添加一些EJS标记 < head > < meta charset =" UTF-8 " /> < link rel =" icon " href =" /favicon.ico " /> < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " /> < title > < %
chrome extension谷歌浏览器插件开发
08-12
NULL 博文链接：https://zlr.iteye.com/blog/2277527
chrome extension例子——选中文本笔记
04-17
NULL 博文链接：https://kyfxbl.iteye.com/blog/1828089
chrome-extension-v3-starter:使用清单v3的最小Chrome扩展模板
05-13
Chrome Extension v3入门版 Chrome v3插件的最小模板 该存储库包含一个最小的Chrome / Chromium扩展程序，该扩展程序使用清单（v3）的最新版本。 您可以将其用作开发扩展的基础。 它还可以为您提供有关如何将v2扩展名转换为v3的更多见解。 换句话说，这是一个可行的，可安装的v3扩展示例，旨在让您快速启动自己的扩展的开发。 安装 分叉此仓库，然后在本地克隆分叉的仓库。 如果您没有github帐户，则只需下载回购的zip并将其解压缩到您的计算机上即可。 在浏览器中打开扩展程序页面： chrome://extensions 。 该链接可在任何基于Chrome的浏览器上使用。 如果尚未执行此操作，请切换“开发人员模式” 。 这通常是扩展页面右上方的切换按钮。 单击加载未打包的扩展名按钮。 在弹出的窗口中，选择包含此最小扩展名的文件夹，然后单击“确定
使用 vite-plugin-vue-crx3 轻松开发 Chrome 拓展
gitblog_00839的博客
09-14 449
使用 vite-plugin-vue-crx3 轻松开发 Chrome 拓展 vite-plugin-vue-crx3 本Vite插件用于使用vite2+vue3开发chrome拓展（manifest v3），且支持开发过程中插件热重载 ...
探索未来浏览器扩展开发：Vite-Chrome-Extension
gitblog_00008的博客
04-04 1107
探索未来浏览器扩展开发：Vite-Chrome-Extension 项目地址:https://gitcode.com/gh_mirrors/vi/vite-chrome-extension 是一个基于 Vite 和 Vue.js 的现代 Chrome 扩展开发框架。它将最新的前端开发工具和最佳实践引入到浏览器插件世界中，让开发者能够更高效地构建、测试和部署高质量的 Chrome 插件。 技术分析 ...
vite + vue3 + ts 开发chrome扩展插件
oowweb的博客
09-06 875
vite + vue3 + ts 开发chrome extention v3扩展插件，以前vite + vue3 多入口打包
chrome插件vue
最新发布
02-26
为了创建基于 Vue 的 Chrome 扩展程序，首先需要构建一个标准的 Webpack 或 Vite 项目来处理 Vue 文件。通常会有一个 `manifest.json` 来描述扩展的功能和权限。 ```json { "manifest_version": 3, "name": "My ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值