Safari Web Inspector Extensionの作成

(音楽) WebKitチームのエンジニア Devin Roussoです SafariのWeb Inspector Extensionを作る エキサイティングな機会を ご紹介したいと思います Web Inspectorは Appleプラットフォームで コンテンツをデバッグする 主要デベロッパツールです 必要な機能はすでに 数多く搭載されていますが Web開発において 汎用的な開発者向けツールに 搭載の難しい領域が しばしば あります 人気のあるJavaScript ライブラリをデバッグする または作業内容により 特化が必要な場合です Web Inspectorの Extensionは個人的な ワークフローシナリオの 素晴らしい解決方法です

クロスブラウザ対応の WebExtensionとDevTools APIを活用することで Safari16に独自タブを追加できます では Extensionの動作を 見てみましょう お見せするのは ご自身で作る方法です まずは Safariの Extensionの設定を開きます

Web Inspectorの Extensionを有効にします 環境設定を閉じ ページを確認してみましょう

開発メニューから Web Inspectorを表示します エレメントタブなど多くの 組み込みタブだけでなく 先ほど有効にした Web Inspectorの Extensionのタブも表示します このExtensionを有効に したばかりなので 現在の検査ページで 動作許可をする必要があります 他のエクステンションと同様 許可期間オプションがあり Web Inspector以外の Extensionと同じように 1日間アクセスが できるようにします Open Graphはセッションで 構築するものです よくあるソーシャルメディアの メタデータは Webサイトのメッセージや ソーシャルメディアサイトの リンクプレビューに ページを表示します Extensionでできることを 簡単に説明した後 どのように構築されているか 説明します 他の Safari Web Extensionと同様に App Storeで 配布しています

Extensionを自作するには AppleのApp作成ツール MacやiOS Appを作成するツール Xcodeが必要です Xcodeには新しいSafari Extension Appの作成に 役立つプロジェクト テンプレートもあります 既存のWeb機能は 他のブラウザ用に 作成したもので Xcodeにバンドリングする 変換ツールにも使えます ターミナルからsafari-web- extension-converterを実行 manifest.jsonファイルを 含むディレクトリを指定し Extensionディレクトリへ パスを渡すだけです Extensionの完全なApp プロジェクトが作成され ビルドおよび実行の 準備が整います

このツールの詳細は WWDC 2020の 「Safari Web Extensionの導入」や オンラインドキュメントを ご確認ください 今日は Extensionの 基本的な構造について説明し Extensionでコードを 最適に評価する方法と ユーザーにとって ベストプラクティスを解説します さあ はじめましょう

Web Inspector Extensionは ツールバーアイコン バックグラウンドページ コンテンツスクリプトなど 他のSafari WebExtension同様 devtoolsバックグラウンドページもご用意 実際どのように動作するか 見てみましょう 典型的なSafari Web Extensionの構造で Manifestファイルで 基本的な内容を宣言します 拡張子について 名前 アイコン 説明などについてです Extensionの舞台裏ロジックを すべて処理するための バックグラウンドページを 宣言することができ また ユーザーが訪問する Webページに機能的に 使用するコンテンツ スクリプトを宣言できます Web Inspector Extensionに 他のページも混在しています まず Web Inspector Extensionの 舞台裏のロジックに 必要なdevtoolsバックグラウンド ページがあります このページでは 独自のdevtools APIと 限定されたコンテンツスクリプトの APIにのみアクセスが可能です devtoolsバックグラウンドページから Web Inspectorに表示される devtools のタブページを 作成することができます しかし1つのWeb Inspectorに 対してのみです 複数のWeb Inspectorの場合 それぞれバックグラウンドページの インスタンスがあり 関連Web Inspectorが 開いている間は インスタンスが維持されます そのため 各devtoolsのタブページも 複数存在する 可能性があります 構造が実際にどのように 見えるかを見てみましょう Open Graph Web Inspector Extensionを作り始めます

まずXcodeで新しい プロジェクトを作成します

プロジェクトタイプは Safari Extension Appです macOSのみが必要ですが iOS機能を追加したい場合のために マルチプラットフォームで そのままにしておきます 「Open Graph」と名付け 残りはデフォルトとします 使用しているApple デベロッパアカウントで チームとバンドル識別子を 選択する必要があります そして最後に デスクトップに保存しておく

