WWDC Quick Look 💓 By SwiftGGTeam
中文 EN 日本語
Meet Safari Web Extensions

Meet Safari Web Extensions

SafariWeb ExtensionsApp Store
元の動画を見る

ハイライト

Safari は、macOS 上で JavaScript、HTML、CSS で構築された Web 拡張機能をサポートし、Xcode 変換ツール、サイトごとの認証、Web Inspector のデバッグ、ネイティブ メッセージングを提供し、既存の Chrome、Firefox、Edge 拡張機能を Safari および App Store の配布プロセスに追加できるようにします。

主要内容

すでにブラウザ拡張機能をお持ちの場合、最も問題となるのは移行コストであることがよくあります。古い Safari アプリ拡張機能は、Swift または Objective-C に精通しているネイティブ アプリ開発者を対象としています。 Web 開発者がすでに JavaScript、HTML、CSS 拡張機能を持っている場合、Safari に入るためにネイティブ実装を書き直す必要はありません。

このセッションでは、macOS での Safari Web 拡張機能の Safari サポートが発表されました。 Safari のユーザー プライバシー制御を維持しながら、他の主要なブラウザでおなじみの拡張モデルと API を使用します。拡張機能は引き続きネイティブ アプリにパッケージ化されています。アプリがインストールされると、拡張機能も Safari にインストールされ、配布パスは App Store に移動します。

Apple は移行ポータルを Xcode 12 に組み込みます。既存の拡張機能は Safari Web 拡張機能コンバータを使用して Xcode プロジェクトを生成できます。コンバーターはマニフェストを読み取り、現在サポートされていないキーの入力を Safari に求め、拡張機能をネイティブ アプリにパッケージ化します。既製の拡張機能がない場合は、Xcode の Safari 拡張機能アプリ テンプレートを使用して最初から作成することもできます。

後半では、実際の打ち上げまでにいくつかの問題を解決します。アクセス許可は、拡張機能が読みたいサイトを直接読み取れるという意味ではなくなりました。 Safari は、確認のために、activeTab、コンテンツ スクリプト、オプションの権限、および all_url の選択をユーザーに渡します。デバッグ時に、Web インスペクターはポップオーバー、背景ページ、コンテンツ スクリプトを個別に検査できます。コンテナ アプリとデータを交換する必要がある場合、拡張機能はネイティブ メッセージングを通じてアプリ拡張機能およびアプリと通信します。

詳細

コンバーターを使用して既存の拡張機能を Xcode プロジェクトに変換します

(02:16) Safari Web 拡張機能は、他の Safari 拡張機能と同様、ネイティブ アプリにパッケージ化されています。ネイティブ アプリがインストールされると、拡張機能も Safari にインストールされます。このアプリは App Store を通じて配布できます。開発と運用には Xcode 12 以降が必要です。

(02:52) Xcode に付属のコマンドライン コンバーターは 1 回だけ実行する必要があります。拡張機能マニフェストに基づいてデフォルトの Xcode プロジェクトを作成し、拡張機能を含むネイティブ アプリをプロジェクトで構築して実行できるようにします。 Safari で現在サポートされていないキーがマニフェストに表示されると、コンバーターは開発者にプロンプ​​トを表示します。

(04:19) デモ内の Sea Creator 拡張機能がコンバーターによって処理された後、ツールはマニフェスト情報が正しいかどうかを確認するメッセージを表示し、通知 API が現在の Safari バージョンでサポートされていないことも報告します。変換が続行された後、Xcode プロジェクトはデフォルトのアプリを実行できます。このアプリは、拡張機能が有効かどうかを示し、Safari の環境設定を開くボタンを提供します。

キーポイント:

  • コンバーターは、拡張機能ロジックを書き直すのではなく、既存の Web 拡張機能をラップすることを目的として、マニフェスト情報を使用して Xcode プロジェクトを作成します。
  • マニフェスト内の最大のアイコンがアプリのアイコンになります。セッションでは、512 x 512 および 1024 x 1024 のアイコンを追加することをお勧めします。
  • 新しいファイルを後で拡張機能に追加する場合、これらのファイルも Xcode プロジェクトに追加する必要があります。
  • アドホック署名されたアプリの拡張機能は、デフォルトでは Safari に表示されません。テストするときは、まず [開発] メニューを開いてから、署名されていない拡張機能を許可する必要があります。

