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

目录
相关文章
|
7天前
|
Web App开发 前端开发 JavaScript
折腾Chrome插件,简单地让文本上色~
折腾Chrome插件,简单地让文本上色~
7 0
|
7天前
|
Web App开发 存储 API
折腾Chrome插件,让内容脚本与文本交互~
折腾Chrome插件,让内容脚本与文本交互~
10 0
|
7天前
|
Web App开发
折腾Chrome 插件,怎么给右键菜单增加“选项”?
折腾Chrome 插件,怎么给右键菜单增加“选项”?
12 0
|
7天前
|
Web App开发 JavaScript 前端开发
Chrome插件(二)—Hello World!
Chrome插件(二)—Hello World!
14 0
|
7天前
|
Web App开发 存储 JSON
Chrome插件开发(一)—manifest.json文件介绍
Chrome插件开发(一)—manifest.json文件介绍
12 0
|
7天前
|
Web App开发 监控 JavaScript
chrome安装vue插件 vue-devtools
chrome安装vue插件 vue-devtools
11 0
|
7天前
|
Web App开发
在 HTML 中禁用 Chrome 浏览器的 Google 翻译功能
在 html 标签中添加 translate=“no” 属性,浏览器将不会翻译整个页面。
52 0
|
7天前
|
Web App开发 JavaScript 前端开发
从零开始,轻松打造个人化Chrome浏览器插件
从零开始,轻松打造个人化Chrome浏览器插件
83 0
|
7天前
|
Web App开发 JavaScript
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
356 0
|
7天前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
165 0

热门文章

最新文章