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

Question

我最近开始创建chrome扩展,但不幸的是我没有把直接引入typekit字体到扩展中.

这样做有没有经验或运气？任何帮助将非常感激.

Answer 1

在Chrome扩展程序中使用Typekit字体之前需要遇到两个障碍:

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

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

对于下一个示例,我创建了一个Typekit工具包,其中包含以下设置:

要解决第一个问题,请编辑清单文件并放宽内容安全策略:

"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标头.这段代码要求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'"
}