如何在 Chrome 扩展中使用 fontawesome？

Posted

技术标签:

【中文标题】如何在 Chrome 扩展中使用 fontawesome？【英文标题】：How to use fontawesome in Chrome Extension? 【发布时间】：2017-05-05 09:18:23 【问题描述】：

我正在开发一个显示在特定网站上的 Google Chrome 扩展程序。我想在我的 chrome 扩展中使用 Fontawesome。 当我尝试加载字体时，出现错误GET chrome-extension://invalid/ net::ERR_FAILED。

在样式表中，webfonts 包含在@font-face 中，就像这样。

src: url('chrome-extension://__MSG_@@extension_id__/Fonts/fontawesome-webfont.eot?v=4.7.0');

我也尝试过直接嵌入我的扩展 id，但它不起作用。

我的 manifest.json：

"web_accessible_resources": ["Fonts/*.*", "*.ttf", "*.eot", "*.svg", "*.woff", "*.woff2"],

如何解决？

【问题讨论】：

你有没有像 npm 项目一样创建它？你有 package.json 文件吗？ @NuwanKarunarathna 你在开玩笑吗？他正在制作一个 Chrome 扩展程序，而不是一个 javascript 独立项目...... @Noctumsempra 那又怎样？你认为 Chrome 扩展不能有 package.json 文件或者它不能是一个独立的 javascript 项目吗？你开发了多少个 chrome 扩展？ 【参考方案1】：

这就是我设法在我的 chrome 扩展中获得 fontawesome (4.7) 的本地（离线）实例的方法：

1) 下载字体文件（FontAwesome.otf、fontawesome-webfont.eot、fontawesome-webfont.svg、fontawesome-webfont.ttf、fontawesome-webfont.woff、fontawesome-webfont.woff2）到fonts/

2) 将font-awesome.min.css 下载到css/ 并替换此文件中的所有url chrome-extension://__MSG_@@extension_id__/fonts/[...]。

3) 像这样更新您的manifest.json：


    ...
    "content_scripts":          [
        
           ...
            "css":        [
                "css/font-awesome.min.css",
                ...
            ]
            ...
        
    ],
    ...
    "web_accessible_resources": [
        ...
        "fonts/FontAwesome.otf",
        "fonts/fontawesome-webfont.eot",
        "fonts/fontawesome-webfont.svg",
        "fonts/fontawesome-webfont.ttf",
        "fonts/fontawesome-webfont.woff",
        "fonts/fontawesome-webfont.woff2",
    ]

这使得 fontawesome 可以离线使用（你不需要任何 fontawesome-js）。

【讨论】：

【参考方案2】：

我想在 @Thomas Kekeisen answer 上添加 FontAwesome 版本 5（当前版本为 5.13.0）的更新答案。 另外，我想尽量减少事情，所以：

    我只会参考woff2，since there's no reason to use another format。 我只会参考 FontAwesome 的regular 样式（这是他们的5 styles 之一）。

因此，如果您使用woff2 以外的格式，或regular 以外的样式，只需以相同的方式对其应用以下内容即可。

因此，为了在 Chrome 扩展中使用 FontAwesome，请执行以下操作：

    Download FontAwesome .zip file（这是直接下载链接，你可以访问下载页面here）。

    解压.zip，只取需要的，在我们的例子中是：

    (a)css/fontawesome.min.css (b)css/regular.min.css (c)webfonts/fa-regular-400.woff2

    注意：如果您使用的是css/all.min.js，它将同时替换 (a) 和 (b)。

    可选，让我们的生活更轻松：

    在您的 Chrome 扩展根文件夹下，创建文件夹 css 和 webfonts 以模仿 FontAwesome 结构，并将上面列出的文件移动到这些文件夹中。 您的文件夹结构应如下所示：

    your-extension
 |- css
   |- fontawesome.min.css
   |- regular.min.css
 |- webfonts
   |- fa-regular-400.woff2

    在css/regular.min.css 内部，使用以下内容覆盖（是的，只是覆盖它）@font-face 媒体样式：

    @font-face 
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display:block;
  src: url("chrome-extension://__MSG_@@extension_id__/webfonts/fa-regular-400.woff2");

    注意：再次提醒我，我以regular 样式为例，所以如果您使用其他样式，请确保@font-face.src 属性具有正确的值。

    如下更新您的manifest.json：

    
  ...
  "content_scripts": [
     ...
     "css": [
        "css/fontawesome.min.css",
        "css/regular.min.css",
     ]
     ...
  ],
  ...
  "web_accessible_resources": [
     ...
    "css/fontawesome.min.css",
    "css/regular.min.css",
    "webfonts/fa-regular-400.woff2", // or: "webfonts/*" 
  ]

    注意：需要将.css 路径添加到"content_scripts" 和"web_accessible_resources" 中。

