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

news2024/11/26 23:22:54

一、使用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 = id
    contentIframe.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 = getContentPage
    document.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', // 代码分割中产生的 chunk
        entryFileNames: '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.coloradmin.cn/o/1561032.html

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

相关文章

SpringBoot微服务实现深度学习：构建AGI道路的基石+实战案例演示

SpringBoot微服务实现深度学习：构建AGI道路的基石+实战案例演示

&#x1f389;&#x1f389;欢迎光临&#xff0c;终于等到你啦&#x1f389;&#x1f389; &#x1f3c5;我是苏泽&#xff0c;一位对技术充满热情的探索者和分享者。&#x1f680;&#x1f680; &#x1f31f;持续更新的专栏《Spring 狂野之旅&#xff1a;从入门到入魔》 &a…
阅读更多...
4月4日生效！管控升级！继续围堵 | 百能云芯

4月4日生效！管控升级！继续围堵 | 百能云芯

据路透社29日报道&#xff0c;美国拜登政府当天修改规则&#xff0c;升级针对中国人工智能&#xff08;AI&#xff09;芯片和相关工具出口管制的措施。报道声称&#xff0c;这是美国以国家安全为由阻碍中国芯片制造业发展的努力的一部分。 美国商务部下属的工业与安全局&#x…
阅读更多...
移动硬盘损坏打不开？别慌，数据恢复有妙招！

移动硬盘损坏打不开？别慌，数据恢复有妙招！

移动硬盘作为我们日常存储和传输数据的重要工具&#xff0c;一旦遇到损坏打不开的情况&#xff0c;无疑会让我们倍感焦虑。毕竟&#xff0c;其中存储的文件可能关乎工作、学习或生活的方方面面&#xff0c;一旦丢失&#xff0c;后果不堪设想。那么&#xff0c;当移动硬盘损坏打…
阅读更多...
UE5 SQLite笔记

UE5 SQLite笔记

开发环境&#xff1a; 系统&#xff1a;Windows 10 64 bit 引擎&#xff1a;Unreal Engine 5.1.1 IDE&#xff1a;JetBrains Rider 2023.2.1 语言&#xff1a;C 工具&#xff1a;DB Browser for SQLite SQLite数据类型&#xff1a; //INTEGER TEXT BLOB REAL NUMERIC/*integer…
阅读更多...
使用Pilotfish扩展Sui执行能力

使用Pilotfish扩展Sui执行能力

Pilotfish第一个多机智能合约执行引擎&#xff0c;使Sui网络的验证节点可以利用多台机器&#xff0c;并在负载增加时自动扩展以执行更多的交易。这一目标实现不会影响可靠性或功能完整性。 Pilotfish可以从内部执行机器的故障中恢复&#xff0c;并支持Sui的全面动态操作。其流…
阅读更多...
TCP粘包是怎么回事，如何处理?

TCP粘包是怎么回事，如何处理?

还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#xff0c;webgl&#xff0c;ech…
阅读更多...
Wafer的T7 Code是什么，怎么来的

Wafer的T7 Code是什么，怎么来的

1、T7 Code是什么 在半导体Cim系统中，waferstart 业务需要支持 Sorter 读取 Wafer 的 T7 Code，与 MES 的 Wafer ID 进行绑定，以便向 前追溯 Wafer 历史，那么问题来了，T7code 是什么 Wafer的T7 Code是一种背面刻号，用于标识双面抛光的晶圆。这种标记采用二维矩阵代码符号，…
阅读更多...
海外问卷调查保姆级教程，看完这篇就不用再找别的了

海外问卷调查保姆级教程，看完这篇就不用再找别的了

大家好&#xff0c;我是橙河老师&#xff0c;最近很多小伙伴在问海外问卷调查怎么做&#xff1f;这篇文章就从环境搭建到做问卷的过程&#xff0c;全部展示给大家&#xff0c;希望大家能够学会。 这个是保姆级教程了&#xff0c;争取一次就把大家教会&#xff0c;多看教程&…
阅读更多...
Docker服务

Docker服务

任务描述&#xff1a;请采用podman&#xff0c;实现有守护程序的容器应用。 &#xff08;1&#xff09;在linux2上安装docker-ce&#xff0c;导入rocky镜像。 &#xff08;2&#xff09;创建名称为skills的容器&#xff0c;映射本机的8000端口到容器的80端口&#xff0c;在容…
阅读更多...
Object类-equals方法

Object类-equals方法

细节&#xff1a;1、equals方法默认先比较两个对象的地址是否相同&#xff08;即两个对象是否是同一个对象&#xff09;&#xff0c;如果是同一个对象返回true&#xff1b;如果不是同一个对象&#xff0c;返回false。 2、子类中重写父类的equals方法后&#xff0c;比较的是两个…
阅读更多...
如何算通过了PMP考试？

