SafariのためのWeb機能拡張の作成

SafariのためのWeb機能拡張の作成

Safari用のWeb機能拡張をゼロから作成しテストする方法を見てみましょう。Xcodeは不要です。プラットフォームを横断したプライバシー重視の優れたブラウジング体験を、コンテンツブロック、ページ変更、ネイティブメッセージング、許可モデルの連係により実現するシステムについて学びます。

関連する章
- 0:00 - Introduction
- 3:23 - Get started
- 7:23 - Block content
- 14:40 - Modify webpages
- 19:53 - Package and distribute
- 22:33 - Communicate with your app
- 26:04 - Next steps
リソース
関連ビデオ

WWDC26
- Safari 27用WebKitの新機能
こんにちは！ KiaraですSafariチームのエンジニアです。 Safariに追加したい機能のアイデアがありそのアイデアを実現したいならこのセッションが役立ちます。 SafariのWeb拡張機能を構築して配布するために必要なことをすべて解説します。内容が多いので休憩したり役立つセクションにスキップしながら進めてください。 SafariのWeb拡張機能はアプリにパッケージされています。 App Storeで入手できるお気に入りのコンテンツの1つです。広告のブロックやカスタム新規タブページの作成お気に入りのストリーミングサイトでの再生体験の向上など小さなツールですが Web体験を大きく改善できます。 AppleはW3C Web Extensions Working Groupにて他のブラウザとブラウザ間のWeb拡張機能構築に使うAPIの標準化を進めています。別のブラウザ向けの拡張機能を作成済みならその拡張機能をSafariに移行できます。パッケージングと配布のセクションへジャンプしてください App Store Connectを使って拡張機能を配布する方法を紹介します。今日はWeb拡張機能をゼロから構築してすべての基礎を網羅します。拡張機能の開発プロセスを解説しながら Safariにカスタマイズ体験をもたらすAPIと機能を紹介します。 SafariでのWeb拡張機能のテスト方法と TestFlightでベータ版をユーザーと共有する方法も紹介します。世界に公開する準備ができたら拡張機能を App Storeに申請します。まずはこのセッションのサンプルコードをダウンロードします。今日構築する拡張機能のすべてのリソースが含まれています。ぜひ一緒に進めてみてください。このセッションでは実際の拡張機能の構築をコンテンツをブロックし Webページを変更するものを通じて拡張機能をパッケージするいくつかの方法を紹介します App Storeへの配布方法も説明します。拡張機能の機能をさらに拡張する方法として拡張機能をそれを含むアプリと連携させる方法も示します。最終的にこの拡張機能は iOS、iPadOS、macOS そしてvisionOSのSafariで同時に動作します。 Web拡張機能の優れた点はすべてが HTML、CSS、JavaScript で構成されていることです。 Web開発の経験があれば必要な知識のほとんどはすでに身に付いています。今日のセッションではブラウジング中に気が散るサイトをブロックする拡張機能を構築します。ブラウジング中はつい引き込まれてしまうことがあります。 webkit.orgを例にとるとそこには何百もの記事があり何時間でも読み続けてしまいます WebKitの新情報を読んでいるだけで終わります。だからこういう拡張機能が必要なのです。今日これを構築します 2つのブロックモードがあります: サイトで最大10分の閲覧を許可するLightモードと WebKitの記事を数本読むのに最適なモードですそしてFullモードはユーザーが移動しようとした瞬間にリダイレクトします。
はじめにお気に入りのコードエディタを開きます。 Xcodeも使えますが拡張機能の構築はどのエディタでも可能です。コードエディタでこの拡張機能のファイルを格納するフォルダを作成します。基礎としてすべての拡張機能に必要な最初のファイルはmanifestです。 manifestはJSON形式のファイルでブラウザに拡張機能の情報を伝えますそして機能についてもブラウザに伝えます。 manifestは拡張機能の IDカードのようなものです。拡張機能の名前のような情報が含まれます説明やバージョン番号なども含まれます。次に拡張機能のアイコンを格納するimagesフォルダを追加します。アイコンはさまざまな場所に表示されます。ツールバーなど… または拡張機能の設定などです。表示される場所によって異なるサイズが必要です。そのためアイコンはsvgで追加します。 Safariがアイコンのスケーリングを完璧に処理してくれるのでコードエディタに戻って実際の動作を確認できます。 manifestファイルに拡張機能のアイコンを追加しました。アイコンはimagesフォルダ内に格納されています。確認するために変更を保存して Safariを開きます拡張機能を読み込みます。 Safariへの拡張機能の読み込みはとても簡単です。 Command+コンマでSafariの設定を開くだけですペインをクリックしてにチェックを入れます。これでデベロッパペインが有効になりますそこから一時的な拡張機能を追加できます。コード署名が検証されていない拡張機能なので署名なし拡張機能を許可する必要があります。許可したら拡張機能のリソースを含むフォルダを選択します。これだけで拡張機能が Safariに読み込まれました！ほとんどの拡張機能にはユーザーが操作するUIがあります。この拡張機能ではユーザーが気が散るサイトをブロックリストに追加できるようにしたいです。そのためカスタムUIを追加する必要があります。これを実現する方法はいくつかあります。 1つは拡張機能のアクションボタンを使う方法です。 Safariのツールバーに追加される拡張機能用のボタンです。クリックすると Safariは定義した UIのポップアップを表示します。ポップアップのファイル名や manifestで定義するリソースは正しいmanifestキーに関連付けていればどんな名前でも構いません Safariがその役割と使い方を認識できるようにするためです。この例ではデフォルトポップアップの読み込みに使うファイルは"popup.html"です。この拡張機能ではポップアップにブロックリストを表示すると UIが少し窮屈に見えてしまいますそこで代わりに拡張機能のオプションページを使って表示します。これはユーザーが拡張機能の設定を行うフルページです。ではコードエディタに戻ってこの変更を加えます。 manifestにオプションページが定義されています。拡張機能のフォルダにそのファイルを追加します。このページのフルUIを追加する前に Hello Worldのようなシンプルなものから始めます。 Safariでは拡張機能を再読み込みすることで変更をテストできます。いいですね！新しい変更が反映され拡張機能にこの設定ボタンが表示されました。ボタンをクリックすると拡張機能のオプションページが開きます！設定が完了したので拡張機能にもう少し機能を追加する必要があります "Hello World"を表示するだけでは実用的ではありません。そこでLightモードと Full modeを切り替えられるページを設計しました。このインターフェースはすでに HTML、CSS、JavaScriptで記述しています。見た目もよくインタラクティブですが接続作業が必要です。
では拡張機能をアップグレードしてコンテンツのブロックを開始する方法を見ていきます。 declarative net request APIを使いますこの APIを使うと拡張機能がネットワークリクエストをブロック、変更、またはリダイレクトできます。このAPIはお気に入りのWeb拡張機能を支える技術です。この機能により拡張機能は広告などのWebコンテンツをフィルタリングしブラウジング中にユーザーを追跡するトラッカーもブロックできます。ただしこの機能にアクセスするためには権限を追加する必要があります。権限は拡張機能が Safariに必要なアクセスを伝える仕組みです。クッキーへのアクセスなどさまざまなものがありますストレージへのデータ保存やクリップボードへの書き込みなどです。コンテンツブロッキングには declarative net request権限を追加する必要があり拡張機能のmanifestで設定できます。これで準備が整いルールの定義を始められます。ルールにはID、優先度そして条件が満たされたときのアクションタイプがあります。このルールは例として webkit.orgへのすべてのナビゲーションをブロックします。ルールの定義方法は2つあります。 1つはmanifestで定義する方法です。これは静的ルールと呼ばれます。使用するルールがあらかじめわかっている場合に最適です。柔軟性が必要な場合は実行時にJavaScriptを使って動的にルールを追加できます。動的なアプローチを選択するのはブロックするサイトがわからないためですユーザーがリストに追加するまで。このロジックはutilitiesフォルダ内の rules.jsというファイルに記述します。そしてhost.jsファイルを使ってルールを作成しますユーザーがブロックリストにサイトを追加したときに。コードに戻ってこれを接続していきます。拡張機能のmanifestに declarative net request権限を追加しました。また前のオプションページを HTML、CSS、JavaScriptファイルに置き換えました拡張機能用にすでに作成したファイルです。 2つの新しいファイルを含む utilitiesフォルダも追加しました。ルールを追加するために rules.jsファイルを開きます。これらのルールにはIDが必要なためヘルパーメソッドを追加しましたサイトのホストを一意の整数IDにマッピングするためです。 ID、タイプに"block" そしてurlFilterを指定するルールを作成しますサイトのホストにマッチするようにします。そしてdeclarative net request updateDynamicRules APIを使って拡張機能にルールを追加します。 hostファイルではサイトがリストに追加されたとき拡張機能がフルブロッキングモードの場合にルールを追加できます。 Safariに戻って拡張機能を再読み込みして更新します。
オプションページで webkit.orgをリストに追加します。
サイトにアクセスするとブロックされました！拡張機能はリストに追加されたサイトへのナビゲーションをブロックできるようになりました。ただし表示されるエラーページはあまり好ましくありません。ユーザーをもっと意図的な場所つまり拡張機能用に設計したカスタムページに誘導したいです。そこでリダイレクトルールの出番です。このルールは前のブロックルールに似ていますがタイプがredirectになりますユーザーが到達するページの extensionPathを指定できます。ただし変更前に拡張機能のホスト権限を追加する必要があります。ネットワークリクエストをブロックするには拡張機能はページへのアクセスが不要です。しかしネットワークリクエストをリダイレクトするにはアクセスが必要です。そのため拡張機能のmanifestで declarativeNetRequestWithHostAccessを使います代わりの権限として。拡張機能は起動時にどのサイトへのアクセスも必要ないためオプションのホスト権限を使って実行時にサイトへのアクセスをリクエストできます。ホスト権限は拡張機能がアクセスしたいサイトをSafariに伝えます。マッチパターンの配列として設定できます各パターンはスキーム、ホストパスで構成されます。リストにはどんなサイトでも追加できるためすべてのURLにマッチするパターンを使います。拡張機能が動作するために特定サイトへのアクセスが必要な場合はホスト権限を使うこともできます。ただし拡張機能は自動的にサイトへのアクセスを得るわけではありません。ユーザーのプライバシーを尊重するために拡張機能の権限モデルを設計しました。ユーザーのブラウジング体験は個人データを露出する可能性があるためユーザーがコントロールを持ち拡張機能がアクセスできるサイトを決定します。明示的にアクセスをリクエストすると Safariは拡張機能のアクションボタンにバッジを表示します。ボタンをクリックするとアラートが表示され拡張機能にページへのアクセスを許可するか確認します。ユーザーがアクセスを許可するとアイコンが色付きになります拡張機能がそのページでアクティブであることを示します。この拡張機能は起動時にどのサイトへのアクセスも必要ないためオプションのホスト権限を選択しました。これにより拡張機能が必要なときに任意のサイトへのアクセスをリクエストできます。 manifestで権限を declarativeNetRequestWithHostAccessに変更しました。拡張機能は実行時に任意のサイトへのアクセスをリクエストできます。ではrulesファイルでリダイレクトルールを作成します。前のブロックルールに非常に似ていますが今回はタイプがredirectです。そしてカスタム拡張機能ページへのパスが含まれています。ページのリソースも拡張機能のフォルダに追加しました。ナビゲーションをブロックする代わりにユーザーを拡張機能用に設計したページにリダイレクトします。拡張機能はサイトへのアクセスが必要なため permissions.request APIを使ってドメインとサブドメインへのアクセスをリクエストします。この体験を確認するために Safariで拡張機能を更新します。
オプションページで webkit.orgを追加します。
サイトが追加される前に拡張機能へのアクセス許可を求められます。いいですね！期待通りの動作です。アクセスを許可してページを更新します。
すばらしい！ナビゲーションがカスタム拡張機能ページにリダイレクトされました。拡張機能がどんどん完成に近づいています！気が散るサイトへのナビゲーションをリダイレクトできるようになりました。でも正直に言うとお気に入りのサイトを完全に遮断するのは難しいですよね。そこでページ上のカウントダウンタイマー付きで最大10分のブラウジングを許可するモードを追加します。
そのためにはコンテンツを直接ページに注入する方法が必要です。ここでコンテンツスクリプトの出番です。コンテンツスクリプトを使うと拡張機能がWebページの内容を読み取り変更できます。スクリプトは静的にすることができ manifestで直接宣言しますファイルと実行するサイトのマッチパターンを指定します。対象サイトがあらかじめわかっている場合に有効です。ただし私の場合リストに追加されるまでサイトがわかりません。そのため registered content scripts APIを使って動的に追加します。静的スクリプトと同様に機能しますが 2つの追加フィールドがあります: IDと永続フラグです。これをtrueに設定するとスクリプトが Safariの再起動後も残り続けます。このAPIを使うために manifestにscripting権限を追加し utilitiesフォルダに新しいscripting.jsファイルを追加します。ここでコンテンツスクリプトを定義します。 ID、タイマー用のJavaScriptファイルスタイリング用のCSSを指定しますサイトのドメインとサブドメインをカバーするマッチパターンも指定します。このフラグをtrueに設定します。そしてregister content scripts APIを使ってスクリプトを追加します。 addHostメソッドに戻りユーザーがブロックリストにサイトを追加したときそのサイトのタイマーを表示するコンテンツスクリプトを追加します。拡張機能がフルブロッキングモードの場合ページが読み込まれる前にリダイレクトが発生するため常にスクリプトを登録しておけます。 Lightブロッキングモードを選択した状態で webkit.orgをリストに追加します。サイトにアクセスするとページに10分タイマーが表示されます。
この拡張機能は世界に公開できる状態にほぼ近づいていますが最初に修正したいことがあります。気づいているかもしれませんが拡張機能を再読み込みするたびに同じサイトをリストに再度追加し続ける必要があります。これはすべての情報をメモリに保存しているためです拡張機能が再読み込みされるとその状態が失われます。
storage APIを使ってこのデータを保持できます。 Safariは2種類のストレージ領域をサポートしています。セッションストレージは素早いインメモリ処理に最適です再起動後に残す必要がない場合に。ただしブロックリストを保持したいためディスクにデータを書き込むローカルストレージが適切な選択です。
storage APIを使うために manifestに権限を追加します。次にutilitiesフォルダに新しいファイルを追加します。このファイルにいくつかのヘルパーメソッドを定義しますストレージ内のホストの更新と取得のためです。ブロックモードの保存と取得のためのメソッドも追加します。
addHostメソッドに戻りユーザーが新しいサイトを追加したときストレージ内のホストリストを更新できます。保存されたリストを使ってブロックリストを表示できます。この変更によりブロックリストは常に追加されたすべてのサイトの完全なリストで表示されます！同様にユーザーが 2つのモードを切り替えるとき変更をストレージに保存します拡張機能がフルブロッキングモードの場合はすべてのサイトのリダイレクトルールを作成できます。 storage APIの利点を確認するために Safariでブロッキングモードを"Full"に変更してサイトをリストに追加します。
拡張機能を再読み込みすると先ほど加えた変更がそのまま残っています！いいですね！ storage APIを使うことで拡張機能の永続性の問題が1つ解決しましたがもう1つ修正が必要な問題があります。登録されたコンテンツスクリプトは Safariの再起動後も拡張機能の更新後は残りません。ユーザーが拡張機能を更新するとコンテンツスクリプトが失われます。修正するために拡張機能が更新されたことを知る方法が必要ですストレージからホストを読み取りスクリプトを再作成するためです。その場所として最適なのがバックグラウンドページまたはサービスワーカーです。どちらも同じことができます拡張機能のライフサイクルの管理などブラウザイベントのリスンや拡張機能の各部分間でのメッセージ転送。 Safariは両方をサポートしているので好みで選べます！ DOMにアクセスできるためバックグラウンドページを使います。バックグラウンドページを追加するために manifestで指定します。次にファイルを拡張機能のフォルダに追加します。ここでonInstalledイベントを登録します。これにより拡張機能が新しいバージョンに更新されたことがわかります。これが発生したときストレージからホストを読み取りコンテンツスクリプトを再登録します。
ストレージへの読み書きに拡張機能を接続したことで大きな改善が得られました。拡張機能をApp Storeに公開する方法を確認する時期です。 1つの方法は App Store Connectを使うことです。 App Store Connectでは拡張機能のアップロード、申請、管理ができます構築したばかりの場合でも既存のものをSafariに移行したい場合でも。そして最大の利点は？ Macを使わずにどのブラウザからでも可能です。まずdeveloper.apple.comにアクセスして Apple Developer Programに登録します。登録後 appstoreconnect.apple.comにアクセスします。 SafariのWeb拡張機能は含まれるアプリにパッケージする必要があるため App Store Connectを使ってこのアプリを作成できます。アプリを作成するときにいくつかの設定が必要です拡張機能を利用可能にしたいプラットフォームなどです。 iOSとmacOSを選択しますこれにより拡張機能が iPhone、iPad、Mac そしてApple Vision Proの互換アプリとして利用可能になります。アプリの一意のIDであるバンドル識別子も設定します。すべての詳細を追加したら Xcode Cloudのタブに切り替えます Safari Web Extension Packagerまでスクロールして拡張機能のリソースをアップロードします。アップロードが完了すると Safari Web Extension Packagerが数分で拡張機能のパッケージ化を処理してくれます！完了したら問題を確認したり次のステップとして拡張機能をテストできます TestFlightを使って。 TestFlightを使うとベータビルドを配布し継続的に改善を加えてユーザーフィードバックを反映できます拡張機能をApp Storeに申請する前に。申請準備が整ったらタブに移動して仕上げの作業をします。拡張機能の動作を示すスクリーンショットなどです。ユーザーが理解しやすいように説明文も追加します拡張機能の機能と特徴について。すべての詳細を追加したらビルドを選択して審査に申請します。これがApp Store Connectを使って拡張機能を配布する方法です！このセッションでは標準的なWebExtension APIと機能を組み合わせてカスタマイズ可能なブラウジング体験を構築する方法を紹介しました。しかし拡張機能は Webプラットフォームを超えることもできます。
ネイティブメッセージングを使ってプラットフォームが提供する機能にアクセスする方法をご説明します。ここからはXcodeが必要です。最も簡単な方法は Safari Web Extension Packagerツールを使うことです。 Terminalでこのコマンドを実行すると Xcodeプロジェクトが作成されて起動します。アプリとWeb拡張機能が含まれます。そこからメッセージの送受信のために接続します。これをネイティブメッセージングと呼びます。 3人がメモを渡し合うような仕組みです。拡張機能のJavaScriptが最初に動き出します。中間のApp Extensionがそのメッセージを受け取りネイティブアプリに渡します。そしてアプリが処理を行い同じ方法で結果を返します。このアプリではブロックリストへの変更前に生体認証を要求することで拡張機能の設定を保護します。まず拡張機能のmanifestに nativeMessaging権限を追加します拡張機能のmanifestに。次に拡張機能のバックグラウンドページにメッセージを送信するメソッドを追加します拡張機能からネイティブアプリへの。返ってくるメッセージで認証が成功したかどうかがわかります。アプリがメッセージを受信するために SafariWebExtensionHandlerを変更する必要があります Packagerツールが作成したファイルに含まれるクラスです。優れた点としてテンプレートにはアプリが拡張機能からのメッセージを受信できる設定がすでに含まれています。必要なのは少し調整するだけです requestBioAuthキーのメッセージを解析するなど。次にSystem APIを使って生体認証によるユーザー認証をリクエストしますユーザーが認証するとアプリは同じ方法で結果を Web拡張機能に送り返します。 Xcodeで拡張機能をビルドして Safariで変更をテストします。 Xcodeで拡張機能へのメッセージ送受信の変更が反映されています。 Project NavigatorではプロジェクトにWeb拡張機能のすべてのリソースが含まれています。 Command+Bショートカットを使って拡張機能をビルドします。 Safariで拡張機能を有効にしてオプションページを開き webkit.orgをリストに追加します。
追加される前に Touch IDでの認証が求められます。認証後サイトがリストに追加されます。これがネイティブメッセージングを使ってアプリと Web拡張機能を連携させる方法です。これで拡張機能の配布準備が整いました。 Xcodeを使って配布します。
まずアーカイブをビルドします。以前App Store Connectでビルドを作成したためこのビルド番号が前回のビルドより 1つ上であることを確認します。 Organizerウィンドウから拡張機能を配布します。これがSafariのWeb拡張機能をゼロから作成して配布する方法ですゼロから。今日は多くのことをカバーしました。初めて始める場合でも拡張機能をさらに発展させたい場合でもアイデアを実際のものにする準備ができたと感じていただければ幸いです。皆さんの作品を楽しみにしています。
まだの方はサンプルコードプロジェクトをダウンロードして今日紹介したAPIを試してみてください。 Web拡張機能のクロスブラウザドキュメントを MDNで確認することで詳細を学べます。またフィードバックアシスタントでフィードバックをお寄せください。またはbugs.webkit.orgにバグを報告してください Safari 27でWeb拡張機能をテストする際に。このセッションにご参加いただきありがとうございました素晴らしいWWDCをお過ごしください！

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0
}

