Safari Web Extensionにおける改善点

♪ ♪ こんにちは エリー・エプスカンプハントです Safariの エンジニアです Safariの新しい Web Extensions API について説明します

昨年 Safariは macOSにおいて Web Extensions APIの サポートを追加しました 嬉しいことに 昨年からSafariの 新しいExtensionで このAPIが 使われています このリリースに伴い Web ExtensionがiOSと iPadOSにも導入されます

これらにおける Extensionについての詳細は “iOSでの Safari Web Extensionsの紹介”を ご覧ください Safari Web Extension自体について さらに知りたい方は 昨年のセッションを ご覧ください 今日は３つの新しいExtension APIについて説明します 最初に パフォーマンス向上のため Extensionを構成する 非永続的バックグラウンド ページについて説明します 続いてdeclarative net requestと呼ばれる コンテンツブロッキング APIを紹介します 最後にExtensionで Safariのタブを カスタマイズする 方法を紹介します これらについて紹介する前に 永続的に動き続ける バックグラウンドページ についてお話しします Web Extensionは JavaScriptやHTMLや CSSによって作られます 中にはバックグラウンドページという バックグラウンドで 動作するスクリプトを 持つExtensionもあります UI上には現れませんが タブが開いたり メッセージなど イベントに 反応します 永続的バックグラウンド ページは閉じられません 例えば ２つのExtensionを 動作させている場合 ２つのバックグラウンド ページが常に動いています ８つのExtensionを 使っている場合は ８つの処理が常に バックグラウンドで 行われます ここで問題が起きます この場合 見えないタブの ようなものなので ユーザーはタブを 閉じられず メモリは消費し ＣＰＵ使用率が上がります Extensionを使うために パフォーマンスを 下げるのは 本末転倒です そのために Extensionは非永続的 バックグラウンドページを 採用できます ページを必要に応じて 呼び出し Extensionを有効活用し ブラウジング環境全体が 向上します

iOSの場合は 非永続的バックグラウンド ページが必要になります リソースに 制約があるからです 非永続的バックグラウンド ページについて ご理解いただけたところで 動作について 見てみましょう 非永続的バックグラウンドページは イベントを中心に そのライフタイムが構成されています バックグラウンドページは タブが閉じたり Extensionの他のパートからの メッセージなどに 反応するため イベントリスナーを 登録します これを元に ブラウザがページを ロードすべきか 判断します 例を見てみましょう Extensionがオン または更新されると バックグラウンドページを ロードし イベントリスナーを 登録します この例では バックグラウンドページに コンテンツスクリプトからの メッセージの リスナーが １つあります 時間が経っても コンテンツスクリプトが メッセージを 送信しなければ 非動作状態のため ブラウザは バックグラウンドページを アンロードします

ですが コンテントスクリプトが メッセージを送信した場合

バックグラウンドページが 立ち上がり メッセージを受信し それに対し反応します

そのイベントの後 バックグラウンドページは ロードされ続けます

ですが しばらくして またイベントがなくなると アンロードされます この例を踏まえ 実際に非永続的 バックグラウンドページを 実装する方法について 説明します まず マニフェストのバック グラウンドセクションに persistentキーを 追加します 必要に応じ バック グラウンドスクリプトに さらに変更を加えます バックグラウンドページは アンロードできるので 必要に応じ ストレージAPIを使い ディスクにデータを 書き込みます browser.storageで バックグラウンドページの データを保持します 次にイベントリスナーを スクリプトのトップレベルに 登録してください 他のイベントリスナーの completionハンドラに リスナーを 登録しないでください また タイマーではなく browser.alarmsを 使用してください バックグラウンドページが アンロードされると タイマーは起動されません 避けるべきコードが あります browser.extension. getBackgroundPageを 削除してください すでにアンロードされている場合 バックグラウンドページは 立ち上がりません 最後に webRequestリスナーを すべて削除します webRequestは トラフィックを分析する APIですが webRequestイベントの 発生頻度が高いため このAPIは 非永続的バックグラウンド ページと互換性がありません それでは 実際にSafariで 試してみましょう 昨年のSafari Extensionの セッションの サンプルコードを 修正して使っています このExtensionは Webページ内の単語を 絵文字に置換し 総数をレポートします まず 何も変更せずに このExtensionを 見てみましょう persistentキーが そのままなので バックグラウンドページは デフォルトで永続になります ExtensionがあるAppを ビルドして実行し Safariの環境設定で オンにします ではWebページで Extensionを使ってみましょう ウィキペディアで 魚のページを見てみましょう ポップオーバーを 併せて使います

