【问题标题】：How can I create a Vuetify based browser extension?如何创建基于 Vuetify 的浏览器扩展？
【发布时间】：2020-03-15 10:52:01
【问题描述】：

我正在使用 Vue CLI UI。
我创建了一个项目并添加了vue-cli-plugin-browser-extension

到目前为止一切顺利。

现在我正在尝试将 Vuetify 添加到组合中。
我尝试使用官方插件，但扩展的弹出窗口中没有显示任何内容。
我尝试了 CDN 方法，但是当我尝试将 Vuetify 添加到 Vue 实例时，我收到一条错误消息，提示未定义 Vuetify。

有什么想法吗？

同样重要：如果可能的话，我真的更希望不使用 CDN 方法。有没有办法使用npm install 来安装运行 Vuetify 所需的 css 和字体？

【问题讨论】：

您可能需要将 Vuetify 添加到您的构建配置（package.json 等），请参阅the documentation。
文档中唯一相关的部分是关于使用 CLI - 我猜这不起作用，因为两个插件之间存在冲突。其他方法还有 Nuxt 和 WebPack，我都没用。

标签： vue.js google-chrome-extension vuetify.js vue-cli browser-extension

【解决方案1】：

NPM 解决方案（使用 CDN 引入 css 和字体）

知道了！
毕竟这并不难，但您需要注意常规应用程序和 Vue 插件创建的浏览器扩展之间的区别。

主要区别在于：

扩展的每个部分（弹出窗口、选项、选项卡等）都是一个全新且独立的 Vue 应用程序。
扩展部分使用的html模板是不是 public/index.html

说明：

按照上述 OP 中的说明创建项目。
安装 Vuetify npm 包： npm install vuetify
在您打算使用的每个部分的每个 main.js 中，添加 Vuetify：

    import Vue from 'vue'
    import App from './App.vue'

    import Vuetify from "vuetify";

    Vue.use(Vuetify);

    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      render: h => h(App)
    });

现在查找文件public/browser-extension.html 并在标题部分添加这些行：

  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

就是这样！

如果您对如何将项目 #4 转换为 npm 变体有任何想法，请分享。

【讨论】：

嘿，感谢这个帖子帮助了我:)。如果我需要向webpack.config 添加一些规则，有什么想法吗？我正在使用这个入门样板 github.com/Kocal/vue-web-extension

【解决方案2】：

关于困难的部分（第 4 点），这是你可以做的。

首先，确保你的 Webpack 可以加载 css 文件（我认为你需要mini-css-extract-plugin）。

然后只需使用以下命令导入 Vuetify 和 Material 设计图标：

import 'vuetify/dist/vuetify.min.css';
import 'material-design-icons-iconfont/dist/material-design-icons.css';
// or if you like FontAwesome:
import '@fortawesome/fontawesome-free/css/all.css';

这是最简单的部分。现在要获取 Roboto 字体，您需要下载字体样式 https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900 并为其中的每种字体下载它并将 url 路径替换为本地路径。为此，我编写了可以使用 Node 执行的简单脚本：

const fetch = require("node-fetch");
const fs = require("fs");
const mkdirp = require('mkdirp');

const fontDirPath = './fonts/Roboto';
mkdirp.sync(fontDirPath);

(async () => {
  const text = await (await fetch('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900', {
    headers: {
      // we need to supply user-agent header because Google will return different (insufficient) response without it
      'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:78.0) Gecko/20100101 Firefox/78.0',
    }
  })).text()

  const fontCss = text
    .split('\n')
    .map(line => {
      const hasURL = line.includes('url(https');
      const [, url, fileName] = line.match(new RegExp('(https://.*/(.*.woff2))\\)')) || [];
      if (hasURL) downloadFile(url, `${fontDirPath}/${fileName}`);
      return hasURL ?
        line.replace(url, fileName):
        line;
    })
    .join('\n');
  fs.writeFileSync(`${fontDirPath}/font_roboto.css`, Buffer.from(fontCss, 'utf-8'));
})()

async function downloadFile(url, path) {
  const res = await fetch(url);
  const fileStream = fs.createWriteStream(path);
  await new Promise((resolve, reject) => {
    res.body.pipe(fileStream);
    res.body.on('error', reject);
    fileStream.on('finish', resolve);
  });
}

脚本可以改进，现在它只查找“woff2”字体。

然后导入您下载和编辑的 CSS 文件：

import './fonts/Roboto/font_roboto.css';

【讨论】：

【解决方案3】：

另一种选择是切换到 Vue / Quasar 框架，包括支持创建浏览器扩展...

https://quasar.dev/quasar-cli/developing-browser-extensions/introduction

【讨论】：

【解决方案4】：

如果您想要离线版本：

vue create my-app
cd my-app
vue add vuetify

然后你回答问题：

Choose a preset: 
> Configure (advanced)

Use fonts as a dependency (for Electron or offline)? 
> Yes

我觉得这个方法不错，不用写任何代码。

【讨论】：

【解决方案5】：

任何人都想在没有任何cdns的情况下完成本地构建

已经有了 Vue + Vuetify + Material Design 图标

我创建了这个 repo，它最初是从 Kocal/vue-web-extension 的 repo 中克隆出来的

https://github.com/talal424/chrome-extension-vue-vuetify/

克隆 repo，然后安装依赖项并构建

npm i

# for production
npm run build

# for development ( there is no HMR )
npm run dev

你可以加载从文件夹/dist/解压的扩展

编辑 webpack.config.js 以添加更多入口点

编辑 /src/popup/popup.js 以添加 vuex 或 vue-router

清单文件为/src/manifest.json，构建后将复制到dist文件夹

【讨论】：