4:29 - Adding an extension icon

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,

    "icons": {
        "512": "images/icon.svg"
    }
}

5:30 - Adding an action button

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,

    "action": {
        "default_popup": "popup.html"
    }
}

6:17 - Adding custom UI to your extension

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,
  
    "options_ui": {
        "page": "options.html"
    }
}

6:30 - Including the UI in the extension manifest

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,

    "icons": {
        "512": "images/icon.svg"
    },

    "options_ui": {
        "page": "options.html"
    }
}

6:40 - Hello World

<!DOCTYPE html>
<html>
    <body>
    <p>Hello World</p>
    </body>
</html>

8:18 - Adding declarativeNetRequest permission

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,

    "icons": {
        "512": "images/icon.svg"
    },

    "options_ui": {
        "page": "options.html"
    },
  
    "permissions": [ "declarativeNetRequest" ]
}

8:22 - Blocking network requests

// block rule
{
    id: 1,
    priority: 1,
    action: {
        type: "block"
    },
    condition: {
        urlFilter: "||webkit.org",
        resourceTypes: [ "main_frame" ]
    }
}

8:41 - Modifying network requests

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,

    "icons": {
        "512": "images/icon.svg"
    },

    "options_ui": {
        "page": "options.html"
    },
  
    "permissions": [ "declarativeNetRequest" ],

    "declarativeNetRequest": {
        "rule_resources": [
            {
                "id": "ruleset_id",
                "enabled": true,
                "path": "rules.json"
            }
        ]
    }
}

