使用vue快速开发一个带弹窗的Chrome插件

简介: 使用vue快速开发一个带弹窗的Chrome插件

vue-chrome-extension-quickstart



说在前面

🎈平时我们使用Chrome插件通常都只是用来编写简单的js注入脚本,大家有没有遇到过需要插件在页面上注入一个弹窗呢?比如我们希望可以通过快捷键快速唤起ChatGPT面板或者快速唤起一个翻译面板,这时候我们就需要在页面上注入一个可以使用快捷键唤起的弹窗面板了,那么在插件开发中,我们怎么使用vue框架来进行弹窗面板开发呢?

一、介绍

vue 快速开发 chrome 浏览器插件模板。

二、功能

1、vue 开发 popup 弹窗页面

2、vue 开发弹窗页面


可以通过快捷键控制弹窗的显示隐藏。

3、一键打包

配套打包脚本,npm run build 一键生成插件 dist 包。

三、目录介绍

1、popup

插件图标点击的弹框页面,可以使用 vue 框架进行开发。

2、panel


浏览器标签页内弹窗,可以使用 vue 框架进行开发。

3、dist

打包生成的插件 dist 包,导入插件时直接选择该 dist 目录即可。

4、script

需要动态注入到页面的 script 脚本,可以在该目录下添加 js 脚本,打包成插件后会动态注入页面,即通过的方式注入到页面中。

5、init.js

模板初始化脚本,安装各目录所需依赖。

6、build.js

打包脚本,npm run build运行脚本生成插件 dist 包。

7、contentScript.js

需要动态注入的 js 文件,打包时会自动生成。

8、manifest.json

插件配置信息,按需配置即可。

四、使用

1、下载模板

(1)gitee直接下载

Gitee地址:https://gitee.com/zheng_yongtao/vue-chrome-extension-quickstart.git

(2)命令行快速创建
  • 安装下载工具
npm i -g jyeontu

需要安装1.2.3以上版本

  • 创建模板
jyeontu create

输入命令后更加提示输入或选择即可

  • 插件初始化
cd .\chrome插件快速开发\
npm run init

  • 等待安装完依赖即可。
  • 插件打包
npm run build

  • 浏览器导入插件



  • 插件效果
  • 点击插件图标唤起popup弹窗
  • alt + v 唤起 页面弹窗

    模板弹窗内嵌了翻译和ChatGPT

五、开发调试

1、popup页面开发调试

cd .\popup\
npm run serve

popup弹窗面板是用vue框架写的,直接启动项目即可,改好页面直接插件根目录运行打包命令更新即可。

2、panel页面开发调试

和popup页面一样,直接启动项目调试,改好后重新打包即可。

源码

Gitee:https://gitee.com/zheng_yongtao/vue-chrome-extension-quickstart.git

欢迎star、欢迎pr


说在后面

🎉 这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球 🏸 ,平时也喜欢写些东西,既为自己记录 📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解 🙇,写错的地方望指出,定会认真改进 😊,偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章,有兴趣的也可以关注下。在此谢谢大家的支持,我们下文再见 🙌。

目录
相关文章
|
24天前
|
Web App开发 JavaScript 前端开发
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念
Node.js 是一种基于 Chrome V8 引擎的后端开发技术,以其高效、灵活著称。本文将介绍 Node.js 的基础概念,包括事件驱动、单线程模型和模块系统;探讨其安装配置、核心模块使用、实战应用如搭建 Web 服务器、文件操作及实时通信;分析项目结构与开发流程,讨论其优势与挑战,并通过案例展示 Node.js 在实际项目中的应用,旨在帮助开发者更好地掌握这一强大工具。
44 1
|
27天前
|
Web App开发 人工智能 自然语言处理
WebChat:开源的网页内容增强问答 AI 助手,基于 Chrome 扩展的最佳实践开发,支持自定义 API 和本地大模型
WebChat 是一个基于 Chrome 扩展开发的 AI 助手,能够帮助用户理解和分析当前网页的内容,支持自定义 API 和本地大模型。
64 0
|
2月前
|
Web App开发 Windows
win 快捷键大全,虚拟窗口、桌面等操作细节,可以使界面整洁,分类工作;Chrome快捷键,都是一些开发的骚操作
这篇文章提供了Windows操作系统和Chrome浏览器的快捷键大全,以及Xshell的快捷键操作,旨在帮助用户提高工作效率和界面管理。
133 2
|
2月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
343 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
4月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
77 11
|
3月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
532 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
|
1月前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
|
1月前
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
119 2
|
1月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
235 9
|
2月前
|
Web App开发 开发者