単語置換ボタンを クリックすると “Fish”がすべて 魚の絵文字に 変換されました 再度クリックすると 変換された数が 表示されます このExtensionの バックグラウンドページが この数をトラッキングし続けます アクティビティモニタで Extensionのプロセスを 見てみましょう このように Extensionコードが 実行中であることが 表示されます 永続的バックグラウンド ページを使用するので 数時間後にこのExtensionを 使うのをやめても Safariを使用時は 常に実行中になります では このExtensionを 少し改良して バックグラウンドページを 非永続化しましょう マニフェストのバック グラウンドセクションに persistentキーを 追加します Extensionが実行中か 見てみましょう ExtensionがあるAppを ビルドして実行し Safariに戻り ページをリロードし 単語置換します 少し待ち バックグラウンドページを アイドル状態にします デモ用にSafariに 変更を加えているので バックグラウンドページが いつもより速くアンロードされます アンロードしたことを 開発メニューのWeb Extension バックグラウンドページから 確認 または バックグラウンドページの 調査ができます アンロード時に ページの調査を行うと 即座にロードされます バックグラウンドページが アンロードされたら ポップオーバーを 再度開きます 先ほどは564と 表示されていましたが ゼロに変わりました Extensionに バグがあるためです 非永続的バック グラウンドページとともに Extensionが正しく 動作するよう 戻って変更を加えます これが バックグラウンドページの コードです このページは２つのことを 実行します 単語の置換数の カウントの追加と 現在数のレポートです このグローバル変数が バグの原因です バックグラウンドページが リロードされると カウントが リセットされます 564語が置換された状態は 維持されず失われます これを回避するために browser.storageを使い 必要に応じ単語数を 保存 読み込みましょう まずストレージから数を 読み込むコードを追加します

ストレージAPIからの 結果を解析して 欲しい値を取得します

そして その値が 更新されるたびに ストレージに戻して 保存します そしてonMessageリスナーを コールバックに 取り込みます

ここで問題発生です イベントリスナーは スクリプトのトップレベルに 登録しなければ ならないので これではダメですね 再構築してみましょう ストレージの呼び出しを リスナーの方へ移します

ストレージAPIを 使用するので マニフェストにストレージ 権限を追加します

再度Appをビルドし Extensionを試します

先ほどと同じことを やってみます ウィキペディアを開き リロードします 単語置換して 少し待ち バックグラウンドが アンロードになります

できました ポップオーバーが 正しい数字を レポートしています 永続的バックグラウンド ページを持つExtensionを 非永続的を使用するよう 変換することに 成功しました アクティビティモニタで 確認すると バックグラウンドページの アンロード後は Extensionのプロセスは もう表示されません 非永続化したためです 以上 Safariの非永続的な バックグラウンドページの サポートについての ご紹介でした iOS用のExtensionを 開発される場合は 必ず非永続化を 行ってください

続いて 新しいコンテンツ ブロッキングAPIである declarative net requestを紹介します Safariは2015年からWebKit コンテンツルールリストで 構築したコンテンツブロッカー Extensionをサポートしています 今年 いくつか 改良が加えられました 詳細はAppleのドキュメントを ご覧ください

これまで Web Extensionには 高速でプライバシー保護し ブロックする機能は ありませんでした Chromeから 発表されたばかりの declarative net request APIは それらをすべて カバーします 基本について 説明します

コンテンツブロックの ルールは JSONフォーマットで 書かれます JSONルールはルールセット と呼ばれるファイルに 論理的に グループ化されており ルールセットを個別に オン/オフできる JavaScript APIが 用意されています ChromeもこのAPIを サポートしているため １つのコンテンツブロッカー を複数のプラットフォーム 複数のブラウザで 動作させることができます declarative net requestを使った ブロックのルールの 書き方を説明します まずマニフェストで ルールセットを指定します ルールセットを１つ 用意しました declarative net request permissionも 追加してください declarative net requestの例です ルールセットで指定した ファイルです 固有のidと priorityがあり これがルールを 適用する順番を決めます

actionはリソースの スキームをブロック 許可 またはアップグレード することができます conditionは このルールを実行する条件を Safariに伝えます conditionの ディクショナリには ２つのキーがあります regexFilterは リソースのURLにマッチし resourceTypesは ブロックする リソースのタイプを 指定します このconditionの ディクショナリで サポートできることを 見てみます