8:50 - Updating dynamic rules

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

9:19 - Wiring up the static declarativeNetRequest rules

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,

    "icons": {
        "512": "images/icon.svg"
    },

    "options_ui": {
        "page": "options.html"
    },
  
    "permissions": [ 
      "declarativeNetRequest" 
    ]
}

9:40 - Adding block rules dynamically

// A helper function to map the host to the declarative net request rule ID.
export function hostToRuleID(host) {
	let hash = 0;
	for (let i = 0; i < host.length; i++) {
		hash = ((hash << 5) + hash) + host.charCodeAt(i);
		hash |= 0;
	}
	return Math.abs(hash) || 1;
}

function createBlockRule(host) {
	return {
		id: hostToRuleID(host),
		priority: 1,
		action: {
			type: "block"
		},
		condition: {
			urlFilter: `||${host}`,
			resourceTypes: ["main_frame"]
		}
	}
}

export async function createRules(hosts) {
	try {
		await browser.declarativeNetRequest.updateDynamicRules({
			addRules: hosts.map(createBlockRule)
		})
	} catch {
		console.log("Failed to create declarative net request rules")
	}
}

10:10 - Handling adding hosts to the settings

import { createRules, removeAllRules, removeRule } from './rules.js'

export async function addHost(host, blockingMode) {
  if (!host)
    return
  
  if (blockingMode === "full")
    await createRules([host])
}

