vue-cli3开发Chrome插件实践

最新推荐文章于 2024-10-13 17:03:48 发布

weixin_34404393

最新推荐文章于 2024-10-13 17:03:48 发布

阅读量2.9k

点赞数 3

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5ceca3d96fb9a07eea3252f9

版权

本文介绍如何使用Vue CLI3开发Chrome插件，包括环境搭建、实时刷新、引入Element UI、使用组件、打包配置等。通过示例详细讲解了Vue CLI3在插件开发中的应用，帮助开发者提高效率。

摘要由CSDN通过智能技术生成

之前找了不少如何开发谷歌插件的文章，结果发现都是些很基础的内容，并没有写到如何快速编译打包插件。我就在想为什么不能通过webpack来打包插件呢？如果通过webpack编译的话，就能使开发过程变得更舒服，使文件结构趋向模块化，并且打包的时候直接编译压缩代码。后来发现了vue-cli-plugin-chrome-ext插件，通过这个插件能很方便地用vue-cli3来开发谷歌插件，并能直接引用各种UI框架跟npm插件。

tip：如果你没接触过谷歌插件开发的话建议先看看基础文档：

Chrome 插件开发中文文档

Chrome插件开发全攻略

搭建环境

创建一个vue-cli3项目： vue create vue-extension，对话流程选择默认就行。
进入项目cd vue-extension
安装vue-cli-plugin-chrome-ext插件：vue add chrome-ext,根据安装对话选项设置好。
删除vue-cli3无用文件跟文件夹：src/main.js、src/components

运行项目

npm run build-watch 运行开发环境，对修改文件进行实时编译并自动在根目录下生成dist文件夹，然后在浏览器上加载dist文件夹完成插件安装。(注意：~~修改background文件跟manifest.json文件并不能实时刷新代码，需要重新加载插件才行。~~ 后面已经有实时刷新的解决方法)
npm run build 运行生产环境编译打包，将所有文件进行整合打包。

引入element UI

目前的插件加载到浏览器后弹出页面是这种界面：

平时我们肯定要引入好看的UI框架的，在这里我们可以引入 element-ui，首先安装：

npm install element-ui
复制代码

考虑到插件打包后的文件大小，最后通过按需加载的方式来引入组件，按照element-ui官方的按需加载方法，要先安装babel-plugin-component插件:

npm install babel-plugin-component -D
复制代码

然后，将babel.config.js修改为：

module.exports = {
  presets: [
    '@vue/app'
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
复制代码

接下来修改popup相关文件引入所需组件， src/popup/index.js内容:

import Vue from "vue";
import AppComponent from "./App/App.vue";

Vue.component("app-component", AppComponent);

import {
  Card
} from 'element-ui';

Vue.use(Card);

new Vue({
  el: "#app",
  render: createElement => {
    return createElement(AppComponent);
  }
});
复制代码

src/popup/App/App.vue 内容：

<template>
  <el-card class="box-card">
    <div
      slot="header"
      class="clearfix"
    >
      <span>卡片名称</span>
      <el-button
        style