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

Question

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

到目前为止一切顺利。

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

有什么想法吗？

也很重要： 如果可能的话，我真的更愿意 而不是 使用 CDN 方法。有没有办法使用 npm install 来安装 css 和运行 Vuetify 所需的字体？

Answer 1

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

知道了！
毕竟这并不难，但您需要注意常规应用程序和由 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 并在 header 部分添加这些行：

  <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 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';

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 设计图标

我制作了这个最初克隆自 Kocal/vue-web-extension 的 repo

的 repo

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

克隆存储库然后安装依赖项并构建

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 的浏览器扩展？

How can I create a Vuetify based browser extension?

browser-extension

google-chrome-extension

vue.js

vuetify.js

vue-cli

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

说明：