10:48 - Redirecting network requests

{
    id: 1,
    priority: 1,
    action: {
        type: "redirect",
        redirect: {
            extensionPath: "/blocked.html"
        }
    },
    condition: {
        urlFilter: "||webkit.org",
        resourceTypes: [ "main_frame" ]
    }
}

11:17 - Declaring optional host permissions

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,

    "icons": {
        "512": "images/icon.svg"
    },

    "options_ui": {
        "page": "options.html"
    },
  
    "permissions": [ "declarativeNetRequestWithHostAccess" ],
    "optional_host_permissions": [ "https://webkit.org/*" ]

}

11:54 - Declaring optional host permissions for all sites

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,

    "icons": {
        "512": "images/icon.svg"
    },

    "options_ui": {
        "page": "options.html"
    },
  
    "permissions": [ "declarativeNetRequestWithHostAccess" ],
    "optional_host_permissions": [ "*://*/*" ]

}

13:12 - Add the redirect rule

// A helper function to map the host to the declarative net request rule ID.
export function hostToRuleID(host) {
	let hash = 0;
	for (let i = 0; i < host.length; i++) {
		hash = ((hash << 5) + hash) + host.charCodeAt(i);
		hash |= 0;
	}
	return Math.abs(hash) || 1;
}

function createBlockRule(host) {
	return {
		id: hostToRuleID(host),
		priority: 1,
		action: {
			type: "block"
		},
		condition: {
			urlFilter: `||${host}`,
			resourceTypes: ["main_frame"]
		}
	}
}

