Meet Safari Web Extensions on iOS

ハイライト

iOS 15 は、Safari Web Extensions を初めてサポートします。開発者は、標準の WebExtensions API を使用してクロスプラットフォーム拡張機能を作成し、App Store を通じて配布できます。ユーザーは、Safari 設定でオンデマンドで各サイトへのアクセスを許可できます。

主要内容

Web 拡張機能を使用すると、ユーザーは、広告のブロック、Web ページの翻訳、パスワードの管理、コードのハイライト表示など、ブラウザーエクスペリエンスを詳細にカスタマイズできます。これらの拡張機能は HTML、CSS、JavaScript で記述されており、すべての主要なブラウザに共通の WebExtension API 標準に基づいています。

iOS 15 より前は、Safari Web Extensions は macOS でのみ実行できました。 iOS 15 以降、ユーザーは iPhone と iPad に拡張機能をインストールできるようになります。これは、同じ拡張コードが Safari のすべてのプラットフォームユーザーに到達できることを意味します。

iOS の Web 拡張機能との重要な違いが 1 つあります。それは、Web 拡張機能がアプリの一部であることです。ユーザーは、App Store から「拡張機能付きアプリ」をインストールし、Safari の設定で拡張機能を有効にします。この設計により、拡張機能は iOS のセキュリティモデルとプライバシーの原則に準拠することができます。

Sea Creator のサンプル拡張機能は、Web ページ内の海の生き物の名前を絵文字に置き換える、スタートページに毎日の海の知識を表示する、置き換えられた単語の数を追跡するカウンターなど、一般的な使用法を示しています。ユーザーがサイトで初めて拡張機能を有効にすると、Safari は許可リクエストをポップアップ表示し、ユーザーは「このサイトのみ」または「すべてのサイト」へのアクセスを許可するかを選択できます。

詳細

拡張機能とアプリの関係

(04:20) iOS では、Web 拡張機能がアプリの一部として存在する必要があります。

安装 App Store 上的 App
    ↓
在 Safari 设置中启用扩展
    ↓
按站点授予访问权限
    ↓
扩展开始工作

Xcode 13 は、Safari 拡張機能アプリのテンプレートを提供します。新しいプロジェクトを作成するときにこのテンプレートを選択すると、Xcode によって以下が生成されます。

iOS アプリコンテナ
Safari 拡張機能のターゲット
Manifest.json と拡張に必要なベースファイル

キーポイント:

拡張機能はアプリのネストされたターゲットです
アプリ自体は空（キャリアとしてのみ）にすることも、追加機能を提供することもできます
アプリには複数の拡張機能を含めることができます
ユーザーがアプリを削除すると、拡張機能も削除されます

Safari Web Extension Converter

(05:40) すでに他のブラウザー用に作成された拡張機能がある場合は、変換ツールを使用してそれらをすばやく移植できます。

xcrun safari-web-extension-converter /path/to/extension/folder

このコマンドは次のことを行います。

既存の拡張機能のmanifest.jsonを分析する
新しい Xcode プロジェクトを作成します
拡張ファイルをプロジェクトに追加する
iOS/macOS に適合した構成を生成する

キーポイント:

Chrome、Firefox、Edgeなどのブラウザ拡張機能からの変換をサポートします。
異なるブラウザ間の API の違いを自動的に処理します
元の拡張機能のすべての機能を保持します
デュアルプラットフォームプロジェクトをエクスポートして iOS と macOS で実行します

iOS 固有の制限と適応

iOS の拡張機能では、次の制限を考慮する必要があります。

特長	macOS	iOS	説明
サイドバー	サポートされている	サポートされていません	iOS で利用可能なポップアップの置換
開発ツールパネル	サポートされている	サポートされていません	iOS では拡張機能自体をデバッグできません
ネイティブメッセージング	サポート	サポート	コンテナアプリと通信する方法
スタートページ	サポート	サポート	新しいタブページをカスタマイズする

キーポイント:

コードはプラットフォームに対してテストする必要があります。if (navigator.platform.includes('iPad'))
ポップアップは iOS では小さなポップアップとして表示されます
タッチイベントを調整する必要があります (クリック領域を大きくする)
マウスホバリングなどのデスクトップ固有の操作に依存しないようにしてください。

権限モデルとユーザーのプライバシー

(11:20) Safari は、macOS から iOS に権限モデルを継承します。

// manifest.json 中的权限声明
{
  "permissions": ["activeTab", "storage"],
  "host_permissions": [
    "https://*/*"
  ]
}

ユーザーが最初に拡張機能をアクティブ化するときの対話プロセス:

Safari 表示拡張機能がアクセスできるデータの種類
ユーザーが「許可」または「拒否」を選択します。
ユーザーはアクセス範囲を「このサイト」または「すべてのサイト」から選択できます。
ユーザーは Safari 設定でいつでも権限を取り消すことができます

キーポイント:

activeTab権限: ユーザーが拡張機能をアクティブにクリックした場合にのみ、現在のタブにアクセスします。
<all_urls>作業するにはユーザーからの明示的な承認が必要です
ユーザーはサイトごとに個別に権限を設定できます
拡張機能が有効になると、Safari ステータスバーにアイコンが表示されます

デバッグのヒント

(13:15) iOS での拡張機能のデバッグ:

Safariの設定で拡張機能を有効にする
デバイスを Mac に接続します
Safari の [開発] メニューでデバイスとページを選択します。
Web インスペクターには拡張コンテキスト (ポップアップ、背景、コンテンツスクリプト) が表示されます。

キーポイント:

iOS Safari では、設定で「Web Inspector」を有効にする必要があります
一度にデバッグできるコンテキストは 1 つだけ (ポップアップ、背景、コンテンツスクリプト)
使用console.log()Web インスペクターで出力を表示する
使用browser.runtime.sendMessage()テストメッセージング

重要ポイント

コンテンツの抽出とメモ: 記事を読むときに重要な情報を抽出し、コンテナアプリに送信するための拡張機能を開発します。ユーザーが拡張機能アイコンをクリックすると、アプリはネイティブメッセージングを通じて記事のタイトル、URL、選択したテキストを受信し、ローカルデータベースに保存します。入口API：browser.runtime.sendNativeMessage()。
カスタムスタートページ: 拡張機能のmanifest.jsonで宣言されています。chrome_url_overrides新しいタブページをカバーします。ブックマーク、To-Do、またはニュースの概要を表示する、パーソナライズされたスタートページをユーザーに提供します。協力するbrowser.storage.localユーザー設定を保存します。
クロスサイトデータ同期: 利用しますbrowser.storage.syncユーザーの複数のデバイス間で拡張設定とユーザーデータを同期します。ユーザーが一連のブックマークや設定をデスクトップに保存すると、iOS 側がそれらを自動的に同期します。データにはサイズ制限 (1 項目あたり 100KB) があることに注意してください。
プライバシーに配慮したパスワード管理: パスワード入力拡張機能を開発しますが、すべてのフォームを自動的にスキャンするのではなく、ユーザーがアクティブにクリックしたときにのみ現在のサイトパスワードを入力します。使用activeTabアクセス許可はサイト全体のアクセスを置き換え、パスワードはコンテナアプリのキーチェーンに保存され、Web API を通じて公開されません。

Meet Safari Web Extensions on iOS

ハイライト

主要内容

詳細

拡張機能とアプリの関係

Safari Web Extension Converter

iOS 固有の制限と適応

権限モデルとユーザーのプライバシー

デバッグのヒント

重要ポイント

関連セッション

コメント