logo标签列表

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

vue.jsgoogle-chrome-extensionvuetify.jsvue-clibrowser-extension
4

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

目前一切顺利。

现在我想把Vuetify加入到这个项目中。
我尝试过官方插件，但是扩展弹出窗口中没有任何内容显示。
我尝试了CDN方法，但是当我尝试将Vuetify添加到Vue实例时，会提示未定义的错误。

有什么想法吗？

另外重要的一点：如果可能的话，我真的非常希望不使用CDN方法。是否有一种方法可以使用npm install来安装运行Vuetify所需的CSS和字体？

你可能需要将Vuetify添加到你的构建配置中（package.json等），请参考文档。 - wOxxOm
文档中唯一相关的部分是关于使用CLI的，但我猜这可能是由于两个插件之间的冲突导致的。其他方法包括Nuxt和WebPack，但我都没有使用过。 - lilotop
5个回答
1

对于任何想要完全本地构建而不使用任何CDN的人

已经具备Vue + Vuetify + Material Design Icons

我创建了这个仓库，最初是从Kocal/vue-web-extension的仓库克隆而来

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文件夹中。
1
关于难点（第4点），以下是您可以做的事情。
首先，确保您的Webpack可以加载CSS文件（我认为您需要使用mini-css-extract-plugin）。
然后只需使用以下命令导入Vuetify和Material Design图标：
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';
1

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

明白了！
这其实并不难，但你需要注意常规应用程序和由Vue插件创建的浏览器扩展之间的区别。

主要区别如下：

  1. 扩展的每个部分（弹出窗口、选项卡等）都是全新的、隔离的Vue应用程序。
  2. 用于扩展部分的HTML模板不是public/index.html

说明：

  1. 按照上面的OP指示创建项目。
  2. 安装Vuetify npm包： npm install vuetify
  3. 在每个要使用的部分的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 中添加一些规则？我正在使用这个起始模板 https://github.com/Kocal/vue-web-extension。 - osherez
0
0
如果您想要一个离线版本：
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

我认为这是一个好方法，不需要编写任何代码。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接