function createRedirectRule(host) {
	return {
		id: hostToRuleID(host),
		priority: 1,
		action: {
			type: "redirect",
			redirect: { extensionPath: "/blocked.html" }
		},
		condition: {
			urlFilter: `||${host}`,
			resourceTypes: ["main_frame"]
		}
	}
}

export async function createRules(hosts) {
	try {
		await browser.declarativeNetRequest.updateDynamicRules({
			addRules: hosts.map(createRedirectRule)
		})
	} catch {
		console.log("Failed to create declarative net request rules")
	}
}

13:42 - Dynamically ask for host permissions

import { createRules, removeAllRules, removeRule } from './rules.js'

export async function addHost(host, blockingMode) {
  if (!host)
    return
  
  const granted = await browser.permissions.request({
    origins: [`*://${host}/*`, `*://*.${host}/*`]
  })
  if (!granted)
    return
  
  if (blockingMode === "full")
    await createRules([host])
}

14:55 - Defining content scripts

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,

    "icons": {
        "512": "images/icon.svg"
    },

    "options_ui": {
        "page": "options.html"
    },
  
    "permissions": [ "declarativeNetRequestWithHostAccess" ],
    "optional_host_permissions": [ "*://*/*" ],
  
    "content_scripts": [
        {
            "js": [ "content.js" ],
            "css": [ "content.css" ],
            "matches": [ "*://*.webkit.org/*" ]
        }
    ]
}

