安装
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/index/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