Safari ExtensionsでHello World!

Safari 5にSafari Extensionsが追加されました。
これでSafariの追加機能が簡単に作成できるようになりました。

ただ、デフォルトでは有効になっていないので、開発メニューを表示して、「機能拡張を有効にする」をONにする必要があります。
機能拡張はSafari Extensionsの訳。

Extensionを開発するにはSafariの開発メニューの「機能拡張ビルダーを表示」でビルダーを表示して作成します。

_Users_r_izumita_Library_Application-Support_Evernote_data_51783_content_p15815_652abdb61f4812f3c50d0d1758d5b584.jpeg

+ボタンをクリックすると新規機能拡張と機能拡張を追加が表示されます。
新規の方をクリック。Saveパネルが表示されるので名前を付けます。
名前はHelloWorld。
HelloWorld.safariextensionというフォルダが作成される。中にはInfo.plistがあります。

_Users_r_izumita_Library_Application-Support_Evernote_data_51783_content_p15815_fe8fa9f111a7be394bceecff9425d50a.jpeg

デベロッパ証明書が必要なので
http://developer.apple.com/safari/certificates/index.action
から取得。取得するにはSafari Developer ProgramにJoinが必要(無料)。

_Users_r_izumita_Library_Application-Support_Evernote_data_51783_content_p15815_df47871c4f12e292fe50d8a1d9596c4f.jpeg

_Users_r_izumita_Library_Application-Support_Evernote_data_51783_content_p15815_13a8dfc0795525f875cf349f5687f4e3.jpeg

キーチェーンアクセスアプリを起動。
キーチェーンアクセスメニューの証明書アシスタントの「認証局に証明書を要求…」を実行。
ユーザのメールアドレスと通称に自分の情報を記述。要求の処理をディスクに保存に設定。
証明書を保存。

Safariに戻ってContinue。

_Users_r_izumita_Library_Application-Support_Evernote_data_51783_content_p15815_ea00616e41fbda0068ba5c7d95582756.jpeg

証明書を選択してGenerate。

_Users_r_izumita_Library_Application-Support_Evernote_data_51783_content_p15815_78f2ce0fda59d80ebbfbb40af0cef4ac.jpeg

_Users_r_izumita_Library_Application-Support_Evernote_data_51783_content_p15815_646c3909e7bd69b7e8d78074b66a2da3.png

ダウンロードしてキーチェーンに追加。
無事Safari Developerになりました。

_Users_r_izumita_Library_Application-Support_Evernote_data_51783_content_p15815_ec4cf493986b97b884218a815baf7192.png

ではではHelloWorldを表示するために…
HelloWorld.safariextensionフォルダにhelloworld.htmlファイルを作成。内容は以下。

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>Hello World!</body>
</html>

Extensionsバーにボタンを表示作成するために、Extensions Builderの新規バーをクリック。

_Users_r_izumita_Library_Application-Support_Evernote_data_51783_content_p15815_00f56d9d58d3bcc16005eacfd1e0b465.jpeg

こんなかんじで入力。
Extensions Buildreのインストールボタンをクリック。すると…

_Users_r_izumita_Library_Application-Support_Evernote_data_51783_content_p15815_c1344b6e0cb1760318f20488381b3a70.jpeg

Extensionバーが表示されてHello World!があります。
このHello World!という表示はhelloworld.htmlのBodyが表示されています。ので、BodyをHello Safari Extension Bar!に変更してExtensions Builderの再度読み込むをクリックすると

_Users_r_izumita_Library_Application-Support_Evernote_data_51783_content_p15815_f7778bfaf542985ba91466f36ef81bf0.jpeg

になりました。

どんなExtensionが現れるかたのしみです。
自分は何つくろうかな。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です