15:13 - Dynamically registering content scripts

let script = {
    id: "id",
    js: [ "content.js" ],
    css: [ "content.css" ],
    matches: [ "*://*.webkit.org/*" ],
    persistAcrossSessions: true
}

await browser.scripting.registerContentScripts([ script ])

15:31 - Adding the scripting permission

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,
  
    "icons": {
        "512": "images/icon.svg"
    },
  
    "options_page": "options.html",
  
    "permissions": [
        "declarativeNetRequestWithHostAccess",
        "scripting"
    ],
  
    "optional_host_permissions": [ "*://*/*" ]
}

15:41 - Registering content scripts

// scripting.js

function contentScript(host) {
    return {
        id: `cs-${host}`,
        js: [ "content.js" ],
        css: [ "content.css" ],
        matches: [ `*://${host}/*`, `*://*.${host}/*` ],
        persistAcrossSessions: true
    }
}

export function registerScripts(hosts) {
    const scripts = hosts.map(contentScript)
    try {
        await browser.scripting.registerContentScripts(scripts)
    } catch {
        console.log("Failed to register content scripts")
    }
}

16:02 - Adding a host

// host.js

export async function addHost(host, blockMode) {
    if (!host)
        return

    const granted = await browser.permissions.request({
        origins: [`*://${host}/*`, `*://*.${host}/*`]
    })

    if (!granted)
        return

    if (blockingMode === "full")
        await createRules([ host ])

    await registerScripts([ host ])
}

