Safari Web Extensionの最新情報

Safari Web Extensionの最新の改善点により、Webを閲覧するユーザに優れたエクスペリエンスを提供する方法をご確認ください。Manifestバージョン3へのアップグレード方法、最新のWeb Extension用APIを取り入れる方法、デバイス間でExtensionを同期する方法を紹介します。

リソース

関連ビデオ

WWDC23

Safari機能拡張の新機能

WWDC22

WWDC21

Safari Web Extensionにおける改善点

ダウンロード

♪♪

こんにちは Kiara Roseです Safari Extensionのエンジニアをしています今年のExtensionの新機能についてお話しできることをとてもうれしく思います今日のプレゼンテーションに入る前に iOSやiPadOS macOSの ExtensionをApp Storeに提出してくれたみなさんに感謝いたします今後も優れた体験を提供できるように新しい機能とAPIを実装し続けることが目標です今日は過去１年間に実装したエキサイティングな新機能のいくつかに焦点を当てたいと思います Extensionの新しい ManifestバージョンアップデートされたAPI 複数のデバイス間での Extensionの同期などです Manifestバージョン３から始めましょう Manifest３はWeb Extentionプラットフォームの次のイテレーションでパフォーマンスとセキュリティが改善され一般的なExtension APIも統合されていますバージョン３を使用するように Extensionを更新済みの場合は ExtensionはSafari15.4 以降で機能します Extensionのサポートがまだでも心配無用です Safariでの Manifestバージョン２サポートは継続されます Manifestバージョン３の重要な新機能の１つは ExtensionがService Workerを使用できることです Web開発者ならService Workerに精通されているかと思います addEventListener APIによるリスナー登録が可能なイベント駆動型のページがこちらですこのページはManifest バージョン３をサポートする他のブラウザとも互換性があります Extensionにバックグラウンドページの使用を継続する場合はそれでも構いませんが非永続でなければなりませんバージョン３のもう1つの改善点はページで JavaScript実行のAPIがスクリプト型に移動したことメソッドの機能のほとんどは同じままですがスクリプトが提供する新しい追加機能もありますページにコードを挿入する新しい方法コード実行ページのフレームオプションコード実行環境を決定する機能などです新しいスクリプトAPIのコードがタブAPIとどう異なるかを見てみましょうこのコードスニペットでは tabs.executeScript APIを使用してページの背景色を青に変更しますこのAPIではcodeプロパティを渡すことによって文字列に含まれるコードのみを挿入できますでは新しいスクリプト APIを使用してこのコードを含む関数オブジェクトを渡しますまた他の関数と同様に引数を含めることも可能ですこれは文字列でのコード記述に制限されないためスクリプト実行のために改善された方法と言えますまたスクリプトにtargetという新しいプロパティがありますこのプロパティはスクリプトを実行する場所を指定しますスクリプトを実行するには実行するタブのIDを指定する必要がありますタブIDが指定されていないと APIはエラーを返しますコードを挿入するページのフレームを選択する場合はフレームIDを指定することもできますタブAPIでは指定できるIDは１つだけですがスクリプトを使用すると複数のIDを指定できますもっと多くのコードを複数のファイルに含められればきれいに見えるとしましょう tabs.executeScript APIで指定できるファイルは１つだけですが scripting.executeScriptでは複数のファイルを指定できます insertCSSでも同じことができますここではページにスタイルを挿入できてページから挿入されたスタイルを削除できる removeCSSについても同様ですこのAPIはManifest バージョン２と３で使用可能ですただしtabs.executeScriptAPIはバージョン３では使用できません新しいスクリプトAPIに加えて他のAPIにも変更がありますその変更の1つは web_accessible_resourcesです

Manifestバージョン２ではリソースを含める場合にファイルの配列を渡すことによっておこないページにアクセスできるようにしますただしManifestで指定したすべてのリソースへのアクセスがページに与えられるため問題になる可能性もあります

