読み込んだウェブページに CSS を適用させる [Safari Extensions を作ってみる：第四回]

さて、Safari で読み込んだページに CSS を適用させてみる。今回は Apple の背景を青にしてみる。

とりあえず、CSS を用意する。名前は「apple.css」とする。

body {background: rgba(0, 102, 255, .7) !important;}

既に背景はスタイルで宣言されているので、!important を付けておく。

1. Safari Extensions の新規開発画面を表示する


2. Safari Extensions の新規開発画面を表示する際に保存したフォルダに、上記で作った css ファイルを保存する


3. 「機能拡張の情報」「機能拡張の詳細」「機能拡張のバージョン」の各項目に適宜な内容を入力する


4. 「機能拡張 Web サイトアクセス」の「アクセスレベル」を「すべて」にする


5. 「取り込んだ機能拡張の内容」の「スタイルシート」の「新規スタイルシート」をクリックする


6. 入力箇所が表示されるので、セレクトボックスをクリックすると 2. で保存した apple.css が表示されるので、それを選択する


7. 少し下の「ホワイトリスト」の「新規 URL パターン」をクリックする


8. 入力ボックスが表示されるので、「http://www.apple.com/*」と入力する。アスタリスクでワイルドカードを使えるので、スラッシュの後には「*」を入力する


9. 機能拡張ビルダー右上の「インストール」をクリックし、Apple にアクセスすると、背景が青くなる。

ちなみに、このホワイトリストでドメインを指定しないと、あらゆるウェブページで css が発動してしまう。ホワイトリストの説明は Safari Extensions Development Guide: Using Extension Builder に載っている。