17:06 - Web extensions storage APIs

await browser.session.storage.set({
  key: value
})

await browser.local.storage.set({
  key: value
})

17:21 - Adding storage permission to the web extension manifest.json

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,
  
    "icons": {
        "512": "images/icon.svg"
    },
  
    "options_page": "options.html",
  
    "permissions": [
        "declarativeNetRequestWithHostAccess",
        "scripting",
        "storage"
    ],
  
    "optional_host_permissions": [ "*://*/*" ]
}

17:30 - Saving data with storage

// storage.js

export async function updateHosts(hosts) {
    await browser.storage.local.set({ hosts: hosts })
}

export async function getHosts() {
    const { hosts = [] } = await browser.storage.local.get("hosts")
    return hosts
}

export async function saveBlockMode(mode) {
    await browser.storage.local.set({ blockMode: mode })
}

export async function getBlockMode() {
    const { blockMode = "full" } = await browser.storage.local.get("blockMode")
    return blockMode
}

17:41 - Persisting hosts to storage

// host.js

export async function addHost(host, blockMode) {
    if (!host)
        return

    const granted = await browser.permissions.request({
        origins: [`*://${host}/*`, `*://*.${host}/*`]
    })

    if (!granted)
        return

    if (blockingMode === "full")
        await createRules([ host ])

    await registerScripts([ host ])

    let existingHosts = await getHosts()
    let updatedHosts = [ ...existingHosts, host ]
    await updateHosts(updatedHosts)
}

17:51 - Reading from storage

// options.js

let existingHosts = await getHosts()
let blockMode = await getBlockMode()

displayBlocklist(existingHosts)

18:00 - Switching block modes

// host.js

export async function userDidSwitchMode(blockMode) {
    await saveBlockMode(blockMode)

    if (blockMode === "full") {
        let hosts = await getHosts()
        await createRules(hosts)
    } else
        await removeAllRules()
}

19:01 - Adding a background script

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,
  
    "icons": {
        "512": "images/icon.svg"
    },
  
    "options_page": "options.html",
  
    "permissions": [
        "declarativeNetRequestWithHostAccess",
        "scripting",
        "storage"
    ],
  
    "optional_host_permissions": [ "*://*/*" ],
  
    "background": {
        "scripts": [ "background.js" ],
        "type": "module"
    }
}

19:39 - Background script

// background.js

import { registerScripts } from "./utilities/scripting.js"
import { getHosts } from "./utilities/storage.js"

browser.runtime.onInstalled.addListener(async (details) => {
    if (details.reason !== "update")
        return

    const hosts = await getHosts()
    await registerScripts(hosts)
})

22:49 - Package your web extension into an app for Xcode
```
xcrun safari-web-extension-packager --copy-resources /path/to/ShinyOnTrack
```

23:32 - Adding the nativeMessaging permission

