🕌

（macOS）Safari Web Extensionの作り方

2023/02/21に公開

はじめに

この記事ではmacOS向けのSafari Web Extension（ブラウザ拡張機能）の作り方を説明します。基本的にJavaScriptさえ理解していればOKです。Swiftの読み書きはできなくても問題ありません。

なお、この記事で説明するのはテンプレートのビルドと実行方法までです。作成した拡張機能をAppStoreで公開する手順については説明しません。

記事の投稿にあたり、以下の環境で動作確認を行いました。

Xcodeを起動してメニューのFile→New→Projectを選択します。
プラットフォームとしてmacOS、テンプレートとしてSafari Extension Appを選択してNextボタンを押します。
アプリの種類として「Safari App Extension」ではなく「Safari Web Extension」を選択します。
プロジェクト名・チーム・バンドルIDは適当でOKです。言語は「Swift」のままNextボタンを押します。
プロジェクトの保存先を設定してCreateボタンを押します。
メニューのProduct→Destinationを選択して「My Mac」にチェックが入っていることを確認します。
Command + Rキーを押してプロジェクトをビルドします。初回はビルドに時間がかかります。
ビルドが成功すると「プロジェクト名’s extension is currently on. You can turn it off in Safari Extensions preferences.」」という内容のダイアログが表示されます。
ダイアログの「Quit and Open Safari Extensions Preferences…」ボタンを押します。その後、Safariが起動するので一旦Command + Qキーを押して閉じます。

Safariを起動したらCommand + ,キーを押してPreferencesパネルを開き、Extensionタブを選択します。
拡張機能の一覧が表示されます。その中に先ほどビルドした拡張機能が含まれていることを確認します。
拡張機能はチェックが入っている間は有効になります。この状態で再びXcodeに戻ってCommand + Rでビルドすると更新された内容が反映されます。ビルドするたびにSafariを開いて拡張機能をアンインストールする必要はありません。

Safari Web ExtensionはChrome Extensionと同様にJavaScriptで実装します。.jsファイルがどこに配置されているのか確認しましょう。

ここではプロジェクト名としてHelloWorldを設定したものと仮定します。まずはプロジェクトルートを確認しましょう。以下3つのディレクトリがあります。

.jsファイルが配置されているのはHelloWorld Extensionディレクトリです。中身は以下のようになります。

Resourcesディレクトリが本体です。中身は以下のようになります。

content.jsとbackground.jsを確認してみてください。勘の良い方なら自力で拡張機能を実装できるはずです。

manifest.jsonやcontent.jsに不備があってもXcodeのビルドをは成功します。実行時のエラーはSafariを起動してCommand + ,でExtensionタブを開いて確認してください。