バージョン３の新しい形式を使用すると特定のサイトで使用できるリソースを制御できます例を見てみましょう以前はクッキーとパイの画像はExtensionがアクセスできるサイトで利用可能でした今回バージョン３ではパイの画像はapple.comの URLでのみ使用できクッキーの画像はwebkit.orgのページでのみ使用できます次にbrowser_action APIと page_action APIの変更点を見てみましょう

Manifestバージョン２ではアクションを明確に指定しますただしこれらのAPIは同様の役割を果たしているためバージョン３ではアクションAPIを１つだけ使用するように統合しました

またExtensionのコンテンツセキュリティポリシーを宣言する方法も更新されましたバージョン２ではExtensionのポリシーは文字列で定義しますバージョン３ではextension_pages キーを持つオブジェクトを使用して定義しますスクリプトのリモートソースはバージョン３では許可されなくなりました最後は非推奨の browser.extension.getURL APIの変更についてですこのAPIはバージョン３ではサポートされなくなりました browser.runtimeで同等の APIを定義してください Manifestバージョン３で導入された新機能について説明しましたのでExtentionの更新プロセスを順に見て新機能を活用できるようにします

昨年からのSeaCreator Extensionを更新して Manifestバージョン３に対応しましたこのExtensionは魚という語の出現箇所を絵文字に置換えますまずバージョン番号を２から３に変更します

既存のバックグラウンドページを使用できますがバージョン３ではExtensionが Chromeと互換性を持つように Service Workerを使用するよう更新します

最後にbrowser_actionを actionに変更

Manifestの構造に関してこの拡張を行うために必要がある重要な変更でバージョン３の新しい仕様と互換性がありますしたがってこれをテストするためにExtensionをビルドし Safariで有効化します

次にwebkit.orgブログページに移動してこのExtensionでfishという単語のすべてのインスタンスを魚の絵文字で置換えます

何かがうまくいかなかったようですご覧のとおりページの魚が絵文字に置換されていませんポップオーバーを調べてエラーメッセージを確認します

コンソールタブにエラーメッセージがあります browser.tabs.executeScriptが未定義となっていますこれはこのAPIがバージョン３で使用できなくなったためです代わりに新しいスクリプト APIを使用するよう更新します Xcodeでpopup.js ファイルに戻りスクリプトを使用するようにこの行を変更します

スクリプトを挿入する場所を指定するためのターゲットプロパティを追加します

新しいスクリプトAPIを使用するためタブのIDを指定する必要がありますこれを行うには tabs.getCurrent APIを使用してタブ情報を含むオブジェクトを取得します

次にそのオブジェクトを使用してタブIDを取得します

次に実行するスクリプトを含むファイルを追加します

最後に行う変更はManifestにスクリプト権限を追加することです

先に進んでExtensionをビルドし Safariでこれらの変更を適用しますご覧のとおりこのExtensionは Safariで機能する Manifestバージョン３の新機能です Extensionのアップグレードがいかに簡単か分かりましたただし新しい変更に慣れていない場合はスクリプトなどの多くの機能がバージョン２でも使用できるようにしておきます宣言型のネットリクエストから始めて今年更新したAPIを見てみましょう宣言型ネットリクエストは Extensionに高速でプライバシーを保護する方法を提供するコンテンツブロッキングAPIですルールセットによりネットワークリクエストをブロックしますこのAPIによりリクエストのインターセプトや変更などすべての作業をSafariに委任して適用するコンテンツブロックルールを指定します Manifestでルールセットも指定できます

ここでは宣言型ネットリクエスト権限を追加し declarative_net_request キーを使用してページに適用する必要があるルールセットを追加します以前はManifestで宣言できるルールセットは最大10点でした機能の更新により最大50のルールセットを宣言できるようになりましたので Extensionをカスタマイズできますただし一度に有効にできるルールセットは10個ですルールセットの作成方法の詳細については Safari Web Extensionに関するプレゼンをご覧くださいこのAPIについてさらに詳しく説明されています宣言型ネットリクエストの新機能に移ります以前はManifestでルールセットを宣言するのみでした今回２つのAPIが実装されルールを動的に更新できるようになりました最初のAPIは updateSessionRulesですこれによりExtensionのルールを追加や削除できますただしこれらのルールはブラウザセッションや Extensionの更新を超えて保持されないことが重要です永続化するルールを更新する場合は代わりに updateDynamicRules APIを使用してくださいこれによりExtension全体を更新せずにブロックルールを更新できますこれらのAPIの１つを使用してルールセットに変更を加える方法を見てみましょう Extensionを使用してページの一部のコンテンツをブロックしてから新しいAPIで選択したページのブロックを解除 Extension Manifestでは最初に宣言型ネットリクエスト権限を追加します

