google-chrome-extension - Typekit フォントを使用した Google Chrome 拡張機能

Question

最近、Chrome 拡張機能の作成を開始しましたが、残念ながら、タイプキット フォントを拡張機能に直接導入することはできませんでした。

誰かがそうする経験や運がありましたか? どんな助けでも大歓迎です。

Answer 1

Typekit フォントを Chrome 拡張機能で使用するには、次の 2 つのハードルをクリアする必要があります。

1. デフォルトでは、Chrome は拡張機能のプロセスで外部スクリプトが読み込まれないようにしています。
2. Chrome は、インライン スクリプトの実行を防ぎます。
3. Typekit は、正しい Referer ヘッダーが設定されていない限り、403 Forbidden で応答します。

---

デモのソース コードをhttps://robwu.nl/typekit-demo.zipにアップロードしました。拡張機能が機能することを確認するには、サンプル拡張機能のオプション ページを開きます。

---

次の例では、次の設定で Typekit キットを作成しました。

最初の問題を修正するには、マニフェスト ファイルを編集し、コンテンツ セキュリティ ポリシーを緩和します。

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

2 番目の問題を解決するには、ローダーを外部ファイルに移動します。拡張ページは次のようになります。

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