{
    "manifest_version": 3,
    "name": "Shiny OnTrack",
    "description": "Stay on track while you browse the web",
    "version": 1.0,
  
    "icons": {
        "512": "images/icon.svg"
    },
  
    "options_page": "options.html",
  
    "permissions": [
        "declarativeNetRequestWithHostAccess",
        "scripting",
        "storage",
        "nativeMessaging"
    ],
  
    "optional_host_permissions": [ "*://*/*" ],
  
    "background": {
        "scripts": [ "background.js" ],
        "type": "module"
    }
}

23:40 - Sending a native message

// background.js

import { registerScripts } from "./utilities/scripting.js"
import { getHosts } from "./utilities/storage.js"

browser.runtime.onInstalled.addListener(async (details) => {
    if (details.reason !== "update")
        return

    const hosts = await getHosts()
    await registerScripts(hosts)
})

export async function requestBioAuth() {
    const message = { message: "requestBioAuth" }
    const response = await browser.runtime.sendNativeMessage(message)
    return response?.success
}

23:55 - Handling native messages

// SafariWebExtensionHandler.swift

import LocalAuthentication

class SafariWebExtensionHandler: NSObject, NSExtensionRequestHandling {
    func beginRequest(with context: NSExtensionContext) {
        let request = context.inputItems.first as? NSExtensionItem
        let message = request?.userInfo?[SFExtensionMessageKey] as? [String: Any]

        if message?["message"] as? String == "requestBioAuth" {
            let lAContext = LAContext()
            Task {
                do {
                    let success = try await lAContext.evaluatePolicy(
                        .deviceOwnerAuthenticationWithBiometrics,
                        localizedReason: "Authenticate to change blocked sites"
                    )
                    self.reply(context: context, success: success)
                } catch {
                    self.reply(context: context, success: false)
                }
            }
        }
    }
}

24:25 - Replying to a native message

// SafariWebExtensionHandler.swift

import LocalAuthentication

class SafariWebExtensionHandler: NSObject, NSExtensionRequestHandling {
    func beginRequest(with context: NSExtensionContext) {
        let request = context.inputItems.first as? NSExtensionItem
        let message = request?.userInfo?[SFExtensionMessageKey] as? [String: Any]

        if message?["message"] as? String == "requestBioAuth" {
            let lAContext = LAContext()
            Task {
                do {
                    let success = try await lAContext.evaluatePolicy(
                        .deviceOwnerAuthenticationWithBiometrics,
                        localizedReason: "Authenticate to change blocked sites"
                    )
                    self.reply(context: context, success: success)
                } catch {
                    self.reply(context: context, success: false)
                }
            }
        }
    }

    private func reply(context: NSExtensionContext, success: Bool) {
        let response = NSExtensionItem()
        response.userInfo = [SFExtensionMessageKey: ["success": success]]
        context.completeRequest(returningItems: [response], completionHandler: nil)
    }
}

- 0:00 - Introduction
- Learn how Safari web extensions — built with HTML, CSS, and JavaScript and packaged inside an app — can run across iOS, iPadOS, macOS, and visionOS. Preview the distraction-blocker extension built throughout the session, which offers a 10-minute light mode and a full redirect mode.
- 3:23 - Get started
- Set up an extension from scratch by writing a manifest.json file, then add a popup UI so the extension is reachable from Safari's toolbar. The same project runs unchanged across every Apple platform that ships Safari.
- 7:23 - Block content
- Use the declarativeNetRequest API to block, modify, and redirect network requests, and declare the host permissions — including optional host permissions — that let users grant access on the sites where the extension should run.
- 14:40 - Modify webpages
- Inject content into pages with content scripts to render a countdown timer on distracting sites. Register scripts dynamically with the scripting API and persist user preferences and per-host state using the storage API and a background service worker.
- 19:53 - Package and distribute
- Submit a Safari web extension to the App Store using App Store Connect, and share beta builds with testers through TestFlight.
- 22:33 - Communicate with your app
- Generate an Xcode project with the Safari Web Extension Packager, then use native messaging to pass requests between the JavaScript extension and its containing app — unlocking platform features like Local Authentication that aren't available to web APIs.
- 26:04 - Next steps
- Download the sample project, explore the cross-browser WebExtensions documentation on MDN, and file feedback through Feedback Assistant or bugs.webkit.org.

「今すぐ始める」を詳しく見る

最新情報

プラットフォームを詳しく見る

特集

テクノロジーを詳しく見る

特集

コミュニティを詳しく見る

特集

ドキュメントを詳しく見る

リリースノート

ダウンロードを詳しく見る

特集

サポートを詳しく見る

特集

クイックリンク

関連する章

リソース

関連ビデオ

WWDC26