Safari で開いたページに任意のスタイルシートを適用する

以下は、Safari App Extension を作成して、Safari で開いたウェブページに指定したスタイルシートを自動で適用する方法です。

Safari の機能拡張からもカスタムスタイルシートを設定することができますが、ページごとに異なるスタイルシートを指定することができません。
代わりに Safari App Extension を使用して、ページごとにカスタムスタイルシートを設定することができます。

実行環境は macOS です。

テスト用に未署名の機能拡張を許可する設定を行う

Safari App Extension を作成・使用するためには開発者の署名が必要となります。
XCode で開発者の設定をしていない場合は、未署名の機能拡張を使用することを Safari の設定で許可する必要があります。
許可は Safari を起動するたびに実行する必要があります。

Safari の開発者メニューを表示する

1. Safari を起動する
2. メニューから Safari >> 環境設定... を選択
3. 「詳細」タブを選択
4. 「メニューバーに"開発"メニューを表示」にチェックを入れる

未署名の機能拡張を許可する

1. メニューから 開発 >> 未署名の機能拡張を許可する を選択
2. パスワードの入力を求められるので入力する

XCode を起動する

XCode をインストールしていなければインストールし、起動します。

プロジェクトを作成する

事前に決めておくこと

1. プロダクト名 (Product Name)
2. 組織識別名 (Organization Identifier)
3. プロジェクトを保存する場所

手順

1. メニューから File >> New >> Project... を選択
2. macOS >> Other >> Safari Extension App をクリック
3. [ Next ] をクリック
4. Product Name: user defined css for www.example.com
5. Organization Identifier: SafariAppExt
6. [ Next ] をクリック
7. ファイルダイアログが表示されるので、プロジェクトを保存する場所を設定
8. [ Create ] をクリック

CSS ファイルを追加する

1. 左側のペインにて、<プロダクト名> Extension フォルダを右クリック
2. New File... を選択
3. macOS >> User Interface >> Empty を選択
4. [ Next ] をクリック
5. Save As: style.css
6. [ Create ] をクリック
7. [ Use .css ] をクリック
8. style.css がエディタで選択されるので下記の style.css を入力
9. Menu >> File >> Save を選択

style.css

p {
  color: green;
}

設定ファイルに style.css の設定を追加

1. 左側のペインにて、<プロダクト名> Extension フォルダの Info.plist ファイルをクリック
2. NSExtension の左にある三角形 ▶︎ をクリックして開く
3. NSExtension の右にあるプラス (+) をクリックする
4. テキスト入力モードになるので、SFSafariStyleSheet と入力
5. SFSafariStyleSheet の Type 欄を Array に変更する
6. SFSafariStyleSheet の右にあるプラス (+) をクリック
7. 追加されたエントリー (Item 0) の Type 欄を Dictionary に変更する
8. 追加されたエントリー (Item 0) の左にある三角形 ▶︎ をクリックして開く
9. 追加されたエントリー (Item 0) の右にあるプラス (+) をクリックする
10. テキスト入力モードになるので、Style Sheet と入力
11. 右側の Value 欄に style.css と入力

Safari App Extension を使用するドメインの設定

1. 先ほど style.css の設定を追加した Info.plist を選択
2. SFSafariWebsiteAccess の左にある三角形 ▶︎ をクリックして開く
3. Allowed Domains の左にある三角形 ▶︎ をクリックして開く
4. Item 0 の Value 欄にある *.webkit.org を削除
5. 代わりに *.example.com を入力
6. Menu >> File >> Save を選択

ビルドと実行

1. 左上の ▶︎ ボタン (Build and then run the current scheme) をクリック
2. アプリケーションが起動するので、[ Open in Safari Extensions Preferences... ] をクリック
3. Safari の機能拡張設定画面が開くので、作成した機能拡張にチェックを入れる

再ビルドの際の注意点

再度ビルドを実行する際は、事前に "Clean Build Folder" を実行します。
実行しないと、Safari の拡張機能のページに表示されないようです。

• Menu >> Product >> Clean Build Folder を選択

動作確認

1. http://www.example.com を開く
2. パラグラフの文字色が緑になっていることを確認

片付け

"Clean Build Folder" を実行すると、拡張機能は登録解除されます。

• Menu >> Product >> Clean Build Folder を選択

参考情報

• Building a Safari App Extension
• Injecting CSS Style Sheets into a Webpage

補足

XCode でファイル名の右に M や A が表示される

ファイルを Commit すると消えます。