こんにちは、開発の福満です。
ご存知の方も多いかと思いますが、Sleipnir 3 に搭載されている Webkit レンダリングエンジンは、拡張機能によってカスタマイズすることができることが出来ます。
今回、試しに拡張機能を作ってみましたので、レポートをお送りします。
開発環境
Webkit 拡張を作るのに、何か特別な開発環境をインストールする必要はありません。
必要となるのは、
・最新版の Sleipnir (3.8.3 以降)
・テキストエディタ
たったこれだけです。
Sleipnir に搭載されている Webkit エンジンには開発者のための便利なツールが標準で用意されています。
拡張機能の管理画面
拡張機能の開発を始めるにあたって、まずは Webkit 設定のページを開きます。
設定ページを開いたら、ページ内左側のメニューから「拡張機能」を選びます。
すると、 下図のような拡張機能の管理画面が表示されます。
管理画面の右上の「デベロッパーモード」のチェックを入れると、上にいくつかのボタンが表示されます。
・「パッケージ化されていない拡張機能を読み込む…」
新しい拡張機能の開発を始める時に、manifest.json やスクリプトが
存在するフォルダを指定して拡張機能を追加します。
・「拡張機能のパッケージ化… 」
開発した拡張機能をパッケージ化して、他の人が容易に使えるようにします。
一通り必要なファイルを揃えたら、「パッケージ化されていない拡張機能を読み込む…」ボタンから読み込んで、拡張機能の実行環境を作成します。
作成するファイル
拡張機能を動作させるためには、少なくとも下記のファイルが必要となります。
・manifest.json
拡張機能の様々な設定や、どの URL でどのスクリプトを実行するかなどを記述します。
・.js ファイル（JavaScript ファイル）
一般的に Webkit 拡張機能は JavaScript で記述します。manifest.json の記述に従って、特定のページでスクリプトが実行されます。
manifest.json の記述例は下記の通り。 content_scripts にサイトと実行するスクリプトの対応を記述したり、説明などを記述します。
{
"description": "Sleipnir Image Hover",
"manifest_version": 2,
"minimum_chrome_version": "18",
"name": "ImageHover",
"version": "0.0.1",
"icons": {
"16": "img/icon16.png",
"48": "img/icon48.png",
"128": "img/icon128.png"
},
"content_scripts": [
{
"all_frames": true,
"js": [ "jquery-1.8.3.min.js", "common.js", "pixiv.js" ],
"matches": [ "*://www.pixiv.net/*" ],
"run_at": "document_start"
},
...
あとは、JavaScript を記述していけば良いわけですが、動作検証中のページ内右クリックメニューから「要素を検証(N)」を選んで表示される開発者機能で、コンソール出力や、HTML 要素の構造を調べながら開発を進めました。
尚、開発中のスクリプトを書き換えたら、前述の拡張機能の管理画面から、「リロード(Ctrl + R)」 をクリックしてリロードしないと反映されないようですので、ご注意ください。
作ってみた感想
作ってみて、思ったよりハードルが低いというか、面倒な手順が少ないなと感じました。
普段 JavaScript を使わない福満でもなんとか作れたので、詳しい方ならもっと早く楽しく作れると思います。
最も苦労したのは、ポップアップを表示する位置でした。なるべくクライアント領域に入るように調整しましたが、なかなか難しかったです。
jQuery の使い方を学ぶことが出来たのは収穫でしたし、何より面白かったです！
皆様も是非チャレンジしてみてください！
完成
試行錯誤を経て拡張機能がなんとか完成しました。仕様は下記の通り。
・画像リンクが大きな画像へのリンクと判別できた場合にリンク先を
ポップアップ表示する。
・pixiv は別スクリプトで特殊処理をして対応。
・manifest.json を書き換えて対応サイトを追加可能
（現在はデベロッパーズブログと pixiv のみ）。
{
"all_frames": true,
"js": [ "jquery-1.8.3.min.js", "common.js", "common_zoom.js" ],
"matches": [
// 以下に対応サイトを追加します。(コンマ区切り)
"*://blog.fenrir-inc.com/*"
「以下に対応サイトを追加します。(コンマ区切り)」の次の行に対応させたいサイトを記述します。 （ワイルドカードが使えます。行の最後にコンマを付けてください。）
ダウンロードは下記のリンクからどうぞ。
＊ご利用に際しては自己責任にてお願いいたします。
＊すべての画像リンクで正常に動作するものではありませんので、予めご了承ください。
インストール方法は、ダウンロードした ZIP ファイルを適当な場所に展開して、拡張機能の管理画面で「デベロッパーモード」のチェックを入れて、「パッケージ化されていない拡張機能を読み込む」から manifest.json の存在フォルダを指定します。
(今回は manifest.json を書き換えて対応サイトを追加出来る様にパッケージ化しないで配布します。)
下図は実行例です。ページ上の画像の横にポップアップで大きな画像が表示されます。
ポップアップ画像をクリックすると別のタブで開かれます。
また、SuperDrag Extension で掴んでそのまま画像保存ということも出来ます。
興味を持たれた方は、是非一度お試しください。
今後も、フェンリル / Sleipnir への応援をよろしくお願いいたします。
ソーシャルアカウント
フェンリルの開発者 Twitter アカウントでは、Sleipnir for Windows の最新開発情報の発信や、テスト版 (リリース候補版) の配布などをおこなっています。
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。
関連記事