Xcode から新しい Web 拡張機能を作成するときは、まずマニフェストを確認します

(07:21) 他にブラウザ拡張機能がない場合は、Xcode の Safari 拡張機能アプリ テンプレートを使用して作成できます。すでに Mac アプリをお持ちの場合は、「macOS」タブで Safari 拡張機能ターゲットを追加し、タイプを Web 拡張機能として選択できます。デモのシナリオは、レシピ アプリに Safari 拡張機能を追加して、ユーザーが Safari にレシピを保存できるようにすることです。

(08:44) マニフェストは拡張構造を定義します。namekey はローカライズ可能な文字列を指すことができ、その文字列は locales フォルダーで使用されます。messages.json定義を続けます。拡張機能の 3 つの主要部分は、バックグラウンド スクリプト、コンテンツ スクリプト、ポップオーバーです。

(09:32) バックグラウンド スクリプトには目に見える UI がなく、拡張機能を駆動するロジックを保持できます。コンテンツ スクリプトは Web ページに挿入され、Web ページの JavaScript との競合を避けるために隔離された世界で実行されます。matchesどのドメインに注入するかを決定します。ポップオーバーはブラウザのアクション キーによって定義され、ユーザーがツールバー ボタンをクリックすると表示されます。

キーポイント:

  • マニフェストは、Safari Web 拡張機能のエントリ ファイルです。まず、名前、構造、スクリプト、権限を定義します。
  • バックグラウンド スクリプトは、内部ロジックの拡張に適しています。
  • コンテンツ スクリプトは Web ページの外観と動作を変更できますが、分離された環境で実行されます。
  • 権限キーには、Cookie などの API 名や URL 一致文字列を含めることができます。

権限リクエストを、ユーザーが実際にトリガーした範囲に絞り込みます。

(11:23) Safari の権限モデルは、ブラウジングのプライバシーから始まります。ユーザーが拡張機能をインストールすると、Safari では拡張機能によってアクセスできる Web サイトのデータをユーザーが制御できるようになります。デモでは最初に activeTab を使用します。拡張機能は、ユーザーがツールバー アイコン、コンテキスト メニュー項目、またはキーボード ショートカットを通じて拡張機能を明示的に使用した場合にのみ、現在のタブのページにアクセスしてスクリプトを挿入できます。

(12:52) コンテンツ スクリプトをマニフェストに記述し、それが自動的に wikipedia.org に挿入されるようにすると、Safari はツールバー ボタンに警告バッジを表示します。ユーザーがクリックすると、拡張機能がどの Web サイトにアクセスしたいかが表示され、1 日許可することができます。後で他の Wikipedia ページにアクセスすると、選択内容が記憶され、コンテンツ スクリプトが直接挿入されます。

(14:10) オプションの権限は、非コア機能を処理するために使用されます。 Shiny.com の URL 一致パターンをマニフェストに入力し、ユーザーが [共有] ボタンをクリックしたときにそれを呼び出す方法を示します。browser.permissions.requestこのオリジンへのアクセスをリクエストします。ユーザーが承認した後、拡張機能は共有関連のロジックを実行し続けます。

(16:24) Session が提供するアドバイスは非常に簡単です。最初に activeTab を使用します。 activeTabが適切でない場合は、動作可能な最小限の範囲への拡張をリクエストしてください。非コア機能にはオプションの権限を使用します。拡張機能が実際にすべての Web ページにアクセスする必要がある場合にのみ、all_urls を考慮してください。

キーポイント:

  • activeTab は、Web ページへのアクセスをユーザーのアクションにバインドします。
  • マニフェストで宣言されたコンテンツ スクリプトは、引き続き Safari のサイト認証エクスペリエンスを通過する必要があります。
  • オプションの権限は、サードパーティ サイトの共有や統合などの追加機能に適しています。
  • all_urls により、Safari は拡張機能がすべての Web サイトにアクセスできることをユーザーに通知します。

Web インスペクターを使用してポップオーバー、背景ページ、コンテンツ スクリプトをそれぞれチェックします

(18:16) デモのポップオーバー画像が壊れています。ポップオーバー検査を右クリックすると、拡張リソース URL が moz 拡張スキームにハードコーディングされていることを示すエラーが表示されます。ユーザーのフィンガープリントを防ぐために、Safari が起動されるたびに拡張機能 URL のホストが変更されるため、Safari を固定の safari-web-extension スキームに変更することはできません。