次に宣言型ネットリクエストキーを使用してルールを追加

適用されているルールは rules.jsonファイルにありますこのファイルではURLすべての画像をブロックするルールを宣言 Extensionのビルドでこのルールが Safariでどう適用されるか

ご覧のとおり画像は消えています期待どおりの挙動です Safariはコンテンツブロックルールを適用しました魚に関するウィキペディアのページに移動するとこのサイトの画像もブロックされていることがわかりますここではwebkit.orgページ以外のすべてのページの画像をブロックする想定とします宣言型ネットリクエスト用に更新されたAPIを使用してそれを実行できます Xcodeに戻って変更を加えましょう popup.jsファイルでコンテンツブロックルールを更新する関数を宣言

webkit.org/blog-filesページで画像を許可するルールを設定次にupdateSessionRules APIでセットに追加最後にExtensionをビルドし Safariで変更をテスト

ブログ投稿の画像が読み込まれサイトで画像を許可する新しいルールが機能していることがわかりますウィキペディアのサイトにアクセスするとこのページの画像はまだブロックされていますが新しいルールがこのページに適用されていないためですこれが新しい宣言型ネットリクエストAPIを使用してコンテンツブロックルールを更新する方法です

ではExtensionがページとどう通信するかを見ましょうこのすばらしい機能により Extensionが有効な場合サイトはカスタム動作を作成できますこのAPIはexternally_connectableと呼ばれますこれの使用にはManifestで一致パターンを宣言この一致パターンによって Extensionと通信するページが決定

