使用CRXjs、Vite、Vue 开发 Chrome 多页面插件，手动配置 vite.config.ts 和 manifest.json 文件

一、使用CRXjs、Vite、Vue 开发 Chrome 多页面插件，手动配置 vite.config.ts 和 manifest.json 文件

一、创建 Vue 项目

1. 使用 Vite 创建 Vue 项目

npm create vite@latest # npm
yarn create vite			 # yarn
pnpm create vite			 # pnpm

选择 Vue 和 TS

在这里插入图片描述

进入项目，并进行 pnpm i 安装 node_modules

pnpm i # 安装包

2. 安装 CRXJS Vite 插件

pnpm i @crxjs/vite-plugin@beta -D # 安装 CRXJS Vite 插件

3. 创建 Manifest.json 文件

{"manifest_version": 3,"name": "CRXJS Vue Vite Example","version": "1.0.0","action": {"default_popup": "index.html"}
}

4. 修改 Vite.config.ts 配置文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json' assert { type: 'json' } // Node >=17// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),crx({ manifest }),],
})

5. 运行 pnpm run dev 命令

可以看到多了个 dist 文件夹，这个就是构建好的插件安装包

.
├── README.md
├── dist
│   ├── assets
│   │   └── loading-page-1924caaa.js
│   ├── index.html
│   ├── manifest.json
│   ├── service-worker-loader.js
│   └── vite.svg
├── index.html
├── manifest.json
├── package.json
├── pnpm-lock.yaml
├── public
│   └── vite.svg
├── src
│   ├── App.vue
│   ├── assets
│   │   └── vue.svg
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── style.css
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts

6. 安装插件

打开浏览器输入：chrome://extensions，点击【加载已解压的扩展程序】选择 dist 文件夹进行安装

插件页面

image.png

popup action 页面

image.png

二、配置项目

1. Chrome TS 配置

1.1. 安装 chrome-types 模块
pnpm i chrome-types -D
1.2. 在 src/vite-env.d.ts 中增加以下配置
/// <reference types="chrome-types/index" />

2. 配置 content 脚本文件和 content 页面

1. 在 src 下新建 content 文件夹和 contentPage 文件夹
  1. content 文件夹是放脚本文件的
  2. contentPage 文件夹是放 Vue 文件的
2. 在 content 文件夹中新建 content.ts 文件

content.ts 文件中写入一行日志

console.log('this is content ts file')

src/content
└── content.ts
3. 在 contentPage 文件夹中写入 Vue 项目文件
1. 页面说明：

Vue 文件最终打包生成一个 html 文件，然后通过 iframe 嵌入对应的网页中

2. 项目结构
src/contentPage
├── App.vue
├── components
│   └── testCom.vue
├── index.html
├── index.ts
├── main.ts
└── style.css
  • App.vue: Vue 项目主文件
  • components：组件文件夹
  • index.html：页面入口，注意引入 main.ts 的路径
  • index.ts：脚本文件
  • main.ts：入口文件
  • style.css：样式文件
3. index.ts 文件内容

创建一个 iframe，并设置 src 为当前插件的 contentPage 页面，最终插入当前网页的 body 中

/*** 初始化 iframe 数据*/
const init = () => {/*** 添加 iframe* @param {string} id iframe id* @param {string} pagePath iframe 路径*/const addIframe = (id: string, pagePath: string) => {const contentIframe = document.createElement('iframe')contentIframe.id = idcontentIframe.style.cssText = 'width: 100%; height: 100%; position: fixed; top: 0px; right: 0px; z-index: 10000004; border: none; box-shadow: 0px 6px 16px -8px rgba(0,0,0,0.15); background-color: rgba(0, 0, 0, 0.01)'const getContentPage = chrome.runtime.getURL(pagePath)contentIframe.src = getContentPagedocument.body.appendChild(contentIframe)}addIframe('content-iframe', 'contentPage/index.html')
}// 判断 window.top 和 self 是否相等，如果不相等，则不注入 iframe
if (window.top == window.self) {init()
}

到这一步，content 页面和脚本文件就都配置完成了，那还需要配置 vite.config.ts 文件和 manifest.json 文件，这个先等下，我们把 popup 页面也改好在一起配置

3. 配置 popup 页面

1. 在 src 中新建 popup 文件夹
  1. 新建之后，把 components 文件夹、App.vue、index.html、mani.ts、style.css 文件放到 popup 文件夹中
  2. 把 public 文件夹中的 vite.svg 放入 assets 文件夹中
