带有 Typekit 字体的 Google Chrome 扩展程序

Question

我最近开始创建 chrome 扩展，但不幸的是，我没有将 typekit 字体直接引入扩展。

有没有人有这样做的经验或运气？任何帮助将不胜感激。

Answer 1

在将 Typekit 字体用于 Chrome 扩展之前，需要克服两个障碍：

1. 默认情况下，Chrome 会阻止在扩展程序进程中加载​​外部脚本。
2. Chrome 阻止执行内联脚本。
3. Typekit 将回复 403 Forbidden，除非设置了正确的 Referer 标头。

---

我上传了一个演示的源代码到https://robwu.nl/typekit-demo.zip。要查看扩展是否有效，请打开示例扩展的选项页面。

---

对于下一个示例，我创建了一个具有以下设置的 Typekit 套件：

要解决第一个问题，请编辑清单文件并放宽Content Security policy：

"content_security_policy": "script-src 'self' https://use.typekit.net; object-src 'self'"

要解决第二个问题，请将加载程序移至外部文件。您的扩展页面应如下所示：

 <script src="https://use.typekit.net/ekl0khv.js"></script>
 <script src="load-typekit.js"></script>

// load-typekit.js
try{Typekit.load();}catch(e){}

要解决最后一个问题，需要修改Referer header。这段代码需要manifest文件中的webRequest、webRequestBlocking和*://use.typekit.net/权限； chrome.webRequest.onBeforeSendHeaders 用于修改表头。

// background.js
chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
    var requestHeaders = details.requestHeaders;
    for (var i=0; i<requestHeaders.length; ++i) {
        if (requestHeaders[i].name.toLowerCase() === 'referer') {
            // The request was certainly not initiated by a Chrome extension...
            return;
        }
    }
    // Set Referer
    requestHeaders.push({
        name: 'referer',
        // Host must match the domain in your Typekit kit settings
        value: 'https://hjdaoalallnjkokclafeljbcmpogfiig/'
    });
    return {
        requestHeaders: requestHeaders
    };
}, {
    urls: ['*://use.typekit.net/*'],
    types: ['stylesheet']
}, ['requestHeaders','blocking']);

最小 manifest.json

这是使扩展程序正常工作的最小manifest.json 文件。 background.js在上一节中被引用。

{
    "name": "Name of extension",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },
    "permissions": [
        "*://use.typekit.net/*",
        "webRequest",
        "webRequestBlocking"
    ],
    "content_security_policy": "script-src 'self' https://use.typekit.net; object-src 'self'"
}