2009年12月21日月曜日

Chromeの拡張とか改造するのに必要な手順メモ② とりあえず「サーニャが見てる」

「中止ボタンがサーニャに見えて困る」を作りたいけど当然のことながらいきなり作るにはハードルが高すぎるので、とりあえずサーニャボタンを出してみんとす。

 前回のOppai Extensionの中身を調べると次のような構成でファイルが格納されていることがわかる。

フォルダ内ファイル構成
[extension_3_0]
├ manifest.json ……拡張の核となる部分(.josnファイル)
├ icon.png ……アイコン用画像ファイル
├ icon110.png ……アイコン用画像ファイル②
├ background.html ……拡張の基礎になる背景(.htmlファイル)
├ dyen.js
├ oppai.js
├ prototype.js
├ scriptaculous.js……以上4つの.jsファイル機能部分を実装するJavaScriptファイル
└ README.markdown ……READMEファイル(.markdownなんて拡張子だけどエディタで開いたらただのテキストだった)
 問題は拡張を拡張たらしめているmanifest.jsonの部分。
 ここの記述を調べると(UTF-8に対応したテキストエディタで開ける)
manifest.json
{ "update_url":http://clients2.google.com/service/update2/crx,
"name": "Oppai Extension",
"version": "3.0",
"description": "Click to wobble an oppai",
"icons":
{ "128": "icon110.png",
  "64": "icon110.png",
  "32": "icon110.png",
  "16": "icon110.png" },
"browser_action":
{ "default_icon": "icon.png",
"default_title": "Oppai" },
"background_page": "background.html" }
 ……と書いてあるはずはず。
 とりあえず、一つの項目とそれに与える値を{"項目":"値またはパス","項目":"値またはパス",……}という形で構成していくらしい。 それぞれの項目はどういうことかと言うと。
manifest.json
"update_url" アップデートするときの公開URL(今のところ不要)
"name" 拡張の名前(必須っぽい)
"version" バージョン(必須っぽい)
"description" 拡張の説明(必須ではないっぽい)
"icons" 「拡張機能」タブ内でこの拡張を示すために表示するアイコン(必須ではないっぽい)
"browser_action"
"default_icon" ブラウザ上に表示するボタンのアイコン(今回の機能には必須)
"default_title" ボタンのアイコンをマウスオーバーしたときに表示されるポップアップテキスト(今回の機能には必須)
"background_page" ブラウザの見えない部分の処理を実行させるためのHTMLファイル(jsファイルなどはここにリンクされている)
 ということらしい(?)ので、とりあえず最小限の記述で書いてみた。
書いてみた manifest.json
{ "name": "Sanya Extension",
"version": "0.1",
"description": "サーニャが見てるだけ",
"icons": { "128": "sanya128.jpg" },
"browser_action":
{ "default_icon": "sanya_icon.jpg",
  "default_title": "サーニャかわいいよサーニャ" }
}
 {},""の関係には要注意。あとUTF-8であることを忘れずに。
 肝心のアイコンファイルは……
 この3つだけ。この3つだけがフォルダにあればいい。
 あとは前回の方法を使ってまずはパッケージ化されていない拡張機能を読み込みます(Load unpacked extention)でフォルダを読み込むと……
 こんな感じに。ボタンは単にあるだけで押しても何も起きない(もちろん中止もできない)が、サーニャが見てるだけであればこのように簡単に作ることができるわけで。
 もちろんパッケージにすればインストールもできる。
 とりあえずここまでできた。この先の機能追加についてはまずは考え中……。

Chromeの拡張とか改造するのに必要な手順メモ① とりあえず開いてまた閉じて

拡張を弄るうえでは必須になるパッケージの解体&再パッケージの手順について確認してみた。
相変わらず手探りなので確証はないけど、Firefoxよりずっと最初の敷居は低いと思う。

1 まずはソースの入手法


Firefox同様。アドオンは.crxという拡張子の.zipファイルでパッケージングされている。
なので、まずはアドオンの.crxパッケージを拡張の配布ページから入手。
※今回はOppai Extensionで解説。クリックすると揺れるボタンが増える拡張。ソース見るとどうやらこれJavaScriptで演算して揺らしてるようだ。

「install」ボタンを右クリック→「名前をつけてリンク先を保存」で……
2012/07/11追記:最近はこの方法ではできないみたいですね。

.crxが出てくれば成功。保存する。

これを.zipに名前を変えてから解凍(大抵のものは.crxのままでも強引にツールに突っ込めば開く)すれば、アドオンのソース部分を得ることができる。
※ Lhaplusではなぜかエラーが出るので、Lhazを使用した。

解凍の結果。この拡張の場合ではこの9つのファイルが出てこない場合は解凍に失敗している。
 

2 とりあえず再パッケージしてインストールする方法


さて、Firefoxのときと同様、開いたものをそのまま閉じてインストールできることを確認する。
Firefoxの場合、全ファイルを選択して.zipで圧縮→.xpiに変更というちょっとコツと手間がかかる手順があったが、Chromeの拡張の場合、その手順ではインストールできない。
Chromeの場合「拡張機能」タブにある「Developer mode」(日本語環境では違うかも)を利用する。

「Developer mode」の「+」をクリックすると……

3つのボタンが登場する

3つのボタンの使い道は以下の通り(3つ目は今回不要)
① 「Load unpacked extention」
パッケージ化していない拡張のソースを直接アドオンとしてインストールする。
このとき必要なのはソース類があるフォルダを指定することであり、
Firefoxのように圧縮・パッケージ化を行ってからインストール→再起動の手間が必要ない。この方法でインストールしたアドオンはバージョンの後に (Unpacked)がついて他とは区別されるものの、1アドオンとしてきちんと機能する。

