4.1 创建Vue项目 你可以使用Vue CLI来创建一个新的Vue项目: bash vue create my-chrome-extension 选择Vue 3作为版本,并安装必要的依赖。 4.2 配置Webpack以支持Chrome插件 你需要修改Webpack配置,以便它能够正确打包Chrome插件所需的文件。例如,你可以创建一个vue.config.js文件,并添加以下内容: javascript const...
yarn start 无论是开发环境还是生产环境都会在项目根目录生成extension文件夹,chrome 访问chrome://extensions/也就是扩展管理页面,点击右上角的按钮开启开发者模式,选择加载已解压的扩展程序,再选择刚刚生成的extension文件夹即可加载扩展。 由于chrome的限制,官方的 chrome 扩展react devtools并不能审查chrome-extension:/...
另外,以上项目结构已经没有src/App.vue了,现在先不用删除,随着后续章节的讲解再删除。 接下来,就按照上面的目录结构设计开始构建项目。 5 针对Chrome Extension的Vite配置 按照Chrome Extension的规范要求,build出popup项目、content script、background script。 5.1 设置全局配置 在项目根目录下新建globalConfig.js: /...
Chrome Extension的产物是多个HTML,所以我们要创建一个多 Page 的 Vite 工程,强大的 Vite 已经支持 打包出来的产物必须有manifest.json,这相当于Chrome Extension的入口文件,每 release 一次version自动 +1 创建项目 yarn create @vitejs/app 按照提示我们创建一个vue-ts的工程。 创建manifest.json {"name":"Bad R...
初始化项目，创建一个 Vue-ts 工程。随后，创建 manifest.json 文件，将其配置为多入口工程，遵循 Vite 的官方指南。引入 Element Plus，实现按需加载功能，确保代码高效且整洁。在 Chrome Extension 的背景页（background.ts）中，通过一行代码即可实现请求拦截。在 handlerRequest 函数中，根据返回值的不...
Chrome Extension基础基于MV3规范的Chrome插件开发，包括服务工作者（Service Workers）的使用、网络请求调整、远程资源访问限制、Promise的使用等新特性。Chrome插件的组成包括manifest.json、popup页面、content script、background script等核心组件。规划build生成的目录结构，确保各部分文件的清晰隔离与管理。项目...
项目起始，本文引入了Vite与Vue3的结合，通过创建Vue-ts工程来搭建基本框架。随后，文章阐述了将项目改造为多页面工程的步骤，同时介绍了如何利用Vite官方文档配置多入口，实现高效的开发体验。Element Plus的引入为项目提供了丰富的组件库，实现界面的快速构建。文章重点介绍了如何在Chrome Extension中通过简单...
添加scoped之后，实际上vue在背后做的工作是将当前组件的节点添加一个像data-v-1233这样唯一属性的标识，...
1 月下旬的时候，我们报道过 Google Chromium 将引入对 Windows MR 混合现实头显支持的消息。现在，在...
同时还有其他解决办法 vue-cli-plugin-chrome-ex vue-web-extension 好像vue-cli-plugin-browser-extension,对以上2个进行了融合 掘金上有篇文章,详细介绍了手动vue3搭建chrome插件项目的细节