(18:53) 正しい方法は、次のように使用することです。browser.runtime.getURL拡張リソース URL を生成します。修復後は正常に映像が表示できるようになりました。背景ページ [開発] メニューの [Web 拡張機能の背景ページ] から対応する拡張機能を見つけて確認することもできます。

(19:42) コンテンツ スクリプトのデバッグ エントリはページ自体にあります。コンテンツ スクリプトが挿入されたページに移動します。 「検査」を右クリックすると、「ソース」タブに、挿入されたページの拡張スクリプトとスタイルシートがリストされます。コンテンツ スクリプトは分離された世界で実行されるため、コンソールはデフォルトでページの JavaScript ワールドを指します。デバッグするときは、拡張された分離ワールドに切り替える必要があります。

(20:51) 拡張機能の変換時には、いくつかの一般的なバグがあります。ユーザー エージェントのチェックに依存しないでください。機能検出の方が信頼性が高くなります。拡張リソース URL のスキームまたはホストが固定されていると想定しないでください。コンテンツ スクリプトは、DOM コンテンツが読み込まれる前にコンテンツ スクリプトを挿入する必要があると想定できません。これは、ユーザーが最初にページを開いてから、拡張機能によるスクリプトの挿入を承認する可能性があるためです。

キーポイント:

  • ポップオーバー、背景ページ、コンテンツ スクリプトにはすべて独立した検査入り口があります。
  • 渡す拡張リソースURLbrowser.runtime.getURL生成する。
  • コンテンツ スクリプトのコンソールは、拡張された隔離された世界に切り替える必要があります。
  • 拡張機能を変換するときに機能検出を優先し、挿入タイミングの仮定をチェックします。

ネイティブ メッセージングを介して拡張機能とコンテナ アプリを接続する

(22:03) ネイティブ メッセージングにより、アプリと拡張機能が通信できるようになります。 Safari と他のブラウザーの違いは、拡張機能は独自のコンテナー アプリとのみ通信できることです。他のブラウザでも利用可能な API を使用して、背景ページからアプリ拡張機能のネイティブ コードに変換します。browser.runtime.sendNativeMessageまたはbrowser.runtime.connectNative、マニフェストでネイティブ メッセージングのアクセス許可を要求します。

(22:54) 逆メッセージにも対応する入り口があります。アプリ拡張機能のネイティブ コード バックグラウンド ページにメッセージを送信するには、受信したSafariWebExtensionHandler.beginRequestのNSExtensionContext完了ハンドラー。アプリが拡張機能のバックグラウンド ページにメッセージを送信したい場合は、次を使用します。SFSafariApplication.dispatchMessage。使用する前にセッションを渡すことをお勧めしますSFSafariExtensionManager.getStateOfSafariExtension拡張機能が有効になっているかどうかを確認します。

background page -> browser.runtime.sendNativeMessage / browser.runtime.connectNative -> app extension native code
app extension native code -> SafariWebExtensionHandler.beginRequest 的 NSExtensionContext completion handler -> background page
app -> SFSafariApplication.dispatchMessage -> background page
app 与 app extension -> NSUserDefaults 或 XPC connection

(24:01) ネイティブ アプリ UI で実行されたテキスト置換スクリプトの数を表示する例を示します。プロセスは次のとおりです。マニフェストはネイティブ メッセージング権限を追加し、コンテンツ スクリプトはバックグラウンド ページに通知し、バックグラウンド ページを呼び出します。sendNativeMessage、ネイティブ ハンドラーがメッセージを読み取り、書き込みます。NSUserDefaults、親アプリはこの値を読み取り、UI を更新します。デフォルトを記述するときは、スイートを指定する必要があります。バンドル識別子は、アプリとアプリ拡張機能を同じアプリ グループに入れるために使用されます。

キーポイント:

  • Safari では、拡張機能が独自のコンテナ アプリと通信することのみが許可されます。
  • バックグラウンド ページがネイティブ メッセージを送信する前に、マニフェストでネイティブ メッセージングのアクセス許可を要求する必要があります。
  • アプリはバックグラウンド ページにメッセージを送信する前に、Safari で拡張機能が有効になっていることを確認する必要があります。
  • アプリとアプリ拡張機能の間でデータを共有するときに使用できますNSUserDefaultsまたはXPC接続。