ソースがあるフォルダ(.crxを解凍した素のフォルダ)を指定する。

この方法でインストールした拡張はバージョンの末尾に(Unpacked)がつく

② 「Pack extention」
拡張をパッケージングして.crxおよび.pemファイルを生成する。
①同様、ソース類があるフォルダを指定すると、そのフォルダの階層にフォルダ名で2つのファイルが生成される。

ソースのフォルダを指定する。鍵ファイルは最初なので不要。

フォルダ名で.crxファイルと.pemファイルが生成される。

.pemファイルは.crxファイルを公開した後、バージョンアップを行う際に、バージョンアップしたcrxが前バージョンの作者によって本当に作られたことを示すための鍵となるファイルで、とりあえず改造だけするのなら必要はない。
生成した.crxファイルは、Firefox同様ドラッグ&ドロップでインストールできる。
※なんか2回インストールされるけど。

今回のまとめ(理解できた分だけ)


ソースの中身については次回~。

2009年6月14日日曜日

Firefoxのアドオンとか弄る時に必要なメモ(xpiパッケージの開き方&戻し方)

今回LinkGopherの改造をするにあたって他の改造時にも必要な作業について先にメモ。

まずLink Gohperのパッケージを入手する。


 Link Gohperのサイトから、xpiパッケージをダウンロード。

 xpiパッケージを「名前を付けてリンク先を保存」で、適当な作業フォルダに。

xpiパッケージを開く

 改造のためにソース部分を取りだすにはダウンロードしたxpiパッケージを開く必要がある。
 特に難しいことではなく、実体は.xpiという拡張子の付いた.zip(もしくは.cabの場合もあるらしい)なので右クリックでzipに対応した解凍ツール(直接は無理なら拡張子を.zipに変更する)を使えば開くことができる。


 中身については後で本当に改造するときに改めて説明することにして、今回はこのまま再パッケージして元の.xpiとして動かすことを優先する。

再パッケージする

 前述の通り、xpiパッケージは.xpiという拡張子の付いた.zipなので、xpiパッケージを作る際には.zipで圧縮して拡張子を.xpiにしてやればよい。
 この時、一つだけ留意すべきことがある
 .zipで圧縮する際は下図のようにソースのフォルダ直下のファイルに対して行わなければならない。


 便宜上解凍する際はできたファイルをフォルダにまとめておくことが多いが、そのフォルダをそのまま圧縮しても.zip内での階層が当初とは変わってしまうためアドオンとして機能しない。

 正直自分が改造を始めたときに一番躓いたところなのでここはたぶん大事。
 正しく圧縮できたら拡張子を.zipから.xpiに変更してxpiへの再パッケージが完了する。

再パッケージしたアドオンをインストール

 再パッケージしたxpiを使う際は、xpiパッケージファイルをFirefoxにドラッグアンドドロップ(アドオンのインストールボタンからファイル指定も)で、パッケージングが正しくできていればLink Gohperのインストーラが開いてインストールを開始できる。


このエントリーをはてなブックマークに追加

2009年1月2日金曜日

たくさんのフォルダをそれぞれ圧縮②

WindowsLiveBlogを使っていたころに書いたたくさんのフォルダをそれぞれ圧縮というエントリーが今でも結構検索で人気だったりする。
私も最近までここにあるNoahを使っていたのだが、ふとしたことから新しいツールを発見したので続きを書くことにした。

新ツール DropCompresを使うまで(zipだけ対応させる場合)

① 上記のリンクからDropCompres.zipをダウンロードして解凍。
② 統合アーカイバプロジェクトから、zip3j037.lzh zip232dN.zipの2ファイルをダウンロードして解凍。
③ 両者解凍したフォルダから、ZIP32J.DLL ZIP32.DLLの2ファイルを取り出して、①で解凍したDropCompresのフォルダに移動。 
以上の手順でDropCompresのフォルダが以下のように(DropCompres.ini以外)なっていれば、DropCompres.exeで本体を起動できる。
 インストールした図。DropCompres.iniは、初回起動時に作成されるので上の4つがあればよい。
下のようにメイン画面が出て、Zipにだけラジオボタンが点灯していれば準備は終了。  圧縮率の変更やパスワード付きzipも作ることができる。

新ツール DropCompresの使い方(zipだけ対応させる場合)

以前のNoahでは複数のフォルダをフォルダ別に圧縮するにはAltキーを押しながらドラッグ&ドロップする必要があった。
今回のDropCompresは単に複数のフォルダをドラッグ&ドロップするだけでフォルダ別の圧縮が開始される。この差は意外と大きい。  複数のフォルダをまとめてドラッグ&ドロップする(上)ことで、フォルダをそれぞれ圧縮したzipファイルが同じフォルダ内に生成(下)される。
上記以外のシチュエーションについては試していない。
readme.txtによると「送る」メニュー(登録は手動で)やEXEファイルへのドラッグ&ドロップ(ショートカットも)にも有効らしいので使いやすい形で登録しておくことができる。

Zip以外の圧縮

画面にもあるように、対応するDLLをZipのとき同様にexeファイルと同じフォルダに置けばLzh、7-Zip、Tar.gzで圧縮することが可能。
対応DLLについては、readme.txtによると、それぞれUNLHA32.DLL、7-zip32.dll、tar32.dllとなっている。 
ということで乗り換え報告終了なんだけど、このソフトも2006年12月更新以来止まってるし作者のサイトももうないみたい。
そんなに難しいことをしてるわけじゃないと思うからOSが進んでも何とかなるかなぁとは思うんだけど……


このエントリーをはてなブックマークに追加