1. popup 文件夹树结构
src/popup
├── App.vue
├── components
│   └── HelloWorld.vue
├── index.html
├── main.ts
└── style.css
2. 项目文件夹树结构
.
├── README.md
├── dist
│   ├── assets
│   │   └── loading-page-1924caaa.js
│   ├── index.html
│   ├── manifest.json
│   ├── service-worker-loader.js
│   └── vite.svg
├── manifest.json
├── package.json
├── pnpm-lock.yaml
├── public
├── src
│   ├── assets
│   │   ├── vite.svg
│   │   └── vue.svg
│   ├── content
│   │   └── content.ts
│   ├── contentPage
│   │   ├── App.vue
│   │   ├── components
│   │   │   └── testCom.vue
│   │   ├── index.html
│   │   ├── index.ts
│   │   ├── main.ts
│   │   └── style.css
│   ├── popup
│   │   ├── App.vue
│   │   ├── components
│   │   │   └── HelloWorld.vue
│   │   ├── index.html
│   │   ├── main.ts
│   │   └── style.css
│   └── vite-env.d.ts
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
2. 修改 index.html 文件，修改 main.ts 的引入

因为文件路径变了，所以引入也需要改

<script type="module" src="./main.ts"></script>
3. 修改 App.vue 文件

因为文件路径变了，所以引入也需要改变

<template><div><a href="https://vitejs.dev" target="_blank"><img src="../assets/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="../assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" />
</template>

4. 配置 background

1. 在 src 中新建 background 文件夹以及 service-worker.ts 文件
1. 输入日志
console.log('this is background service-worker.ts file')
2. 树结构
src/background
└── service-worker.ts

5. 配置 vite.config.ts 文件

