【進(jìn)階】chrome插件便捷應(yīng)用vue/antd/tailwindcss/各種npm包

經(jīng)過 如何開發(fā)一個chrome插件 的學(xué)習(xí)，我們已經(jīng)可以完整地開發(fā)一個chrome插件了。

但是我們知道，由于chrome插件無法require/import，所以在拆分文件以及引用npm包時有諸多的不方便，更無法便捷地使用一些UI組件庫，那么應(yīng)該做點(diǎn)兒什么呢

  1. 可以通過import/export直接引用或?qū)С瞿K，更加便捷地分文件梳理項目結(jié)構(gòu)，可以方便地引用如lodash之類的包
  2. 可以使用Vue開發(fā)彈窗頁面（包括分頁）
  3. 彈窗頁可以方便地使用UI庫，如vue-antd、tailwindcss等

Let's do it

一、創(chuàng)建基礎(chǔ)項目

manifest.json

{
  "name": "標(biāo)題",
  "description": "描述",
  "version": "1.0.0",
  "manifest_version": 3,
  "permissions": [
    "storage",
    "activeTab"
  ],
  "action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [
        "https://www.baidu.com/*"
      ],
      "js": [
        "content.js"
      ]
    }
  ]
}

popup.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

content.js

console.log('to do something...')

二、使用webpack打包c(diǎn)ontent.js

刪除content.js文件，創(chuàng)建src/content/index.js文件

src/content/index.js

console.log('to do something...')

安裝webpack

yarn add webpack -D

除了將content打包到之外，我們還需要將manifest.json文件直接搬運(yùn)到打包的文件夾，所以我們還需要安裝一個用于拌勻的插件

yarn add copy-webpack-plugin -D

創(chuàng)建webpack.config.js文件

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');


module.exports = {
  mode: 'production',
  entry: {
    content: './src/content/index.js' // 入口文件
  },
  output: {
    filename: '[name].js',  // 根據(jù)入口文件對應(yīng)命名，這種寫法方便有多個入口的時候自動命名
    path: path.resolve(__dirname, 'dist')  // 打包到的目標(biāo)文件夾
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'manifest.json', to: '' },  // 搬運(yùn)manifest.json到目標(biāo)文件夾，這里將會直接搬運(yùn)到出口的dist文件夾
      ],
    }),
  ],
};

寫build命令

package.json

"scripts": {
  "build": "webpack"
},

現(xiàn)在我們可以在src/content/index.js中引入lodash嘗試在文件中引用npm包

yarn add lodash

src/content/index.js

import _ from 'lodash';


console.log('1到99之內(nèi)的隨機(jī)數(shù)：', + _.random(1, 99));

完成，build完之后將dist文件夾拉進(jìn)chrome擴(kuò)展實際查看一下效果，看看效果

yarn build

如何安裝chrome擴(kuò)展詳見 如何開發(fā)一個chrome插件
build的過程中webpack會提示安裝 webpack-cli，這個時候回答yes安裝就可以了

image.png

三、使用vue開發(fā)popup頁面

在別處使用命令

npm create vue

創(chuàng)建一個vue項目，過程中會詢問項目名，是否使用typescript，eslint，單元測試之類的，我們可以根據(jù)實際情況選擇，這里建議可以都選否，這樣得出一個比較簡潔的vue結(jié)構(gòu)。

將vue項目中的package.json的依賴部分復(fù)制過來，方便安裝依賴

"dependencies": {
  "lodash": "^4.17.21",
  "vue": "^3.4.29"
},
"devDependencies": {
  "@vitejs/plugin-vue": "^5.0.5",
  "vite": "^5.3.1",
  "webpack": "^5.93.0",
  "webpack-cli": "^5.1.4"
}

我們將script里的build也復(fù)制過來，與原來的build結(jié)合寫一下，由于vite打包的時候會將dist包刪除再重新打包，但是webpack不會，所以我們先執(zhí)行vue的打包，然后再打包c(diǎn)ontent

"scripts": {
  "build": "vite build && webpack"
},

將 vite.config.js 和 jsconfig.json 和 .gitignore 復(fù)制過來，前兩個文件是vue用于打包的配置文件

再創(chuàng)建 src/popup 文件夾，將vue項目src文件夾下的文件全部復(fù)制到popup文件夾下

將vue項目index.html中的內(nèi)容復(fù)制，全部替換到chrome插件項目中的popup.html

將其中的引入script修改為

<script type="module" src="/src/popup/main.js"></script>

同樣的將 vite.config.js 中引入src的內(nèi)容修改為src/popup。并添加build塊變更入口文件名

vue默認(rèn)的入口文件名是index.html，這里依照chrome插件的習(xí)慣將其修改為popup.html

resolve: {
  alias: {
    '@': fileURLToPath(new URL('./src/popup', import.meta.url))
  }
},
build: {
  rollupOptions: {
    input: {
      main: './popup.html'
    },
  }
}

jsconfig.json

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/popup/*"
      ]
    }
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

vite的打包方式已經(jīng)會將popup.html文件打包進(jìn)dist文件夾了，不需要webpack單獨(dú)拌勻，所有我們將webpack.config.js文件中的那一行刪掉

plugins: [
  new CopyPlugin({
    patterns: [
      { from: 'manifest.json', to: '' },
      // { from: 'popup.html', to: '' },  這一行刪掉
    ],
  }),
],

好，我們 yarn 一下安裝好依賴，然后build好dist之后，將dist文件夾拉進(jìn)chrome擴(kuò)展實際查看一下效果

yarn build
image.png

達(dá)到預(yù)期效果

四、在popup中使用antd

在項目中安裝antd

yarn add ant-design-vue

將antd添加到項目中，導(dǎo)入antd，然后通過use加載它

src/popup/main.js

import './assets/main.css'
import Antd from 'ant-design-vue'


import { createApp } from 'vue'
import App from './App.vue'


createApp(App).use(Antd).mount('#app')

完成，我們來到src/popup/App.vue，直接是使用一個組件看看效果。這里在頁面中添加了一個按鈕

這里為了后面查看方便，將logo和多余的部分刪掉，并修改一下高寬，這樣截圖可以不用那么長

src/popup/App.vue

<template>
  <header style="width: 300px;">
    <div class="wrapper">
      <HelloWorld msg="You did it!" />
      <a-button>這是一個按鈕</a-button>
    </div>
  </header>
</template>

yarn build & 刷新瀏覽器插件，效果：

image.png

五、在popup中tailwindcss

安裝tailwindcss以及創(chuàng)建配置文件

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

修改 tailwind.config.js 文件配置，將 popup.html 和 src/popup 文件夾下的文件囊括進(jìn)范圍內(nèi)

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./popup.html",
    "./src/popup/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

將tailwind引用添加進(jìn)入css入口文件

通過src/popup/main.js的第一行

import './assets/main.css'

可以看出，入口css是main.css這個文件，那么我們打開這個文件，在最后添加

@tailwind base;
@tailwind components;
@tailwind utilities;

配置完成，實驗一下效果，添加了一個 bg-pink-200

src/popup/App.vue

<template>
  <header style="width: 300px;">
    <div class="wrapper bg-pink-200">
      <HelloWorld msg="You did it!" />
      <a-button type="primary">這是一個按鈕</a-button>
    </div>
  </header>
</template>

build & refresh：

image.png

END

總結(jié)，一個可以使用npm包，vue，tailwindcss，antd的chrome插件基礎(chǔ)模板就完成了。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容