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

Question

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

到目前为止，一切都很好。

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

有什么想法吗？

同样重要：如果可能的话，我真的更愿意不使用CDN方法。有没有一种方法可以使用npm install安装运行Vuetify所需的CSS和字体？

Answer 1

关于困难部分（第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';

Answer 2

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

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

主要区别在于：

扩展的每个部分（弹出窗口，选项，选项卡等）都是一个全新的隔离Vue App。
用于扩展部分的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变体的想法，请分享。

Answer 3

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

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

Answer 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

我认为这是一种好方法，无需编写任何代码。

Answer 5

对于任何想要没有任何 cdns 的完整本地构建

已经有 Vue + Vuetify + Material Design 图标

我制作了这个最初从 Kocal/vue-web-extension 的仓库克隆的仓库

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 文件夹

如何创建基于Vuetify的浏览器扩展？

5 个答案:

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

说明：