谷歌Chrome扩展与Typekit字体 [英] Google Chrome Extensions with Typekit Fonts

问题描述

有没有人有过任何经验，或者有什么经验或这样做的幸运吗？任何帮助将不胜感激。

解决方案

在Chrome扩展中可以使用Typekit字体之前，需要处理两个障碍：

1. 默认情况下，Chrome会阻止外部脚本加载到扩展程序的进程中。
防止内联脚本被执行。

2. Typekit将使用403 Forbidden进行回复，除非设置了正确的Referer头文件。

---

我将演示的源代码上传到：

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

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

 < script src =https：// use .typekit.net / ekl0khv.js>< /脚本> 
< script src =load-typekit.js>< / script> 
  

// load-typekit .js
try {Typekit.load（）;} catch（e）{}


要解决上一个问题，您需要修改Referer头。这段代码需要 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'）{
 //该请求当然不是由Chrome扩展启动的... 
 return; 
} 
} 
 // Set Referer 
 requestHeaders.push（{
 name：'referer'，
 //主机必须与您的Typekit套件设置中的域匹配
值：'https：// hjdaoalallnjkokclafeljbcmpogfiig /' 
}）; 
 return {
 requestHeaders：requestHeaders 
}; 
}，{
 url：['*：//use.typekit.net / *']，
类型：['stylesheet'] 
}，['requestHeaders'，'blocking']）; 
  

最小manifest.json

这是用于获取扩展名的最小 manifest.json 文件工作。 background.js 是在前一节中引用的。

  {
name：扩展名，
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'
} 
  

I've recently started creating chrome extensions, but unfortunately I've had no luck with introducing typekit fonts directly into the extension.

Has anyone had any experience or luck in doing so? Any help would be much appreciated.

解决方案

There are two hurdles to be taken before a Typekit font can be used in a Chrome extension:

1. By default, Chrome prevents external scripts from being loaded in the extension's process.
2. Chrome prevents inline scripts from being executed.
3. Typekit will reply with 403 Forbidden, unless the correct Referer header is set.

---

I uploaded the source code of a demo to https://robwu.nl/typekit-demo.zip. To see that the extension works, open the options page of the sample extension.

---

For the next example, I have created a Typekit kit with the following settings:

To fix the first problem, edit your manifest file and relax the Content Security policy:

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

To solve the second issue, move the loader to an external file. Your extension page should look like this:

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

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

To solve the last issue, you need to modify the Referer header. This bit of code requires the webRequest, webRequestBlocking and *://use.typekit.net/ permissions in the manifest file; chrome.webRequest.onBeforeSendHeaders is used to modify the headers.

// 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']);

Minimal manifest.json

This is the minimal manifest.json file for getting the extension to work. background.js is referenced in the previous section.

{
    "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'"
}

这篇关于谷歌Chrome扩展与Typekit字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！