AppleのWebブラウザバージョン5で初めて導入されたSafari拡張機能により、開発者は様々な巧妙なアドオンを作成し、Web閲覧体験を拡張・向上させることができます。HTML、CSS、JavaScript（あるいはそのうちの1つでも）について少しでも知識があれば、Safari拡張機能を作成する準備は万端です。
Appleのドキュメントは難しそうに感じるかもしれませんが、ここでは、カスタムCSSやJavaScriptコードを使って初めての拡張機能を作成する方法を解説するチュートリアルをご紹介します。この例では、Macworld.comを他の人気Macサイトに似た見た目にし、さらにいくつかの機能を追加する拡張機能を作成しました。ご興味があれば、作成した拡張機能の完全なコードをこちらからダウンロードできます。
（完成したDaring Macworldball Safari拡張機能をご利用になりたいですか？ダウンロード可能です。リンクを右クリックし、「リンク先のファイルを「ダウンロード」に保存」または「リンク先のファイルを名前を付けて保存」を選択してください。インストール手順については、こちらをご覧ください。）
ステップ1：認定を受ける
カスタム拡張機能を構築してインストールする前に、Appleから無料の開発者証明書を取得する必要があります。こちらにアクセスして、Safari Developer Programに登録してください。Safari Developerとして登録すると、メンバーセンターにリダイレクトされます。そこで、開発者証明書ユーティリティをクリックして起動できます。Appleが手順を案内し、Macでキーチェーンアクセスを起動する手順も案内します。この手順を完了すれば、もう心配する必要はありません。
Safariの「開発」メニューをまだ有効にしていない場合は、最初の拡張機能の作成を始める前に有効にする必要があります。Safariメニューの「環境設定」を開き、「詳細」タブを選択して、「メニューバーに開発メニューを表示」にチェックを入れてください。
ステップ3: 拡張機能を作成する
「開発」メニューから「拡張機能ビルダーを表示」を選択します。ウィンドウの左下にあるプラスボタンをクリックし、「新規拡張機能」を選択します。表示される「保存」ダイアログボックスで、拡張機能の名前（私の場合は「Daring Macworldball」）を入力し、任意の場所に保存します。
ステップ4: 詳細の入力を開始する
拡張機能ビルダーウィンドウに表示される最初のいくつかのフィールドは、ほとんど説明の必要がないほどです。拡張機能の表示名、あなたの名前、説明、そしてウェブサイトへのリンクを入力します。これらの情報は、拡張機能を公開したり、他の人と共有したりする際に役立ちます。
バンドル識別子も調整してください。「yourcompany」というテキストを自分の名前または会社名に置き換えてください。
さらに下にスクロールして、「拡張機能のウェブサイトアクセス」セクションまで進みます。拡張機能を、アクセスするすべてのウェブページで読み込むか、特定のURLでのみ読み込むかを指定する必要があります。この例では、ドロップダウンから「一部」を選択します。
この拡張機能をすべての macworld.com URL で動作させたいので、表示される [許可されたドメイン] フィールドに *.macworld.com と入力します。アスタリスクにより、サブドメインもカバーされるようになります。
ステップ5: コーディングの準備
次のステップは少しややこしいところです。拡張機能は、外部のHTML、JavaScript、CSSファイルを読み込むことで動作します。Safariを終了し、先ほど作成した拡張機能フォルダを見つけてください。お好みのテキストエディタまたはコードエディタを使って、そのフォルダ内にmacworld.cssというファイルを作成してください。
ファイルを配置したら、Safariに戻り、Extension Builderウィンドウに戻ります。「Injected Extension Content」までスクロールダウンし、「New Stylesheet」ボタンをクリックします。表示されるドロップダウンから、新しく作成したCSSファイルを選択します。
ステップ6：CSSマジック
では、エディタに戻ってカスタムCSSを追加してみましょう。以下は私が追加したコードの一部です。
変更を保存し、Safariに戻ります。拡張機能ビルダーウィンドウの上部にある「インストール」ボタンをクリックします。すると、なんと拡張機能がインストールされ、Safariの環境設定の「機能拡張」パネルにも表示されます。
CSSファイル（または拡張機能用に作成したその他のファイル）を微調整していくと、Extension Builderの「再読み込み」ボタンが頼りになります。拡張機能を調整するたびにSafariの「更新」ボタンを押す代わりに、「再読み込み」ボタンを押すだけで、Safariがページにカスタムコードを再挿入してくれるので、ページを更新する必要はありません。
Safari が拡張機能の CSS を優先する方法のため、カスタム コードが意図した効果を発揮するようにするには、!important 演算子を積極的に使用する必要があることに注意してください。
ステップ 7: JavaScript も!
サイトのCSSを変更するのは楽しいですが、Safari Extensionsを使えばもっとたくさんのことができます。新しい拡張機能は確かにDaring Fireballっぽいですが、ヘッダーが全くダメです。CSSで単に隠すのではなく、JavaScriptを使ってコンテンツを調整します。
まず、CSSファイルを作成したフォルダに戻り、そこにmacworld.jsという新しいファイルを作成します。次に、Extensions Builderに戻り、「Injected Extension Content」を見つけて、「End Scripts」の横にある「New Script」ボタンをクリックします。（Start Scriptsはページの読み込み前に実行され、End ScriptsはDOMのレンダリングが完了するまで待機します。）新しく作成したスクリプトを選択します。
JavaScriptファイルに書き込んだコードはこちらです（コードをダウンロードすることもできます）。Safari拡張機能を作成しているので、コードはSafariでのみ動作すれば良いということを忘れないでください。クロスプラットフォームの問題はここでは問題ではありません。
ステップ8：寄付する
新しい拡張機能をパッケージ化して他の人と共有する準備ができたら、拡張機能ビルダーウィンドウの右上にある「パッケージを作成」ボタンをクリックしてください。これにより、スタンドアロンの.safariextzファイルが作成され、オンラインで公開したり、メールで共有したりできます。
まとめ
もちろん、拡張機能はカスタムバー、コンテキストメニュー項目、ツールバーエントリといったSafariの他のインターフェースオプションも活用できますが、これらはこのチュートリアルの範囲外です。ここまで読んでいただければ、Appleの拡張機能に関するドキュメントをより深く理解できるはずです。そして、既に持っている情報があれば、Safariの拡張機能を自由に作成し、アクセスしたWebページを操作する準備は万端です。