Safari Web Extension ジェネリックプロジェクトが完成です 最初に manifest.json ファイルが表示されます これはすべてのWeb Extensionのルート設定です マニフェストファイルは 拡張制限 画像 ページ スクリプト スタイルなど リソースを参照します Web Inspector Extensionでは バックグラウンドページ コンテンツスクリプト ポップアップなど ファイルのいくつかは 必要ないので マニフェストとプロジェクト 全体から削除します

Web Inspector Extensionを 作りましょう これは マニフェストに devtoolsバックグラウンドページを追加し 対応するファイルと その中で使用する JavaScript ファイルを 作成する必要があります ファイル > 新規作成 > ファイル...からスクロールダウンし

空のファイルテンプレートを 探します

"devtools_background.html" というファイル名にして マニフェストで使用した 名前と一致させます

場所はすでに他のリソースの すぐ隣に設定されており 正しいターゲットなので 何も変更の必要がありません

同じ手順をJavaScriptの ファイルで繰り返します

devtools_background.jsと 呼ぶことにします

最後に devtoolsバックグラウンドページに Javascriptファイルをインクルードします

これは Web Inspectorが開いたとき 作成されます そして 表示されるカスタム タブを作成する役割を担います ほとんどの場合 タブを作成して 必要であれば 他の場所ではなく インラインで 先ほど見た権限を ユーザーに表示させたいと 考えています devtools panel create APIは 3つの単純な引数を取ります 1つ目は タブの名前です ローカライゼーション メソッドを使っています ローカライズされた 名前が表示されます 次の引数は 使用するアイコンのパスです スムーズな拡大縮小のため ベクター画像が必要です ユーザが 拡大できるようにします アイコンを使用するためには プロジェクトの確認が必要です 他のアイコンと一緒に Extensionに必要なものです プロジェクトテンプレートの デフォルトのままです これらをプロジェクトから 削除してみましょう

以前作ったアイコンに 置き換えます

"logo.svg"を含む devtoolsタブ作成に使用する

devtoolsのバックグラウンド スクリプトに戻ります

第3引数は Web Inspectorの タブで使用されるHTMLです 先ほどの画像と同じように このページを作成する 必要があります

"devtools_tab.html"と 名付けることにします APIにつけた名前と 一致させます

しかし devtoolsの バックグラウンドページとは異なり devtoolsのタブページは 実際に表示されます 今回はJavaScriptとCSSの 両方を作成します

JavaScriptのファイル名を "devtools_tab.js"とします

そして CSSファイルは "devtools_tab.css"

このような構成にしたのは いいのですが とりあえずいつもの "Hello World"を追加し 正常に動作していることを 確認します 心配しないでください もう少し深く掘り下げます まだいくつかのアイコンを 交換する必要があるからです Extensionを統一された 一貫した外観にするためです まずはデフォルトの 大きなアイコンを置き換えるために

削除…

そして その場所に 大きなアイコンをドラッグします

この大きなアイコンは Appの一部ですが 右のターゲットに 追加する必要があります

残りのアイコンは すべて アセットカタログにあります 具体的にはAppIconの セットです

アイコンはすでにあります それを貼り付けます デフォルトのアイコンを 全て入れ替えました これからExtensionを 実行します 初回のビルドには 数秒かかることがあります

できました このUIのほとんどは Xcodeの テンプレートから来ていますが アイコンは デフォルトではありません Safari Extension Appを 少なくとも1回起動したら Appを 終了することができます これでSafariがピックアップしたので Appを実行する必要はなくなります

Safariで見る前に これはローカルで ビルドされた署名のない Appなので開発メニューで 署名されていないExtensionを 許可する必要があります これで Safari Extensionの 環境設定で Open Graphが表示されます オンにしてみます Safariのタブを開いて apple.comをブラウズします Extensionを試せます アイコンがツールバーに 表示されています

Extensionタブが タブバーに表示されました 切り替えます 先ほどと同じ許可 プロンプトが表示されます この許可プロンプトが 自動的に表示されます 許可が必要な場合 Extensionによって 先程と同様に 1日だけ許可をします