【讨论】：

感谢您提供非常有用且详细的帖子。想根据我目前的测试添加这一点，但清单的 web_accessible_resources 部分不需要 .css 文件。 就我而言，我尝试为弹出窗口设置 fontAwesome，所以我只下载了 all.min.css 和所有 .woff2 文件（atm of typing - fontawesome-5.15.2 - webfonts 文件夹中的 3 个文件) 我把它们放到 myFolder/css/all.min.css 和 myFolder/webfonts/ 3 .woff2 文件中然后在我的弹出窗口中我链接了 all.min.css 文件的位置：<link href="/myFolder/css/all.min.css" rel="stylesheet"> 你不需要放任何东西如果您只想在弹出窗口中使用它，请在 manifest.json 中。另一种解释：docs【参考方案3】：

最简单但可怕的方法是下载 Fontawesome 并直接包含它

curl -o fontawesome.js "https://use.fontawesome.com/840a321d95.js"

然后添加到你需要的地方

<script src="fontawesome.js"></script>

【讨论】：

这也适用于 chrome 扩展的 manifest.json 内容脚本。 这在 twitter.com 上加载扩展时不起作用。我在控制台中看到的错误'拒绝加载字体'use.fontawesome.com/releases/v4.7.0/fonts/…'，因为它违反了以下内容安全策略指令：“font-src twitter.com https://*.twimg.com 数据：ton.twitter.com @ 987654324@maxcdn.bootstrapcdn.comnetdna.bootstrapcdn.com‘自我’”。` 我觉得已经不行了，谁能更新一下？【参考方案4】：

如果您需要使用 Font Awesome 一个 Chrome 扩展的内容脚本（不是 popup.html），您可以执行以下操作：

下载https://use.fontawesome.com/840a321d95.js，将其重命名为fontawesome.js，并将其包含在您的扩展目录中，如@wesdotcool 的回答中所述。

然后将以下内容添加到manifest.json：


    "manifest_version": 2,
    "content_scripts": [
        
            "js": ["fontawesome.js"]
        
    ],

【讨论】：

这在 twitter.com 上加载扩展时不起作用。我在控制台中看到的错误'拒绝加载字体'use.fontawesome.com/releases/v4.7.0/fonts/…'，因为它违反了以下内容安全策略指令：“font-src twitter.com https://*.twimg.com 数据：ton.twitter.com @ 987654324@maxcdn.bootstrapcdn.comnetdna.bootstrapcdn.com‘自我’”。`【参考方案5】：

我成功地在我的 chrome 扩展中使用 Sass 使用 Font Awesome。

使用 sass 将 FontAwesome 5.11.x 集成到您的 chrome 扩展程序中的步骤：

    转到Font Awesome Download page 下载网络特定文件的本地副本。 将SCSS 文件夹复制到您的样式文件夹中。 将整个 webfonts 文件夹复制到 assets 文件夹中。 打开字体 awesome scss/variables.scss 并编辑 $fa-font-path 变量以指向您放置 webfonts 文件夹的位置。

您需要使用chrome-extension://__MSG_@@extension_id__/ 来查找扩展文件夹的路径。

对我来说，字体文件的路径是 - extension/chrome/assets/font-awesome， 所以我把$fa-font-path改成了chrome-extension://__MSG_@@extension_id__/assets/font-awesome。

    通过在主 SCSS 文件中添加 @import "scss/fontawesome.scss" 来导入 Font Awesome。此外，在您的主 SCSS 文件中导入一种或多种样式 @import "scss/solid.scss"。如果您使用的是常规字体，请导入 regular.scss。

执行您的网络扩展程序，您应该能够使用字体真棒图标。

【讨论】：

以上是关于如何在 Chrome 扩展中使用 fontawesome？的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Chrome 扩展中使用 Javascript 获取文件大小？

在 Chrome 扩展程序中，如何确保在使用 chrome-promise 的下一个承诺之前解决上一个承诺？

在 chrome 扩展中，如何从当前 chrome 用户以外的 gmail 用户获取访问令牌？

如何与电子中的chrome扩展背景页面通信？

如何从 chrome 扩展中读取文件？

如何让 ui-slider 在 chrome 的 imacros 扩展中运行？