如何算通过了PMP考试？

一般在PMP考试结束后的6-8周便可以在PMI网站查询到成绩&#xff0c;或者查看PMI发送给考生的成绩邮件。如果成绩上显示“PASS”就是通过&#xff0c;“FAIL”就是没通过。 需要注意的是你看到的成绩不是直接的分数&#xff0c;而是用A\T\B\N表示的&#xff0c;即Above Target(…
阅读更多...
2024银行业最新数字化转型的方法与路径

2024银行业最新数字化转型的方法与路径

银行业数字化转型是一场由思想到行动、由顶层到基层、由内部到外部的深刻变革&#xff0c; 需要科学方法论的指导。在推动体系性重塑、开放生态建设、业务科技融合、基础设施升 级以及体制机制变革等探索和实践中&#xff0c;银行业逐步形成从顶层设计到数字化能力建设&#xf…
阅读更多...
JavaEE 初阶篇-深入了解多线程安全问题（指令重排序、解决内存可见性与等待通知机制）

JavaEE 初阶篇-深入了解多线程安全问题（指令重排序、解决内存可见性与等待通知机制）

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 指令重排序概述 1.1 指令重排序主要分为两种类型 1.2 指令重排序所引发的问题 2.0 内存可见性概述 2.1 导致内存可见性问题主要涉及两个方面 2.2 解决内存可见性问…
阅读更多...
C语言----预处理（详解）

C语言----预处理（详解）

好了书接上回。我在讲编译与链接的时候写过宏和条件建议。我说会在下一篇博客中讲解&#xff0c;那么来了。今天我们来详细的讲讲预处理。宏与条件编译也在其中&#xff0c;那么我们现在就来好好会会这个预处理吧。 预定义符号 关于预定义符号&#xff0c;我暂时只知道几个。并…
阅读更多...
安装kubesphere的 devops 插件报错

安装kubesphere的 devops 插件报错

安装kubesphere的 devops 插件报错&#xff1a; ks-minio 报错&#xff1a; TASK [common : Kubesphere | Check minio] *************************************** changed: [localhost]TASK [common : Kubesphere | Deploy minio] ************************************** fa…
阅读更多...
期货开户分析的三个基本要素

期货开户分析的三个基本要素

我常用的交易系统为概率分析系统&#xff0c;具备的三个基本要素与三个基本原则&#xff1a; 1、行情研判规则。这是最基础的&#xff0c;你必须首先用交易系统对行情有一个正确的判断。 2、进出场规则。在进出场规则当中&#xff0c;我个人更看重出场规则。因为实际上&#…
阅读更多...
腾讯云容器与Serverless的融合：探索《2023技术实践精选集》中的创新实践

腾讯云容器与Serverless的融合：探索《2023技术实践精选集》中的创新实践

腾讯云容器与Serverless的融合&#xff1a;探索《2023技术实践精选集》中的创新实践 文章目录 腾讯云容器与Serverless的融合&#xff1a;探索《2023技术实践精选集》中的创新实践引言《2023腾讯云容器和函数计算技术实践精选集》整体评价特色亮点分析Serverless与Kubernetes的…
阅读更多...
什么是智慧公厕？智慧城市下的智慧公厕有什么功能和特点？

什么是智慧公厕？智慧城市下的智慧公厕有什么功能和特点？

随着科技的不断进步和城市化的加快发展&#xff0c;智慧城市已经成为我们生活中的一部分。而在智慧城市的建设中&#xff0c;智慧公厕作为城市基础设施的重要组成部分发挥着重要的作用。那么什么是智慧公厕&#xff1f;智慧公厕是针对公共厕所的日常使用、运行、管理、运营等过…
阅读更多...
数据科学薪酬分析项目

数据科学薪酬分析项目

注意&#xff1a;本文引用自专业人工智能社区Venus AI 更多AI知识请参考原站 &#xff08;[www.aideeplearning.cn]&#xff09; 项目简介 《数据科学薪酬分析》是一个全面的分析项目&#xff0c;旨在探索和解释数据科学领域的薪酬趋势。通过分析607份不同工作年份、经验水平…
阅读更多...
跑通飞浆平台的MTMCT 跨镜跟踪示例

跑通飞浆平台的MTMCT 跨镜跟踪示例

想跑通飞浆平台的MTMCT跨镜跟踪示例&#xff0c;真的是难上加难啊&#xff01; 改了几处代码&#xff0c;可以顺利跑通了&#xff0c;特此记录&#xff1a; 第一处&#xff1a;不要拉主线的代码&#xff0c;改成 !git clone https://gitee.com/paddlepaddle/PaddleDetection…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023