この機能はブラウザの名前空間を使用した場合のみ機能します最後にユーザーはメッセージを送受信する前にExtensionにページへのアクセスを許可しますこの機能の使用にはページに追加するコードを見ますまずextensionIDを取得しますこれはExtensionのバンドルID でありこの形式のチームIDですチームIDは developer.apple.comのアカウント設定のタブにあります次にメッセージ送信APIを使用してメッセージを投稿関数を渡すことで Extensionからの受理応答を処理できます次にExtensionがメッセージを受信するために必要なコードを見てみましょう ExtensionはonMessage Externalというイベントからページへのメッセージを受信できますイベントリスナーに渡されたメソッドを使用してメッセージをページに返信することもできますブラウザごとに異なるExtension ストアがあるため Extensionは多くの異なる識別子を持つことが可能ですしたがってChromeやEdge ではなく Safari Web Extensionにメッセージを送信していることを確認する必要がありますこの処理にはPromise.allの呼び出しで browser.runtime.send MessageAPIを使用次にこの処理のサンプルコードを見てみましょうページから複数IDを使用してメッセージをブロードキャストできます Extensionからの応答によって今後の通信に使用するExtensionIDが通知されます determineExtensionID という関数がありますこの関数はbrowser.runtime. sendMessageという APIでExtensionにメッセージを送信複数のIDがあり使用すべき正しいIDを決定する場合は Promise.allを使用し defineExtensionID関数で複数の呼び出しを行います Promise.allはpromiseの配列を受理し解決された値の配列を含む単一promiseを返しますこの配列を使用してユーザーがインストールしたExtensionを検出 Extensionのバックグラウンドページでメッセージを検索する必要がありますメッセージを受信したら Extensionのインストールをページに通知するためにメッセージを送り返しますこれが新しい externally_connectableです APIによるExtensionがページと通信できるようにする方法です更新された機能の中で個人的なお気に入りは unlimitedStorageです unlimitedStorageは実際無制限なのです！この機能のリクエストが非常に多かったので Extensionの10MB割当ては撤廃されました適切な量データを自由にご利用いただけますただしユーザーには使用中のデータをクリアする機能があることに注意することが重要ですそこでユーザーがデータをクリアしたくないと思わないよう厳密に必要なデータのみを保存するようにしてくださいこの機能を使用するには Manifestでストレージと unlimitedStorageのアクセス許可を要求するだけこれが昨年Extension用に更新した全APIです最後にユーザーがすべてのデバイスでExtensionを簡単に利用できるようにする新機能について Safari 16ではExtensionの使用体験をよりシームレスにユーザーがデバイスで ExtensionをオンにするとすべてのデバイスでオンになりますさらにExtensionのダウンロードが簡単にどのように機能するかを見てみましょうユーザーがMacでExtensionの１つを有効にしているとします他のデバイスのExtension 設定でダウンロードするオプションが提供されますダウンロードするとデバイスで自動的に有効になりユーザーエクスペリエンスが向上しますそれではこれをWeb Extensionとコンテンツブロッカーに設定する方法について詳しく見ていきますまずApp Storeに提出するときに ExtensionをiOS iPadOS macOSに対しリストしますこれによりExtensionはユーザーの全デバイスで利用できます次にExtensionをデバイス間で同期できるようにするには次の２つの方法を採用する必要があります最も簡単でおススメなのはユニバーサル購入を採用することユニバーサル購入によりユーザーは１回購入するだけで全プラットフォームでExtensionを利用できますこの方法を使用すれば準備完了ユーザーはExtensionをダウンロードするとすべての機能を利用できるようになりますユニバーサル購入を設定するには単一のバンドル識別子を使用する必要があります Extension全体でApp Store Connectと同じ Appレコードに関連付けますこの詳細についてはユニバーサル購入の設定方法に関するドキュメントを確認してくださいユニバーサル購入を設定しないことを選択した場合は Appを手動でリンクできますそれにはXcodeから同期する AppとExtensionのInfo plistにバンドル識別子を追加します iOS AppとExtensionを macOSのものと同期するには info plistで特定のキーを使用する必要がありますこのキーをmacOS Appの plistに入れ macOS Extensionの plistにも入れます同様にmacOS Appを同期するためのプロセスがありますこのキーをiOS Appのplistに追加し iOS Extensionのplistに追加します Xcodeでどう機能するか見てみましょう Xcodeで最初に行う作業は同期するExtensionと AppのバンドルIDを含めるために各ターゲットの設定を更新 iOS Appのinfo plistに対応する macOS Appのバンドル識別子を追加します

ご覧のとおりiOS App バンドル識別子を追加して macOS Appに対して同じプロセスを実行しました iOS Extension同様macOS Extensionバンドル識別子を追加最後にiOS Exentionのバンドル識別子を追加するmacOS Extensionですこれはユーザーがどこでも使用できるようにAppと Extensionをリンクするのがいかに簡単かということですユニバーサル購入を設定することでこの機能をユーザーが利用できるようにしたり iOSやmacOS Appのバンドル識別子と ExtensionにXcodeで追加し実現します最新APIであるManifest バージョン３について説明しました複数のデバイス間で Extensionが同期されます Safari Web Extensionの新機能について興奮が抑えきれません今日のセッションからコードを含むサンプルプロジェクトをダウンロードしてAPIを試してみてくださいご意見をお聞かせくださいフィードバックアシスタントからバグ報告するか Safari開発者フォーラムでチャットしてフィードバックしてください Extensionの開発をより良いものにしたいと思います本当ににご意見を知りたいんです！ WebExtensionsコミュニティグループに参加して Extensionの未来を形作りましょう Extension作成に関する WWDCプレゼンもどうぞご参加ありがとうございます残りのWWDCもお楽しみください

2:43 - Executing script on webpages

// Manifest version 2
browser.tabs.executeScript(1, {
  frameId: 1,
  code: "document.body.style.background = 'blue';"
});

3:00 - scripting.executeScript API

