Create Safari Web Inspector Extensions

ハイライト

WebKit チームの Devin Rousso が、Safari の Web Inspector の拡張機能を作成する方法を説明します。 Web Inspector 拡張機能は、クロスブラウザー Web Extensions 標準と DevTools API に基づいて構築されており、開発者は Web Inspector にカスタムタブを追加できます。

主要内容

Web Inspector は、Web ページをデバッグするための Safari の主要ツールです。 [要素] などの組み込みタブがあり、一般的なネットワーク、DOM、スタイル、スクリプトのデバッグタスクもカバーできます。

問題は、実際のプロジェクトでは要件がさらに狭いことが多いということです。 JavaScript フレームワークをデバッグしたい場合や、Web ページ内で Open Graph メタデータを一元的に表示したい場合があります。このようなツールは特殊すぎるため、汎用デバッガーに直接接続できません。

(00:47) Safari 16 の Web Inspector 拡張機能によりエントリが提供されます。開発者は、クロスブラウザー Web 拡張機能と DevTools API に基づいて Web Inspector に独自のタブを追加できます。

このセッションでは、例として Open Graph 拡張機能を使用します。 Web ページ内のリンクプレビューに使用されるタイトル、説明、画像を読み取り、Web インスペクターのカスタムタブに表示します。

詳細

Safari 拡張機能アプリを開始する

(02:00) Web Inspector 拡張機能と Safari Web 拡張機能は同じ配布方法に従い、App Store のアプリを通じて配布されます。新しいプロジェクトは、Xcode の Safari Extension App テンプレートを使用して作成できます。

他のブラウザ用の Web 拡張機能がすでにある場合は、Xcode に含まれる変換ツールを使用できます。セッションで言及されたコマンドは次のとおりですsafari-web-extension-converter、入力には以下が含まれますmanifest.json拡張機能ディレクトリの後に、ビルドして実行できるアプリプロジェクトが生成されます。

コンセプト例:

safari-web-extension-converter ./MyExtension

キーポイント:

1 行目は、Xcode に付属の変換ツールを呼び出します。 -./MyExtensionWeb 拡張機能がすでに存在するディレクトリを指定します。
このディレクトリには次のものが含まれている必要がありますmanifest.jsonマニフェストは拡張機能のルート設定ファイルであるためです。

マニフェストで開発ツールの背景ページを宣言する

(03:06) Web Inspector 拡張機能の構造は、マニフェスト、アイコン、ページ、スクリプト、スタイルを備えた通常の Safari Web 拡張機能の構造と非常によく似ています。違いは、専用の開発ツールの背景ページも必要であることです。

このページは、Web Inspector 拡張機能の舞台裏のロジックを担当します。 DevTools API にアクセスし、Web インスペクターに表示されるカスタムタブを作成します。

コンセプト例:

{
  "devtools_page": "devtools_background.html"
}

キーポイント:

行 2 は、マニフェスト内の devtools 背景ページを宣言します。 -devtools_background.htmlWeb インスペクターを開いたときに作成されます。
通常の背景ページ、コンテンツスクリプト、ポップアップが使用されていない場合は、拡張機能の実行面を減らすためにプロジェクトとマニフェストから削除できます。

各 Web インスペクターには独自のインスタンスがあります

(03:43) devtools の背景ページは 1 つの Web Inspector ウィンドウのみを提供します。ユーザーが複数のページを同時に検査する場合、各 Web インスペクターは devtools バックグラウンドページの独自のインスタンスを持ちます。

これは状態管理に影響します。拡張機能では、デフォルトでタブページの状態をグローバル状態として扱うことはできません。検査される各ページは、devtools バックグラウンドページと devtools タブページの別個のセットに対応する場合があります。

「Web インスペクター」タブの作成

(06:54) devtools バックグラウンドページの中心的なタスクは、Web Inspector でカスタムタブページを作成することです。セッションの例では、タブ名、アイコンパス、タブページ HTML の 3 つのパラメータを使用します。

コンセプト例:

browser.devtools.panels.create(
  browser.i18n.getMessage("extensionName"),
  "images/logo.svg",
  "devtools_tab.html"
);

キーポイント:

行 1 は、DevTools パネル作成 API を呼び出して、新しい Web インスペクタータブを作成します。
ライン 2 パスbrowser.i18n.getMessage()UI コピーのハードコーディングを避けるために、ローカライズされた拡張機能名を読み取ります。
行 3 は、ラベルアイコンのパスを渡します。セッションでは、ユーザーがインターフェイスをズームインまたはズームアウトしたときにアイコンが鮮明なままになるように、SVG ベクターグラフィックを使用することをお勧めします。
4 行目は、実際にユーザーに表示される HTML ページを指定します。

(07:02) Devin Rousso は、ほぼ常にタブページを作成することを推奨しています。理由は簡単です。拡張機能に権限が必要な場合、Safari は Web Inspector 内に権限プロンプトを表示でき、ユーザーはツールの場所を確認しながら認証を完了できます。

検査されたページで JavaScript を実行します

(11:45) Web Inspector 拡張機能の一般的なタスクは、検査されたページからデータを抽出することです。 Safari 16 の特典devtools.inspectedWindow.eval()これにより、現在の拡張機能が属する Web インスペクターによって検査されているページが自動的に特定されます。

公式コードスニペット:

// Evaluating scripts inside the inspected page

let result = await browser.devtools.inspectedWindow.eval("foo.bar()");

キーポイント:

回線 3 の通話browser.devtools.inspectedWindow.eval()。
渡された文字列は、チェックされたページで実行されます。 -await実行結果が返されるのを待って、拡張機能は次のことができます。result独自の devtools タブページにレンダリングします。
API は、現在の Web インスペクターに対応するページに自動的に関連付けられます。これは、ユーザーが複数のページを同時に検査するのに適しています。

###フレーム実行コードを指定する

(12:27) デフォルトでは、eval()式はチェックされているページのメインフレームで実行されます。ページに複数のサブフレームがある場合、拡張子を渡すことができますframeURL対象フレームを指定します。

公式コードスニペット:

// Evaluating scripts inside a frame in the inspected page

let result = await browser.devtools.inspectedWindow.eval("foo.bar()", {
    frameURL: "http://example.com/",
});

キーポイント:

3 行目はまだ使用していますbrowser.devtools.inspectedWindow.eval()。
2 番目のパラメータはオプションオブジェクトです。
4行目frameURL式を実行するフレームを指定します。
このオプションは、サブフレームからデータを抽出する必要がある場合にのみ必要です。 Open Graph の例では、メインフレームのみを読み取ります。

Open Graph 拡張データフロー

(13:05) 拡張機能の例は、プレースホルダー「Hello World」を実際のタブの HTML、CSS、および JavaScript に置き換えます。 CSSはルートレベルを使用しますcolor-scheme, タブの外観を Web インスペクターの外観と一致させます。

(14:09) 中心となるロジックは、JavaScript の一部をinspectedWindow.eval()。このスクリプトは、検査されたページの DOM をクエリし、共通の Open Graph メタデータ (タイトル、説明、画像、および現在のメタデータ) を読み取ります。document準備完了状態。

コンセプト例:

let result = await browser.devtools.inspectedWindow.eval(`
  ({
    title: document.querySelector('meta[property="og:title"]')?.content,
    description: document.querySelector('meta[property="og:description"]')?.content,
    image: document.querySelector('meta[property="og:image"]')?.content,
    readyState: document.readyState,
  })
`);

キーポイント:

1 号線が通過しますinspectedWindow.eval()チェックしているページにスクリプトを送信します。
行 3 の読み取りog:titleメタデータ。
4行目の読み取りog:descriptionメタデータ。
5行目の読み取りog:imageメタデータ。
6行目document.readyState一緒に返されると、拡張機能はこれを使用してページの準備ができているかどうかを判断できます。
8行目にありますresultdevtools タブページで対応する HTML 要素を更新するために使用できます。

(15:00) この例ではリッスンも行っていますdevtools.network.onNavigated。検査されたページに移動すると、拡張機能は Open Graph データを再読み取り、Web インスペクターに表示されている情報が現在のページであることを確認します。

コンセプト例:

browser.devtools.network.onNavigated.addListener(() => {
  refreshOpenGraphMetadata();
});

キーポイント:

行 1 は、ページナビゲーションリスナーを登録します。 -onNavigatedDevTools ネットワーク API から。
2 行目は、ナビゲーション後に検査されたページのデータを再読み込みします。・Web Inspectorを開いたまま連続してページを切り替える場合に適した書き込み方法です。

ユーザーエクスペリエンスの詳細