1. 安装 @types/node 依赖
pnpm i @types/node -D
2. vite.config.ts 文件内容
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { crx } from '@crxjs/vite-plugin'
import manifest from './manifest.json' assert { type: 'json' } // Node >=17
import path from 'path'// https://vitejs.dev/config/
export default defineConfig({root: 'src/',plugins: [vue(),crx({ manifest }),],build: {outDir: path.resolve(__dirname, 'dist'),rollupOptions: {input: {contentPage: path.resolve(__dirname, 'src/contentPage/index.html'),popup: path.resolve(__dirname, 'src/popup/index.html')},output: {assetFileNames: 'assets/[name]-[hash].[ext]', // 静态资源chunkFileNames: 'js/[name]-[hash].js', // 代码分割中产生的 chunkentryFileNames: 'js/[name]-[hash].js'}}}
})
  1. 因为有 popup 页面和 contentPage 页面，所以这个属于多页面
  2. 多页面配置先配置 root
  3. 在 build 时，通过 input 配置输出文件

6. 配置 manifest.json 文件

{"manifest_version": 3,"name": "CRXJS Vue Vite Example","description": "this is my Crxjs&Vue Chrome ext","version": "1.0.0","action": {"default_popup": "popup/index.html"},"background": {"service_worker": "/background/service-worker.ts"},"content_scripts": [{"js": ["/content/content.ts","/contentPage/index.ts"],"matches": ["http://127.0.0.1:5500/*"],"all_frames": true,"run_at": "document_end","match_about_blank": true}],"web_accessible_resources": [{"resources": ["contentPage/index.html", "assets/*", "js/*"],"matches": ["http://127.0.0.1:5500/*"],"use_dynamic_url": true}]
}
  1. 因为我们在 vite.config.ts 中配置 root 为 src/，所以在配置路径的时候都需要注意下
  2. 配置 action 中的 default_popup 为 popup/index.html
  3. 配置 background
  4. 配置 content_scripts
    a. js 为 content 中的 ts 和 contentPage 中的 ts
    b. matches 为匹配模式
    c. all_frames 可以穿透 iframe
  5. 配置 web_accessible_resources

三、构建和安装插件

1. 删除 dist 文件夹

rm -rf dist

2. 运行项目

pnpm run dev
1. 此时 dist 文件夹内容
dist
├── assets
│   ├── loading-page-1924caaa.js
│   ├── vite.svg
│   └── vue.svg
├── content
│   ├── content.ts-loader.js
│   └── content.ts.js
├── contentPage
│   ├── index.html
│   ├── index.ts-loader.js
│   └── index.ts.js
├── manifest.json
├── popup
│   └── index.html
├── service-worker-loader.js
└── vendor├── crx-client-port.js├── vite-client.js├── vite-dist-client-env.mjs.js└── webcomponents-custom-elements.js

3. 安装插件

在这里插入图片描述

4. 运行

1. 打开 content_scripts 中 matches 配置的网页
  1. 内嵌 iframe 页面已经加载
    在这里插入图片描述
  2. contentPage 页面已经加载
    在这里插入图片描述
  3. content.ts 的日志已经输出

下面报错可以不管，那是 crxjs 的问题
在这里插入图片描述

2. popup 页面

在这里插入图片描述

3. service-worker 日志输出

在这里插入图片描述

【使用 CRXJS、Vite、TypeScript、Vue3、Pinia、Less、Naive-ui 开发 Chrome 浏览器插件】

【使用 Vue3、Vite、TypeScript、Less、Pinia、Naive-ui 开发 Chrome 浏览器 Manifest V3 版本插件】

源码

【crxjs_vue3_vite_chrome】

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/785365.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

在Windows中使用NVM安装node.js

在Windows中使用NVM安装node.js

NVM介绍 Node.js版本管理器&#xff08;Node Version Manager&#xff09;&#xff0c;简称NVM&#xff0c;是一款用于在单个系统上轻松安装和管理多个Node.js版本的命令行工具。它允许用户根据项目需求在不同版本之间自由切换&#xff0c;解决了因为不同项目依赖于不同Node.j…
阅读更多...
Python快速入门系列-6（Python高级特性）

Python快速入门系列-6（Python高级特性）

第六章： Python高级特性 6.1 列表推导式与生成器6.1.1 列表推导式6.1.2 生成器6.1.2.1 生成器表达式6.1.2.2 生成器函数6.2 装饰器与迭代器6.2.1 装饰器6.2.2 迭代器6.3 异常处理与错误调试6.3.1 异常处理6.3.1.1 try-except语句6.3.1.2 try-except-else语句6.3.2 错误调试6.3…
阅读更多...
【缺陷】硅光电二极管中的DT侧壁陷阱态的DLTS表征

【缺陷】硅光电二极管中的DT侧壁陷阱态的DLTS表征

【A DLTS study on Deep Trench Processing induced Trap States in Silicon Photodiodes】 概括 本研究通过深能级瞬态光谱&#xff08;DLTS&#xff09;技术对硅光电二极管中的深沟槽&#xff08;DT&#xff09;侧壁诱导的陷阱态进行了详细分析。研究发现&#xff0c;这些陷…
阅读更多...
golang语言系列：通用技能之 Scrum、Kanban等敏捷管理策略

golang语言系列：通用技能之 Scrum、Kanban等敏捷管理策略

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 golang语言系列 文章&#xff0c;主要对编程通用技能 Scrum、Kanban等敏捷管理策略 进行学习 1.什么是敏捷开发 敏捷是一个描述软件开发方法的术语&#xff0c;它强调增量交付、团队协作、持续规划和持续学习。…
阅读更多...
电商新秀视频号小店，2024年值得加入吗？

电商新秀视频号小店，2024年值得加入吗？

大家好&#xff0c;我是电商糖果 视频号小店去年的热度非常高&#xff0c;很多第一批入驻的商家&#xff0c;也赚的盆满钵满。 于是就有不少商家问糖果&#xff0c;关于视频号小店2024值不值得加入&#xff0c;想听听我的看法。 糖果做电商有六七年的时间了&#xff0c;喜欢…
阅读更多...
基于springboot实现网上点餐系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现网上点餐系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现网上点餐系统演示 摘要 随着科学技术的飞速发展&#xff0c;各行各业都在努力与现代先进技术接轨&#xff0c;通过科技手段提高自身的优势&#xff1b;对于网上点餐系统当然也不能排除在外&#xff0c;随着网络技术的不断成熟&#xff0c;带动了网上点餐系统…
阅读更多...
【解決|三方工具】Obi Rope 编辑器运行即崩溃问题

【解決|三方工具】Obi Rope 编辑器运行即崩溃问题

开发平台&#xff1a;Unity 2021.3.7 三方工具&#xff1a;Unity资产工具 - Obi Rope   问题背景 使用Unity三方开发工具 - Obi Rope 模拟绳索效果。配置后运行 Unity 出现报错并崩溃。通过崩溃日志反馈得到如下图所示 这是一个序列化问题造成的崩溃&#xff0c;指向性为 Obi…
阅读更多...
基于8086数码管数字钟计时器设计

基于8086数码管数字钟计时器设计

**单片机设计介绍&#xff0c;基于8086数码管数字钟计时器设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于8086数码管数字钟计时器设计是一个结合了微处理器控制、数码管显示以及计时功能的综合性项目。通过此设计&#xff0c;我们…
阅读更多...
（负载点电源）18V/2A同步降压芯片快速瞬态响应逐周期限流保护

（负载点电源）18V/2A同步降压芯片快速瞬态响应逐周期限流保护

1. 产品特性 ➢ 输入电压范围&#xff1a; 4.5V~18V ➢ 最大负载&#xff1a; 2A ➢ 内部 PWM 控制器以达到快速瞬时响应 ➢ 软启保护时间 tss&#xff1a; 1ms ➢ 逐周期限流保护 ➢ 内部补偿 ➢ 可调的输入欠压锁定 ➢ 短路保护&#xff0c;过温保护 2. 功能描述 P…
阅读更多...
前端-css-01

前端-css-01

1.CSS 长度单位和颜色设置 1.1CSS 中的长度单位 px 像素 em 字体大小的倍数&#xff08;字体默认是16px&#xff09; % 百分比 1.2CSS 中的颜色设置方式 1.2.1使用颜色名表示颜色 red、orange、yellow、green、cyan、blue、purple、pink、deeppink、skyblue、greenyellow .…
阅读更多...
【漏洞复现】通天星CMSV6弱口令漏洞

【漏洞复现】通天星CMSV6弱口令漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…
阅读更多...
机器学习-生存分析：基于QHScrnomo模型的乳腺癌患者风险评估与个性化预测

机器学习-生存分析：基于QHScrnomo模型的乳腺癌患者风险评估与个性化预测

一、引言 乳腺癌作为女性常见的恶性肿瘤之一&#xff0c;对女性健康构成威胁。随着医疗技术的不断进步&#xff0c;个性化医疗逐渐成为乳腺癌治疗的重要方向。通过深入研究乳腺癌患者的风险评估和个性化预测&#xff0c;可以帮助医生更准确地制定治疗方案&#xff0c;提高治疗效…
阅读更多...
强制不换行，

强制不换行，

white-space:nowrap强制不换行&#xff0c;效果如下
阅读更多...
NC21302 被3整除的子序列

NC21302 被3整除的子序列

题目描述 给你一个长度为50的数字串,问你有多少个子序列构成的数字可以被3整除 答案对1e97取模 输入描述: 输入一个字符串&#xff0c;由数字构成&#xff0c;长度小于等于50 输出描述: 输出一个整数 示例1 输入 132 输出 3 示例2 输入 9 输出 1 示例3 输入 …
阅读更多...
[Java面试题]Java字符串比较面试题详解

[Java面试题]Java字符串比较面试题详解

字符串比较 通过字面量赋值创建字符串&#xff08;如&#xff1a;String s”hi”&#xff09;&#xff0c;会先在常量池中查找是否存在相同的字符串&#xff0c;若存在&#xff0c;则直接指向该字符串&#xff1b;若不存在&#xff0c;则在常量池中生成一个字符串&#xff0c;再…
阅读更多...
FebHost：荷兰.NL域名一个富有影响力域名

FebHost：荷兰.NL域名一个富有影响力域名

作为荷兰的国家顶级域名,.NL域名可以说是荷兰互联网发展史上的一个重要里程碑。早在1986年,这个国家域名就已经正式推出,见证了荷兰从互联网新手到如今科技强国地位的转变。 时至今日,.NL域名在全球范围内已经享有广泛知名度。根据统计,截至2023年8月,已经注册的.NL域名数量高…
阅读更多...
vulhub打靶记录——driftingbox

vulhub打靶记录——driftingbox

文章目录 主机发现端口扫描目录扫描爆破子域名提权总结 主机发现 使用nmap扫描局域网内存活的主机&#xff0c;命令如下&#xff1a; nmap -sP 192.168.56.0/24192.168.56.1&#xff1a;主机IP&#xff1b;192.168.56.100&#xff1a;DHCP服务器IP&#xff1b;192.168.56.101…
阅读更多...
每日面经分享（pytest装饰器）

每日面经分享（pytest装饰器）

pytest装饰器 a. pytest.mark.parametrize&#xff1a;这个装饰器用于标记测试函数&#xff0c;并为其提供多组参数进行参数化测试。可以使用元组、列表、字典等形式来指定参数组合。 import pytestpytest.mark.parametrize("num1, num2, expected", [(2, 2, 4), (5…
阅读更多...
2024年美团笔试题（1）

2024年美团笔试题（1）

一.题目描述 小美拿到了一个排列&#xff0c;其中初始所有元素都是红色&#xff0c;但有些元素被染成了白色。 小美每次操作可以选择交换任意两个红色元素的位置。她希望操作尽可能少的次数使得数组变成非降序&#xff0c;你能帮帮她吗? 排列是指:一个长度为n的数组&#…
阅读更多...
京东一面挂在了CAS算法的三大问题上，痛定思痛不做同一个知识点的小丑

京东一面挂在了CAS算法的三大问题上，痛定思痛不做同一个知识点的小丑

写在开头 在介绍synchronized关键字时&#xff0c;我们提到了锁升级时所用到的CAS算法&#xff0c;那么今天我们就来好好学一学这个CAS算法。 CAS算法对build哥来说&#xff0c;可谓是刻骨铭心&#xff0c;记得是研二去找实习的时候&#xff0c;当时对很多八股文的内容浅尝辄止…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023