// Manifest version 3
function changeBackgroundColor(color) {
  document.body.style.background = color;
};

browser.scripting.executeScript({
  target: { tabId: 1, frameIds: [ 1 ] },
  func: changeBackgroundColor,
  args: [ "blue" ]
});

4:02 - tabs.executeScript file

// Manifest version 2
browser.tabs.executeScript({ 1,
  file: "file.js"
});

4:09 - scripting.executeScript API files

// Manifest version 3
browser.scripting.executeScript({
  target: { tabId: 1 },
  files: [ "file.js", "file2.js" ]
});

4:15 - scripting.insertCSS

// Add styling
browser.scripting.insertCSS({
  target: { tabId: 1, frameIds: [ 1, 2, 3 ] },
  files: [ "file.css", "file2.css" ]
});

4:21 - scripting.removeCSS

// Remove styling
browser.scripting.removeCSS({
  target: { tabId: 1, frameIds: [ 1, 2, 3 ] },
  files: [ "file.css", "file2.css" ]
});

5:08 - Manifest version 3 web_accessible_resources

// Manifest version 3
"web_accessible_resources": [
    {
      "resources": [ "pie.png" ],
      "matches": [ "*://*.apple.com/*" ]
    },
    {
      "resources": [ "cookie.png" ],
      "matches": [ "*://*.webkit.org/*" ]
    }
]

5:42 - Manifest version 3 action

// Manifest version 3
"action": {
  "default_icon": {
    "16": "Images/icon16.png"
  },
  "default_title": "defaultTitle"
}

5:57 - Manifest version 2 content_security_policy

// Manifest version 2

"content_security_policy" : "script-src 'unsafe-eval' https://*apple.com 'self'"

6:08 - Manifest version 3 content_security_policy

// Manifest version 3

"content_security_policy" : { "extension_pages" : "script-src 'unsafe-eval' 'self'" }

10:31 - Specifying a ruleset

// manifest.json

"permissions": [ "declarativeNetRequest" ],

"declarative_net_request": {
  "rule_resources": [
    {
      "id": "my_ruleset",
      "enabled": true,
      "path": "rules.json"
    }
  ]
}

11:44 - updateSessionRules

// Rules that won't persist

browser.declarativeNetRequest.updateSessionRules({ addRules: [ rule ] });

// Rules that will persist

browser.declarativeNetRequest.updateDynamicRules({ addRules: [ rule ] });

14:33 - externally connectable

// In the webpage
let extensionID = "com.apple.Sea-Creator.Extension (GJT7Q2TVD9)";

browser.runtime.sendMessage(extensionID, { greeting: "Hello!" },
 function(response) {
    console.log("Received response from the background page:");
    console.log(response.farewell);
});

15:00 - Message from webpage to extension (in the webpage)

// In the webpage
let extensionID = "com.apple.Sea-Creator.Extension (GJT7Q2TVD9)";

browser.runtime.sendMessage(extensionID, { greeting: "Hello!" },
 function(response) {
    console.log("Received response from the background page:");
    console.log(response.farewell);
});

15:33 - Message from webpage to extension (in the background page)

// In the background page
browser.runtime.onMessageExternal.addListener(function(message, sender, sendResponse) {
    console.log("Received message from the sender:");
    console.log(message.greeting);
    sendResponse({ farewell: "Goodbye!" });
});

16:17 - Determining the correct identifier

// Determining the correct identifier

function determineExtensionID(extensionID) {
  return new Promise((resolve) => {
    try {
      browser.runtime.sendMessage(extensionID, { action: 'determineID' }, function(response) {
        if (response)
          resolve({ extensionID: extensionID, isInstalled: true, response: response });
        else 
          resolve({ extensionID: extensionID, isInstalled: false });
      });
    }
  });
};

17:09 - background.js

// background.js

browser.runtime.onMessageExternal.addListener(function(message, sender, sendResponse) {
  if (message.action == "determineID") {
    sendResponse({ "Installed" });
  }
});

18:07 - Unlimited storage

// manifest.json

"permissions": [ "storage", "unlimitedStorage" ]

特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。