devtoolsタブのページに 追加した"Hello World"です 以上が Safari 16用の Extensionの作成の基本です おさらいをしましょう devtoolsバックグラウンドページを宣言 Xcodeプロジェクトに追加 そこから Web Inspectorに 新しいタブを作成して カスタムツールを 表示させることができました Extensionが必要とする 許可の検討を始めました Web Inspector Extensionで 検査されるページの コードを評価し Web Inspector内に表示する データを抽出することに 集約されます コードを評価する方法は たくさんあります Web Inspectorの Extensionには 次のような別の APIがあります スクリプトを評価するのに 適しています APIからOpenGraph Extensionの 使い方を見てみましょう devtools extension APIから 検査されたウィンドウで JavaScriptを評価するのが 素早く結果を出す最良の方法です Extensionが動作している Web Inspectorに 関連するページが 自動的に対象となります 同時に複数のページを 閲覧することができます またこのAPIには 正しい結果を得るために 役立つオプションが いくつかあります デフォルトでは APIは検査ページの メインフレームの コンテキストで評価されます フレームURLオプションを 使用すると 別のフレーム内の評価を 指定することができます Extensionがページ内の 多くのサブフレームのうち ひとつからデータを抽出する 場合に必要となります OpenGraph Extensionでは メインフレームだけを 気にすればよいのですが Web Inspector Extensionの スクリプト評価の際には これを念頭に置きます 関数をExtensionで使用して 検査されたページから データを取得して表示する 方法を見てみましょう 先ほど追加したプレース ホルダの"Hello World"を CSSとJavaScriptファイルを 読込むHTMLに置き換えます

基本的なCSSを追加して タブのスタイルを整えます

devtoolsタブを Web Inspectorの他の部分と 同じ外観にするために ルートの `color-scheme` プロパティを宣言して システムのフォント ファミリーを使用して フォントサイズを継承し より重要なテキストの色を 一致させるようにしています 機能性に関しては まずテキストを 追加することから始めます このページにはメタデータが ない場合に備えてです Web Inspectorでは Extensionのローカライズ 文字列を他の場所と同様に 使えることに注意して下さい 同じローカライズ文字列の 識別子を ファイルに追加する 必要があります

次に 作成したJavaScriptは 強力なdevtools inspected Window eval APIに 提供することで 検査されたページで 評価することができます この場合 検査されたページのDOMに 一般的なopengraphの メタデータ 特にタイトル 説明文を 照会したいです

そして画像 検査されたページの ドキュメントの 現在の準備状態と同様に 戻り値を通じてdevtools ページにすべて束ねます これが完了したら それぞれのプロパティに 対応するHTML要素を取得し 収集したデータを 表示するように 設定することができます

ドキュメントがまだの場合 時間をおいて再挑戦します

検査ページが移動するたび すべてをやり直したいので devtools network onNavigatedの リスナーを追加します

良さそうです もう一度ビルドしテストします

Web Inspectorを開いたり 開いたまま移動したりすると opengraphのタイトル 説明 画像を見ることができます 新しい強力なWeb Inspector のAPIを使用方法の例と Web Inspector Extension APIを 使用した例です OpenGraph Extensionは 極めて順調です Web Inspector Extensionの devtoolsタブページが 検査されたページで 評価できるようになりました 結果データを取り込んで 素早くアクセスできるよう 使いやすい形で表示するため 加工ができるようになりました Extensionを作成する際に すばらしい体験の実現方法は どのような方法が あるでしょうか？ 常にdevtoolsバックグラウンドページから タブページを作成します この方法でユーザーは タブの表示を確認できます 適切な許可のプロンプトが インラインで表示されます 特定のホスト許可を 要求する代わりに アクティブタブ許可を 使用してみてください Extensionを 可能な限り対象とします また CSSのcolor-scheme プロパティや Web Extension devtools theme APIを使って 全体的なテーマと 一致するよう追加しました Web Inspector Extensionを使って まったく新しいデバッグ ツールを作成する方法と ベストプラクティスを 紹介しました このセッションの 関連リソースにある OpenGraph Web Inspector Extensionをダウンロードし ご自身で詳しくご覧に なりたい方はぜひどうぞ

バグや機能に関するご要望は フィードバックアシスタントを ご利用いただくか Safari開発者フォーラムで チャットをご利用ください WebExtensionsコミュニティ グループの参加も御検討頂き Extensionの未来を作る お手伝いをお願いします

Safari Web Extensionsの 新機能を必ずご確認いただき オンラインドキュメントも ご覧ください Web Inspectorで カスタムツールを作成する 素晴らしい新機能について ご理解いただけたと思います 皆さんがどんな素晴らしい Web Inspectorの Extensionを作成するか 今から楽しみです ご視聴いただき 有難うございました WWDCが素晴らしいものに なることを願っております