(15:57) このセッションでは最後に 3 つの実践的な提案が行われます。

まず、devtools の背景ページから devtools タブページを作成します。こうすると、Web Inspector 内に権限プロンプトが表示され、ユーザーは権限を与えるために他の場所に移動する必要がなくなります。

2つ目は、優先的に使用することです。activeTab特定のホスト権限を要求するのではなく、権限を要求します。このようにして、Web Inspector 拡張機能のアクセス範囲はより集中し、現在検査されているページにのみ作用します。

3番目にCSSを使用するcolor-schemeまたは、Web 拡張機能 devtools テーマ API が Web Inspector テーマと一致します。デバッグツールは長時間開いたままになることが多く、視覚的な一貫性は読みやすさに直接影響します。

重要ポイント

1. フレームステータス確認タブを作成する

やるべきこと: 現在のルーティング、ページのステータス、およびキーストアデータを表示する内部フロントエンドフレームワーク用の Web インスペクタータブを作成します。
実行する価値がある理由: セッションで使用方法を説明しますinspectedWindow.eval()チェックしたページのデータを読み込み、devtoolsタブページに結果を表示します。
開始方法: まず開発ツールの背景ページを作成してから使用します。browser.devtools.panels.create()タブページを追加し、タブページを渡すbrowser.devtools.inspectedWindow.eval()ページ内でデバッグエントリ関数を呼び出します。

2. SEO とソーシャル共有チェッカーを作成する

内容: Open Graph、Twitter Card、正規 URL、ページタイトルを読み取り、不足している項目を Web Inspector で直接提供します。
実行する価値がある理由: Open Graph の例では、メタタグの読み取り、準備完了状態の処理、結果のレンダリングのパスを説明しました。
開始方法:からdocument.querySelector()ターゲットのメタタグを読み取ります。ページの準備ができていない場合は、少し待ってからもう一度試してください。ナビゲーション中に使用されるbrowser.devtools.network.onNavigated結果を更新します。

3. iframe コンテンツ配置ツールを作成する

何をすべきか: ページ内のサブフレームをリストし、開発者がチェックスクリプトを実行するフレームを選択できるようにします。
実行する価値がある理由: セッションが明確に示していますframeURLマルチフレームページから目的のデータを抽出するのに適したオプションです。
開始方法: まずメインフレームでフレーム URL を収集し、ユーザーが選択した URL をbrowser.devtools.inspectedWindow.eval()のframeURLパラメータ。

4. プロジェクトの標準監査ツールを作成する

対処方法: ページがチームの仕様に準拠しているかどうか (指定されたデータ属性があるかどうか、デバッグタグを読み込むかどうか、必要な埋め込みフィールドを出力するかどうかなど) を確認します。
実行する価値がある理由: Web Inspector 拡張機能は、個人またはチームのワークフローに適しています。セッションの冒頭では、一般的な開発者ツールが組み込みシナリオに適していないシナリオをカバーできると具体的に述べています。
開始方法: ページ上で実行される JavaScript 式として仕様チェックを記述し、結果を devtools タブページに返し、成功した項目と失敗した項目をリストに表示します。

Create Safari Web Inspector Extensions

ハイライト

主要内容

詳細

Safari 拡張機能アプリを開始する

マニフェストで開発ツールの背景ページを宣言する

各 Web インスペクターには独自のインスタンスがあります

「Web インスペクター」タブの作成

検査されたページで JavaScript を実行します

Open Graph 拡張データフロー

ユーザーエクスペリエンスの詳細

重要ポイント

1. フレームステータス確認タブを作成する

2. SEO とソーシャル共有チェッカーを作成する

3. iframe コンテンツ配置ツールを作成する

4. プロジェクトの標準監査ツールを作成する

関連セッション

コメント

ハイライト

主要内容

詳細

Safari 拡張機能アプリを開始する

マニフェストで開発ツールの背景ページを宣言する

各 Web インスペクターには独自のインスタンスがあります

「Web インスペクター」タブの作成

検査されたページで JavaScript を実行します

Open Graph 拡張データ フロー

ユーザーエクスペリエンスの詳細

重要ポイント

1. フレームステータス確認タブを作成する

2. SEO とソーシャル共有チェッカーを作成する

3. iframe コンテンツ配置ツールを作成する

4. プロジェクトの標準監査ツールを作成する

関連セッション

コメント

Open Graph 拡張データフロー