vite + vue3 + ts 开发chrome扩展插件

原创已于 2025-07-03 11:51:06 修改 · 988 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#chrome #前端 #typescript

于 2024-09-06 18:16:58 首次发布

Chrome 扩展插件专栏收录该内容

1 篇文章

订阅专栏

安装

npm create vite@latest

输入项目名称

? Project name: » cloudflare

选择基础版Vue

√ Project name: ... cloudflare
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

选择TypeScript

√ Project name: ... cloudflare
√ Select a framework: » Vue
? Select a variant: » - Use arrow-keys. Return to submit.
>   TypeScript
    JavaScript
    Customize with create-vue ↗
    Nuxt ↗

然后根据提示操作

Need to install the following packages:
create-vite@5.5.2
Ok to proceed? (y) y
√ Project name: ... cloudflare
√ Select a framework: » Vanilla
√ Select a variant: » TypeScript

Scaffolding project in D:\test\cloudflare...

Done. Now run:

  cd cloudflare
  npm install
  npm run dev

chrome extention

创建index和popup目录

创建目录，复制src目录下的app.vue和main.ts内容到文件中

src\views\index\app.vue
src\views\index\main.ts

src\views\popup\app.vue
src\views\popup\main.ts

创建index.html和popup.html

根目录

popup.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="icon" type="image/svg+xml" href="../src/assets/vue.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>云登浏览器Cloudflare验证</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="./src/views/popup/main.ts"></script>
  </body>
</html>

创建background.ts

src\background.ts

创建content.ts

src\content.ts

manifest配置文件

manifest/manifest.json

{
    "manifest_version": 3,
    "name": "Cloudflare",
    "description": "绕过Cloudflare安全验证 ",
    "version": "1.0",
    "icons": {
        "16": "images/cloudflare.png",
        "32": "images/cloudflare.png",
        "48": "images/cloudflare.png",
        "128": "images/cloudflare.png"
    },
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/cloudflare.png",
            "32": "images/cloudflare.png",
            "48": "images/cloudflare.png",
            "128": "images/cloudflare.png"
        }
    },
    "permissions": [
        "scripting",
        "activeTab"
    ]
}

安装

npm install --save-dev @types/node
npm install vite-plugin-static-copy --save-dev

vite.config.ts

import { defineConfig } from "vite";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue";
import { viteStaticCopy } from "vite-plugin-static-copy";


// 定义页面入口对象
const pages = {
  main: resolve(__dirname, "./index.html"), // 主页面
  popup: resolve(__dirname, "./popup.html"), // 弹窗页面
  background: resolve(__dirname, "./src/background.ts"),
  content: resolve(__dirname, "./src/content.ts"),
};
const output = () => {
  return {
    assetFileNames: '[ext]/[name]-[hash].[ext]',
    entryFileNames: (chunkInfo: any) => {
      if (["background", "content"].includes(chunkInfo.name)) {
        return '[name].js';
      }
      return 'js/[name].js';
    },
    chunkFileNames: (chunkInfo: any) => {
      if (["background", "content"].includes(chunkInfo.name)) {
        return '[name].js';
      }
      return `js/[name]-[hash].js`;
    },
    manualChunks: (path: string) => {
      if (path.includes("src/background.ts")) {
        return "background";
      }
      if (path.includes("src/content.ts")) {
        return "content";
      }
    },
  };
};
// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [
    vue(),
    viteStaticCopy({
      targets: [
        {
          src: "manifest/manifest.json",
          dest: ".", 
        },
      ],
    })
  ],
  build: {
    rollupOptions: {
      input: pages,
      output: output(),
    },
    minify: true,
  },
});

vite-env.d.ts

防止 import App from ‘./App.vue’ 报错

declare module "*.vue" {
  import type { DefineComponent } from "vue";

  const vueComponent: DefineComponent<{}, {}, any>;

  export default vueComponent;
}

打包

npm run build

> cloudflare@0.0.0 build
> vue-tsc -b && vite build

vite v5.4.3 building for production...
✓ 15 modules transformed.
dist/popup.html                                 0.48 kB │ gzip:  0.35 kB
dist/index.html                                 0.56 kB │ gzip:  0.36 kB
dist/.vite/manifest.json                        0.78 kB │ gzip:  0.23 kB
dist/background.js                              0.03 kB │ gzip:  0.05 kB
dist/content.js                                 0.03 kB │ gzip:  0.05 kB
dist/js/main.js                                 0.20 kB │ gzip:  0.18 kB
dist/js/popup.js                                0.20 kB │ gzip:  0.18 kB
dist/js/_plugin-vue_export-helper-Bwh1C-qD.js  58.31 kB │ gzip: 23.22 kB
[vite-plugin-static-copy] Copied 1 items.
✓ built in 592ms

使用

开发者模式，拖动文件夹到面板

在这里插入图片描述

可以通过图标和链接直接访问
在这里插入图片描述

chrome-extension://***id***/popup.html
chrome-extension://***id***/index.html