これがdeclarative net request ruleを 使用できる リソースタイプです

excludedResource Typesで マッチしたくない タイプを指定できます

domainTypeは 読み込むリソースの ドメインと ドキュメントの ドメイン関係に基づき リソースをブロック することができます first-partyは URLがドキュメントと同じ セキュリティオリジンを 持つロードです それ以外は third-partyです

Case-Sensitiveは regexFilterが 大文字小文字を 区別するか 制御します デフォルトでは trueです

declarative net request APIを使い コンテンツブロッカー Web Extensionを構築してみましょう まずマニフェストに declarative net requestを追加 そのセクションに IDとオンであると 示すbool そして ルールを含む JSONファイルへの パスを記述し ルールセットを追加します declarative net requestのpermissionも 追加します ルールセットの JSONファイルに入ります

画像をブロックする ルールを書きます

Appをビルドして Safariを開きます

このExtensionはコンテンツを ブロックしますが 閲覧履歴やWebページの コンテンツを 見にいくことはありません Extensionを オンにする前に WebKitの画像がある ブログを開きます このページには 画像が２つありますね Extensionをオンにして ページをリロードすると 画像はブロックされました

別のページも 見てみましょう ウィキペディアの 魚のページです ここでも画像は ブロックされます 画像を見たいページが ある場合は Extensionを変更して このページの画像だけ ブロックしないよう ルールを変更します actionを allowにします これは最初のルールより 優先度が高くなります Appを再度ビルドし Safariを開き ページをリロードします

でも ルールがうまく適用されず 画像が表示されません

エラーがないか 見てみましょう リソースタイプのキーに imageではなく 空の配列を 使用していました

修正します 再度ビルドして Safariで エラーが消えたか 確認します

ページをリロードします ご覧のように このページでは 画像がブロック されていません コンテンツをブロックする Web Extensionの ビルドの概要については 以上です declarative net requestの詳細は Appleの資料を ご参照ください 最後にExtensionを使って Safariの新しいタブを カスタマイズする方法を 見てみましょう ブラウザのカスタマイズを 好む方が多いので Extensionは便利です 新しいタブオーバーライド APIはExtensionで Safariの 新しいタブページを カスタマイズできます このAPIはすでに Safari 14.1で 導入されています 新しいタブオーバーライドは マニフェストに定義できます Extensionを オンにした時に Safariの新しいタブに オーバーライドを適用させるか 選択します

マニフェストで新しいタブの オーバーライドページを このように指定します このAPIを使ったExtension を構築してみます Extensionに 新しいタブオーバーライドを 追加します Safariで新しく タブを開くたびに 楽しいwebページが 表示されます まず このHTMLページが 新しいタブオーバーライド だと宣言します

既存のHTMLや CSSファイルを いくつか使用します 私のExtensionフォルダに 入っているファイルです Xcodeに追加します ファイルを追加 したことがなくても 大丈夫です とても簡単です ファイルから “シークリエイターに ファイルを追加”をクリック そして追加したい ファイルを選択します Appではなく Extensionの ターゲットであることを 確認してください

このHTMLは 楽しくカラフルな ページを作成します Appを実行し Safariで Extensionをオンにします

このExtensionを 適用するか尋ねる メッセージが表示されます 許可します

あとで変更を 加えたい場合は 一般設定で行います

では新しいタブを 表示します なかなかいいですね いくつか微調整を したいと思います タイトルがイマイチなので

Xcodeに戻り 見やすくなるよう 追加します

Safariの表示を 変えたい場合は テーマカラーを 変えることもできます このmetaタグは新しいタブ オーバーライドに 特化したものではなく 他でも使えます SafariのUIの 変更の詳細については セッション“Safari 15 のためのデザイン”を ご覧ください

どうなったか 見てみましょう 再度ビルドします

新しいタブを開きます いいですね 新しい タブオーバーライドを Extensionに 追加できました

以上 Safariの 新しいタブを Extensionでカスタマイズする 方法をご紹介しました macOSとiOSのSafariで 利用できる3つの新しい Web Extension API について説明しました 関連したサンプルを ダウンロードして ぜひ新しいAPIを 使ってみてください macOSで 紹介しましたが iOSでも動作します

皆さんのご意見を お待ちしています フィードバックアシスタント でバグの報告や Safariの 開発者フォーラムで チャットもできます 最後に 他のセッションも ぜひご覧ください ご視聴ありがとう ございました [空気のような打楽器]