【进阶】chrome插件便捷应用vue/antd/tailwin

2024-08-10 本文已影响0人 KatherineLo

经过如何开发一个chrome插件的学习，我们已经可以完整地开发一个chrome插件了。

但是我们知道，由于chrome插件无法require/import，所以在拆分文件以及引用npm包时有诸多的不方便，更无法便捷地使用一些UI组件库，那么应该做点儿什么呢

可以通过import/export直接引用或导出模块，更加便捷地分文件梳理项目结构，可以方便地引用如lodash之类的包
可以使用Vue开发弹窗页面（包括分页）
弹窗页可以方便地使用UI库，如vue-antd、tailwindcss等

Let's do it

一、创建基础项目

manifest.json

{
  "name": "标题",
  "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打包content.js

删除content.js文件，创建src/content/index.js文件

src/content/index.js

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

安装webpack

yarn add webpack -D

除了将content打包到之外，我们还需要将manifest.json文件直接搬运到打包的文件夹，所以我们还需要安装一个用于拌匀的插件

yarn add copy-webpack-plugin -D

创建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',  // 根据入口文件对应命名，这种写法方便有多个入口的时候自动命名
    path: path.resolve(__dirname, 'dist')  // 打包到的目标文件夹
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: 'manifest.json', to: '' },  // 搬运manifest.json到目标文件夹，这里将会直接搬运到出口的dist文件夹
      ],
    }),
  ],
};

写build命令

package.json

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

现在我们可以在src/content/index.js中引入lodash尝试在文件中引用npm包

yarn add lodash

src/content/index.js

import _ from 'lodash';


console.log('1到99之内的随机数：', + _.random(1, 99));

完成，build完之后将dist文件夹拉进chrome扩展实际查看一下效果，看看效果

yarn build

如何安装chrome扩展详见如何开发一个chrome插件
build的过程中webpack会提示安装 webpack-cli，这个时候回答yes安装就可以了

image.png

三、使用vue开发popup页面

在别处使用命令

npm create vue

创建一个vue项目，过程中会询问项目名，是否使用typescript，eslint，单元测试之类的，我们可以根据实际情况选择，这里建议可以都选否，这样得出一个比较简洁的vue结构。

将vue项目中的package.json的依赖部分复制过来，方便安装依赖

"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也复制过来，与原来的build结合写一下，由于vite打包的时候会将dist包删除再重新打包，但是webpack不会，所以我们先执行vue的打包，然后再打包content

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

将 vite.config.js 和 jsconfig.json 和 .gitignore 复制过来，前两个文件是vue用于打包的配置文件

再创建 src/popup 文件夹，将vue项目src文件夹下的文件全部复制到popup文件夹下

将vue项目index.html中的内容复制，全部替换到chrome插件项目中的popup.html

将其中的引入script修改为

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

同样的将 vite.config.js 中引入src的内容修改为src/popup。并添加build块变更入口文件名

vue默认的入口文件名是index.html，这里依照chrome插件的习惯将其修改为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的打包方式已经会将popup.html文件打包进dist文件夹了，不需要webpack单独拌匀，所有我们将webpack.config.js文件中的那一行删掉

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

好，我们 yarn 一下安装好依赖，然后build好dist之后，将dist文件夹拉进chrome扩展实际查看一下效果

yarn build

image.png

达到预期效果

四、在popup中使用antd

在项目中安装antd

yarn add ant-design-vue

将antd添加到项目中，导入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以及创建配置文件

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

修改 tailwind.config.js 文件配置，将 popup.html 和 src/popup 文件夹下的文件囊括进范围内

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

将tailwind引用添加进入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

总结，一个可以使用npm包，vue，tailwindcss，antd的chrome插件基础模板就完成了。

【进阶】chrome插件便捷应用vue/antd/tailwin

一、创建基础项目

二、使用webpack打包content.js

三、使用vue开发popup页面

四、在popup中使用antd

五、在popup中tailwindcss

END

猜你喜欢

热点阅读