Chrome浏览器插件(Chrome Extension,简称CRX)大家已经非常熟悉了。目前的Chrome Extension开发应该按照Manifest V3的规范。按照谷歌官方的通知,2023年6月开始,将不允许发布Manifest V2的Chrome Extension,预…
因为我们使用的是TypeScripts来进行开发Chrome插件,所以需要配置一个Chrome插件API等Types 2.1. 安装chrome-types包 shell 复制代码pnpm i chrome-types -D 2.2. 配置Types 在vite-env.d.ts文件中写入 typescript 复制代码/// <reference types="chrome-types/index" /> 这样的话,就可以在popup、content、backgro...
无论是开发环境还是生产环境都会在项目根目录生成extension文件夹,chrome 访问chrome://extensions/也就是扩展管理页面,点击右上角的按钮开启开发者模式,选择加载已解压的扩展程序,再选择刚刚生成的extension文件夹即可加载扩展。 由于chrome的限制,官方的 chrome 扩展react devtools并不能审查chrome-extension://协议的页面...
通过vue create app创建项目后,我们会发现仅仅只能用来开发web页面,如果要开发chrome插件,还需要手动配置下。 配置插件页面 chrome插件都有popup、devtools、options等页面,vue支持多页面,通过vue.config.js配置pages即可满足需求。 本质上这些页面和普通的web页面没有任何区别,但是我们可能需要在这些页面中调用chrome的相关...
vue-devtools是一个Chrome浏览器的插件,它是官方提供的一个vue开发者工具,方便我们在开发vue项目时调试,在开发和debug时都很有用,就想我们平时使用Chrome的开发者工具一样。 1.vue-devtools的安装 1)先到github上去下载devtools这个库,克隆也可以 2)安装依赖 ...
pnpm install --registry=https://registry.npmmirror.com 打包 pnpm run build 加载插件 1. 打开chrome浏览器,输入chrome://extensions/,进入插件管理页面 2. 打开右上角的开发者模式 3. 点击左上角的加载已解压的扩展程序 4. 选择dist文件夹 Releases No releases published...
如果通过webpack编译的话,就能使开发过程变得更舒服,使文件结构趋向模块化,并且打包的时候直接编译压缩代码。后来发现了vue-cli-plugin-chrome-ext插件,通过这个插件能很方便地用vue-cli3来开发谷歌插件,并能直接引用各种UI框架跟npm插件。来源:掘金著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处...
下载vue3-chrome-ext-template模板 ### 进入项目目录,安装依赖包```bash pnpm install 启动项目 pnpm dev 目录结构 ├─pages ├─background // 常驻后台的插件脚本 ├─content // 注入页面的脚本 (可以获取页面dom...) ├─options // 插件的配置页 └─popup // 点击右上角插件图标展示的页面 ├─man...
我在Vue3 开发中踩的坑 前期准备 由于vite 在开发态是基于 ESM 进行模块化开发, 而 ESM 的浏览器兼容版本有限,如下图。 esm-兼容 所以,如果你打算使用 vite 作为构建工具去开发,你至少要有一个合适版本的浏览器。如果你和我一样, Chrome 版本的浏览器比较低,但是又不想升级,想留着偶尔方便自测和定位浏览器...
首先，通过Vite创建基础的Vue项目，选择Vue和TypeScript作为开发工具。接着，对项目进行修改，添加Chrome插件所需的manifest.json、service-worker、content和popup页面等配置。配置过程中，包括安装chrome-types包，设置Typescript类型，以及调整vite.config.ts以支持manifest.json配置和文件复制。构建项目时，通过...