重要ポイント

  • 既存の Chrome または Firefox 拡張機能を Safari バージョンに移行します: 手順: 既存の拡張機能を使用して Safari Web 拡張機能コンバータを実行し、Xcode プロジェクトを生成して、Safari の環境設定で有効にします。実行する価値がある理由: セッションは、コンバーターがマニフェストを読み取り、サポートされていないキーの入力を求め、拡張機能をネイティブ アプリにパッケージ化することを明確に示しています。開始方法: まず、512 x 512 および 1024 x 1024 のアイコンを完成させ、次にプロジェクトを変換し、最後にすべてのマニフェスト警告を確認します。

  • サイトによってページ ツールを承認する: 対処方法: デフォルトでは、ユーザーがツールバー ボタンをクリックした後のみ拡張機能が現在のタブにアクセスできるようにし、その後、特定のサイトに対して長期の承認を要求します。実行する価値がある理由: activeTab、コンテンツ スクリプト、およびオプションの権限はすべてセッションによって表示され、ユーザーが実際に同意したページにアクセス範囲を制限できます。開始方法: まず、activeTab を使用してコア アクションを完了し、次に非コア サイトをオプションのアクセス許可に統合します。

  • Safari 拡張機能のデバッグ チェックリストを作成する: やるべきこと: チームのポップオーバー、背景ページ、およびコンテンツ スクリプトの 3 つの検査エントリを修正しました。実行する価値がある理由: セッションの画像 URL のバグは、クロスブラウザー拡張機能がリソース URL、隔離された世界、挿入タイミング、およびユーザー エージェントの検出で頻繁に問題を起こすことを説明しています。開始方法: まず、リソース URL を次のように変更します。browser.runtime.getURL、次に Web インスペクターを使用して、コンテンツ スクリプトの分離ワールド検証状態に切り替えます。

  • 拡張機能で結果をネイティブ アプリ UI に同期させます: 対処方法: 拡張機能の実行時間、Web ページの処理結果、またはユーザー アクションをコンテナ アプリに同期させます。実行する価値がある理由: セッションでは、コンテンツ スクリプト、背景ページ、アプリ拡張機能のネイティブ コード、NSUserDefaults親アプリへの完全なリンク。開始方法: まずネイティブ メッセージングのアクセス許可をリクエストし、次にバックグラウンド ページから最小限のメッセージを送信し、ネイティブ ハンドラーをアプリ グループ スイートに書き込みます。

  • サイト全体のインジェクション拡張機能の権限チェックを設計する: 対処方法: 拡張機能が本当に all_urls を必要とするかどうか、およびより狭い URL 一致パターンに変更できるかどうかを確認します。実行する価値がある理由: Session は、拡張機能がすべての Web ページにアクセスする必要がない場合、Web ページのアクセス要求をより正確に制限する必要があることを明示的に通知します。開始方法: 既存のコンテンツ スクリプトのターゲット ドメインをリストし、最初にそれらを特定の一致に変更してから、追加のサイトをオプションの権限に設定します。

関連セッション

  • Web Inspector の新機能 - Web Inspector を使用してポップオーバー、背景ページ、コンテンツ スクリプトをチェックする方法を学んだ後、このシステムが Safari デバッグ ツールを補完できるかどうかを確認してください。
  • Web 開発者向けの新機能 - Safari Web Extensions は Safari と WebKit 上で実行されます。これは、同年の Web プラットフォームのアップデートの背景を提供します。
  • WKWebView の機能強化をご覧ください - Safari Web Extensions はネイティブ アプリ コンテナに依存しており、WKWebView はアプリと Web コンテンツの間のインターフェイスを理解するのに役立ちます。
  • Web 用の Face ID と Touch ID について — どちらも Safari Web プラットフォームの機能であり、Web 認証 API が Web サイトのログインにどのようにデバイス認証をもたらすかを示しています。
  • ワンタップ アカウント セキュリティ アップグレード — アカウント認証変更拡張機能は、Safari 拡張機能と同様に、Web サービスとシステム サービスをユーザー認証エクスペリエンスに接続します。

コメント

GitHub Issues · utterances