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

安装

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
### 在 Vite + Vue3 + TypeScript 项目中实现 PostCSS 将 `var` 中定义的 16px 转换为 rem #### 配置 Vite 和 PostCSS 要在 Vite + Vue3 + TypeScript 项目中实现将 CSS 变量中的 `16px` 转换为 `rem`,需要正确配置 PostCSS 插件。以下是具体步骤: 在项目的 `vite.config.ts` 文件中添加以下内容: ```typescript import { defineConfig } from &#39;vite&#39;; import vue from &#39;@vitejs/plugin-vue&#39;; import autoprefixer from &#39;autoprefixer&#39;; import postcssPxToRem from &#39;postcss-pxtorem&#39;; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], css: { postcss: { plugins: [ autoprefixer({ overrideBrowserslist: [&#39;Android 4.1&#39;, &#39;iOS 7.1&#39;, &#39;Chrome > 31&#39;, &#39;ff > 31&#39;, &#39;ie >= 8&#39;], }), postcssPxToRem({ rootValue: 16, // 根元素字体大小设置为 16px unitPrecision: 5, // REM 单位的小数精度 propList: [&#39;*&#39;], // 所有属性都将被转换 replace: true, // 替换包含 rems 的规则,而不是添加回退 mediaQuery: false, // 禁用媒体查询中的 px 转换 minPixelValue: 0, // 设置要替换的最小像素值 }), ], }, }, }); ``` 此配置确保了任何使用 CSS 变量的地方都会按照根元素字体大小 (`16px`) 进行 `rem` 转换[^2]。 --- #### 示例代码 假设有一个 CSS 文件如下: ```css :root { --base-font-size: 16px; } body { font-size: var(--base-font-size); margin: calc(var(--base-font-size) * 2); /* 应该转换为 2rem */ } ``` 经过上述 PostCSS 配置处理后,生成的结果将是: ```css body { font-size: 1rem; margin: 2rem; } ``` 这里的重点在于 `postcss-custom-properties` 插件会先解析所有的 CSS 变量,并将其替换为具体的值,随后由 `postcss-pxtorem` 插件负责将这些值转换为 `rem` 单位[^1]。 --- #### 处理行内样式 由于 `postcss-pxtorem` 对行内样式无法自动转化,需定义一个辅助函数用于手动转换。可以在项目中创建一个工具文件 `src/utils/rem.ts`,并导出以下函数: ```typescript export function px2rem(px: string): string { if (/%/i.test(px)) { return px; // 如果是百分比单位,则直接返回原值 } else { return `${parseFloat(px) / 16}rem`; // 按照根元素字体大小 16px 转换 } } ``` 接着,在 Vue 组件中全局注册该方法以便随时调用: ```typescript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import { px2rem } from &#39;@/utils/rem&#39;; const app = createApp(App); app.config.globalProperties.$px2rem = px2rem; app.mount(&#39;#app&#39;); ``` 最后,在模板中可以直接使用 `$px2rem` 方法完成行内样式的转换: ```html <template> <div :style="{ fontSize: $px2rem(&#39;24px&#39;) }">测试</div> </template> ``` --- #### 其他注意事项 1. **性能优化**:尽管 PostCSS 是静态工具链的一部分,但在大型项目中频繁使用复杂插件可能会增加构建时间。 2. **兼容性验证**:确保目标浏览器支持 CSS 变量及相关特性。 3. **调试技巧**:在开发环境中启用源码映射功能,方便追踪编译前后的差异。 --- ### 总结 通过合理配置 Vite 和 PostCSS 插件,可以轻松实现将 CSS 变量中的固定数值(如 `16px`)转换为相对单位 `rem`。同时针对行内样式提供了一种灵活的手动解决方案,满足不同场景需求。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值