はじめに

iOS15からMacと同じようにSafari拡張機能が使えるようになりました。WWDC2021でも取り上げられ、Xcode13にも専用のプロジェクトテンプレートが用意されるなど、結構気合の入っている印象です。とはいっても、まだまだ日本語の情報が少なかったので今回はアプリを作ってみた立場から、開発に役立ちそうなことをまとめていきたいと思います。

つくったもの

作ったものはこちらです。性的に過激なサイトや単語をブロックしてくれるアプリになっています。実際の画面は以下の画像のようになっています。この画像では配慮のため英語を対象としていますが、もちろん日本語にも対応しています。

スマホで画面キャプチャをする際などに性的な言葉が表示されるのを防ぐこともできるので、配信などでBANを防止したいときにもオススメです。

感覚はChrome拡張と同じ

正直なところ、仕組みやできることは、ほぼChrome拡張と同じように考えてもらって良いかと思います。後述するようにいくつか違いや注意点はあるのですが、Chrome拡張の開発経験のある方ならスムーズに進められるかと思います。

Chrome拡張との違いは？

background処理

当然のことながら、モバイル機器の処理能力には限界があります。そのため以下のようにbackgroundの "persistent": falseは必須となります。

manifest.json

 "background": {
        "scripts": [ "background.js" ],
        "persistent": false
    },

popupボタン

拡張機能にはボタンを押して起動したり、何らかの変化を起こすものがあります。PCなどでは大抵タブ上に表示されたりしてすぐに使えるのですが、iPhoneの場合は少し異なり、一端リスト上のページを生じさせる必要があります。

以下の画像は一例です。Mac版だと常に表示されているボタンをクリックするだけで済む操作も、iOSだといくつかの手順を踏む必要があります。

また、ボタンを押した後の表示もハーフモーダル状になるようです。大きさなどは変更できるかもしれませんが、そのままだとWebページの半分は隠れたままになってしまいます。

アプリ本体の存在

上の問題を解決する手段のひとつが、アプリのExtensionでない部分、つまりアプリ本体の活用です。すでにリリースされた他のSafari拡張アプリでは、このアプリ本体の画面から設定変更などを行なっているものもあります。（例：機能を実行しないWebサイトリストの編集、

また、他のアプリと同じようにWidgetやAppleWatchなどとの連携も可能です。このようにさまざまなものと連携させられるところは活用しがいがあるのではないでしょうか。

コンテンツブロッカーは？

iOSにおけるSafariの機能を補助するものとしてコンテンツブロッカーが既に存在していました。広告ブロックが主な使用用途でしたが、Safari拡張ではそれらに比べてより幅広い操作が可能となっています。

コンテンツブロッカーの扱いが今後どのようになっていくかは分かりませんが、現状はSafari拡張と分けて考えられているようです。コンテンツブロッカーとSafari拡張をひとつのアプリに含めることも可能で、広告ブロックとして有名なAdGuardは両方を実装しています。

SwiftUIとの関係

XcodeでSafari Extension Appから新規プロジェクトを始めると、UIKitベースのものが生成されます。しかしせっかくマルチプラットホームで使えるSafari拡張なので、SwiftUIを使いたいところです。

私のアプリは現在ほとんどSwiftUIを使っていますが、2021年10月時点ではMac版の正式リリースには至っていません。Safari拡張アプリこそSwiftUIの強みを活かせる分野だと思っているので、マルチプラットホームでのリリースを実現したらまた知見を共有したいと思っています。

App Storeでの審査

セキュリティの問題も他のアプリとは異なるので、リリース前の審査が厳しいのではないかと心配していました。しかし、結果から言うとアプリ内課金の点以外でのリジェクトは一度もありませんでした。

一応英語の資料を添付していたのもよかったのかもしれません。個人差はあるかと思いますが、Safari拡張だからといって特別なにかがあるわけではないようです。

さいごに

まだまだSafari Extension App自体の情報は公式ドキュメント以外ほとんどない印象ですが、Chrome拡張など他の分野の知見を生かすことができます。個人的に便利そうなものを作るだけでも楽しいと思うのでぜひみなさんも挑戦してみてください。

公式サンプルコード

WWDC2021で以下のサンプルコードが公開されました。

ページ上の文字置き換え

ページの画像や読み込みなどをブロック