64bit対応のGoolgeChromeは速いのか検証した件

Try out Google Chrome Beta
https://www.google.com/intl/en/chrome/browser/beta.html

Octaneにて

	chrome（64bit）	Iron（32bit）
Octane Score	14445　★	14331
Richards	20076	21428　★
Deltablue	24655	27829　★
Crypto	17372　★	16964
Raytrace	26681　★	25874
EarleyBoyer	19259	24136　★
Regexp	2295	2642　★
Splay	10203　★	6287
SplayLatency	13876　★	12747
NavierStokes	19215　★	19105
pdf.js	9707	10497　★
Mandreel	10809	11373　★
MandreelLatency	8522	8746　★
GB Emulator	30837　★	27699
CodeLoad	10432　★	10334
Box2DWeb	12299	13316　★
zlib	27465　★	24751
Typescript	19363　★	18022

※　★が高い値

うーん。もう少し劇的に伸びてるのかと思ったけど、こんなものか……

3つのブラウザが新しくなったのでまたOctaneしてみた

	Firefox 29	SRWare Iron 34.0.1850.0	Opera 21.0
Octane Score	12398	13651	14235　★
Richards	17895	20853	21217　★
Deltablue	16460	20510	22249　★
Crypto	16279	16843	16949　★
Raytrace	14770	28313　★	28268
EarleyBoyer	15021	20129	24532　★
Regexp	1086	2701	2734　★
Splay	10969　★	6692	6920
SplayLatency	6293	9793　★	9631
NavierStokes	16998	19144	19215　★
pdf.js	8564	11495	12030　★
Mandreel	11168	11384	12120　★
MandreelLatency	14837　★	9198	9605
GB Emulator	23347	22926	23402　★
CodeLoad	10040	11258	11482　★
Box2DWeb	17145　★	10251	12495
zlib	32681　★	24157	24596
Typescript	15290	18562　★	18017

★が一番大きい。

Operaがかなり頑張って、トータルで一番高いスコアを記録。

久しぶりにOctaneベンチしてみた

12044

	Firefox　28	Iron　33.0.1800.0	InternetExplorer　11
Octane Score	11334	12044	8747
Richards	17549	21139	10831
Deltablue	13944	19174	6916
Crypto	17011	16983	10521
Raytrace	14313	20794	10308
EarleyBoyer	14383	21727	14946
Regexp	967	2523	1407
Splay	8482	5639	3944
SplayLatency	5321	6266	2946
NavierStokes	17066	16918	11973
pdf.js	11281	9995	10547
Mandreel	8316	11574	8251
MandreelLatency	12129	7951	10956
GB Emulator	25350	17745	16623
CodeLoad	10573	10244	10753
Box2DWeb	14159	9750	7843
zlib	32010	20216	12814
Typescript	9525	15283	25224

以前の測定結果よりかなりFirefoxが上回る項目が増えた感じ。
そんな中でInternetExplorer11もなかなかの数値を叩きだしてるところが何とも。

Firefox 22 BetaをOctaneベンチマークしてみた

IE以外はポータブル版を使用

	Firefox 22 Bata	Firefix 21	Google Chrome 27	Internet Explorer 10
Octane Score	8427	8716	11147	3946
Richards	12331	10043	13298	5384
Deltablue	10413	11544	16371	2191
Crypto	12029	9041	13787	6613
Raytrace	8998	14239	17689	1262
EarleyBoyer	7988	14209	22654	1732
Regexp	1747	1502	2881	1961
Splay	8222	8752	2890	2524
NavierStokes	17979	17997	17214	5178
pdf.js	5977	4144	12736	7872
Mandreel	10853	10566	10163	3140
GB Emulator	5952	7171	12233	12475
CodeLoad	6925	9776	12831	8608
Box2DWeb	14091	10876	11713	4845

※4ブラウザで最大が太字。Firefoxどうしで大きい方が下線。

Firefox22で搭載されたはずの新エンジンOdinMonkeyの性能に期待していたのだけどベータでは無効化されているのか21とほとんど変わらない（むしろ一部弱い）

初めてテストできたIE10はほとんど勝負にならない中でGB Emulatorでは群を抜いた数値が出ている

■ツイート ■

Firefox18の効果を確かめてみた

新JITコンパイラ“IonMonkey”を搭載する「Firefox 18」がベータ版に
http://www.forest.impress.co.jp/docs/news/20121127_575432.html

新しいスクリプトエンジン投入とのことで、さっそくOctaneチェック
今回は仮想化空間は使わず手元の環境で簡単に一発勝負で出してみた

	Firefox 17	Firefox 18b	Iron 22
Octane Score	6542	6878	9983
Richards	8525	9450	9877
Deltablue	9071	9415	15835
Crypto	14161	10509	13923
Raytrace	4440	6981	14652
EarleyBoyer	8611	10884	23412
Regexp	1095	666	2366
Splay	8884	8814	3113
NavierStokes	8049	16407	15847
pdf.js	4733	3419	11239
Mandreel	5917	6108	8208
GB Emulator	6825	8816	12034
CodeLoad	8490	9379	8458
Box2DWeb	7561	6525	11951

17と比べると一長一短な結果だけどIron（Chrome）に比べて上回る項目もあるのが期待できる点かなぁ。まだまだって感じだけど。

■ツイート

Windows8上でもう一度Octane Scoreを計測した件

仮想マシン（VirtualBox）にWindows8RPをインストールしたので、InternetExplorer10他、バージョンアップしたブラウザでもう一度計測してみた。
面倒なのでキャッシュの削除などは行っていない。

Octane JavaScript Benchmark
http://octane-benchmark.googlecode.com/svn/latest/index.html

【前回】Googleの新JSベンチマークでいろいろ測ってみた件
http://ccf-squarelab.blogspot.jp/2012/08/googlejs.html

Internet Explorer 10.0.8600.0 Pre-release

	1回目	2回目	3回目	4回目	5回目	平均
Octane Score	1934	1893	1936	1914	1922	1919.8
Richards	5129	4663	5087	4999	5041	4983.8
Deltablue	2067	2107	2085	1947	2109	2063
Crypto	6906	6658	6954	6562	6913	6798.6
Raytrace	1176	1194	1154	1204	1218	1189.2
EarleyBoyer	1600	1636	1609	141	1600	1317.2
Ragexp	1634	1669	1690	1712	1725	1686
Splay	2722	2771	2276	2273	2279	2464.2
NavierStokes	2759	2910	3262	3386	3115	3086.4
pdf.js	5645	5268	5833	5712	5943	5680.2
Mandreel	2564	1762	2374	2410	2169	2255.8
GB Emulator	231	257	240	226	256	242
CodeLoad	7431	7689	7151	7156	6966	7278.6
Box2DWeb	126	127	132	125	121	126.2

Firefox 15

	1回目	2回目	3回目	4回目	5回目	平均
Octane Score	5743	5644	5567	5730	5723	5681.4
Richard	8278	8388	8254	8331	8271	8304.4
Deltablue	6751	6559	6566	6506	6566	6589.6
Crypto	13285	13227	13187	13736	13344	13355.8
Raytrace	2804	2661	2714	2849	2869	2779.4
EarleyBoyer	6134	6206	6367	6126	6258	6218.2
Ragexp	1047	1041	1002	1006	1016	1022.4
Splay	8687	7470	7438	7813	7856	7852.8
NavierStokes	8756	8539	8764	8798	8643	8700
pdf.js	4323	4306	4508	4438	4302	4375.4
Mandreel	4378	4351	3298	4448	4275	4150
GB Emulator	6813	6798	7080	7193	7122	7001.2
CodeLoad	9633	9388	9523	9326	9885	9551
Box2DWeb	5856	6179	6102	6027	6084	6049.6

Firefox 16 Beta

	1回目	2回目	3回目	4回目	5回目	平均
Octane Score	5846	5814	5880	5824	5461	5765
Richard	8282	8310	8102	8310	8204	8241.6
Deltablue	6599	6506	6374	5990	6162	6326.2
Crypto	13415	13015	13961	13625	6512	12105.6
Raytrace	2866	2695	2787	2806	2846	2800
EarleyBoyer	7207	7041	7086	7285	7291	7182
Ragexp	1052	1001	1043	1004	1057	1031.4
Splay	6637	6042	6511	6747	6430	6473.4
NavierStokes	7663	8057	8204	8228	8302	8090.8
pdf.js	4136	4278	4335	3893	4014	4131.2
Mandreel	5600	5496	5618	5594	5374	5536.4
GB Emulator	7972	8123	7235	7287	7108	7545
CodeLoad	9341	10508	10601	10466	9401	10063.4
Box2DWeb	6672	6646	6784	6914	6908	6784.8

Opera 12.02

	1回目	2回目	3回目	4回目	5回目	平均
Octane Score	3730	3826	3743	3776	3799	3774.8
Richard	3036	3001	3004	2919	2955	2983
Deltablue	2444	2457	2362	2441	2427	2426.2
Crypto	4229	4253	4235	4253	4247	4243.4
Raytrace	4529	4744	4625	4625	4625	4629.6
EarleyBoyer	4945	5056	5058	5106	4978	5028.6
Ragexp	1265	1293	1268	1298	1292	1283.2
Splay	6332	6845	6381	6389	7880	6765.4
NavierStokes	3750	3746	3699	3710	3692	3719.4
pdf.js	3312	3297	3374	3393	3324	3340
Mandreel	1742	1809	1757	1746	1743	1759.4
GB Emulator	6299	6997	6355	6857	6288	6559.2
CodeLoad	8556	8456	8598	8364	8504	8495.6
Box2DWeb	4115	4277	4156	4245	4210	4200.6

SR Iron 21.0.1200.0

	1回目	2回目	3回目	4回目	5回目	平均
Octane Score	8369	8659	8713	8622	8521	8576.8
Richard	10008	11819	12122	11893	11967	11561.8
Deltablue	11524	14520	13706	14308	14209	13653.4
Crypto	13464	12590	13374	12629	12647	12940.8
Raytrace	13428	13159	12898	14299	11645	13085.8
EarleyBoyer	19078	18941	19150	18799	18281	18849.8
Ragexp	2186	2117	2081	2093	2129	2121.2
Splay	2643	2364	2589	2314	2481	2478.2
NavierStokes	15164	14840	15194	15047	14722	14993.4
pdf.js	9066	9402	9621	9630	9483	9440.4
Mandreel	7356	7547	7420	7447	7368	7427.6
GB Emulator	9153	10365	10325	9972	10345	10032
CodeLoad	6395	7521	6555	6029	6421	6584.2
Box2DWeb	7265	6960	7689	8014	7561	7497.8

集計

	Internet Explorer 10PR	Firefox 15	Firefox 16 Beta	Opera 12.02	SR Iron 21
Octane Score	1919.8	5681.4	5765	3774.8	8576.8
Richards	4983.8	8304.4	8241.6	2983	11561.8
Deltablue	2063	6589.6	6326.2	2426.2	13653.4
Crypto	6798.6	13355.8	12105.6	4243.4	12940.8
Raytrace	1189.2	2779.4	2800	4629.6	13085.8
EarleyBoyer	1317.2	6218.2	7182	5028.6	18849.8
Ragexp	1686	1022.4	1031.4	1283.2	2121.2
Splay	2464.2	7852.8	6473.4	6765.4	2478.2
NavierStokes	3086.4	8700	8090.8	3719.4	14993.4
pdf.js	5680.2	4375.4	4131.2	3340	9440.4
Mandreel	2255.8	4150	5536.4	1759.4	7427.6
GB Emulator	242	7001.2	7545	6559.2	10032
CodeLoad	7278.6	9551	10063.4	8495.6	6584.2
Box2DWeb	126.2	6049.6	6784.8	4200.6	7497.8

感想

• やっぱりChronium系のIron最強。
• 次はFirefox、ただしなぜかバージョンが上の16Betaは遅くなる項目が目立つ。新機能を優先してチューニングはこれからというところなのだろうか。
• IE10はようやく参戦。やはり総合最下位だったものの、項目別ではIronを上回っていたりもして侮れない。ただ弱い部分（3ケタスコア）では処理が引っかかって遅さをいやおうなく感じてしまうのでやはりダメダメ度高し。
• Operaは安定して平均以下。ただ3ケタスコアがないのでIEのように引っかかったりしなかった。実用最小限といったところか。
• ベンチマーク全体のスコアは回数やマシンスペックにはあまり左右されないようでブラウザ単体の処理能力がうまく比較できているのかもしれない。

■ツイート

Googleの新JSベンチマークでいろいろ測ってみた件

Googleが新JSベンチマーク Octane 発表、GBエミュやPdf.js など実アプリ使用 http://japanese.engadget.com/2012/08/22/google-js-octane-gb-pdf-js/

というものができたらしいので、現在使っているブラウザで測ってみた。

Octane JavaScript Benchmark
http://octane-benchmark.googlecode.com/svn/latest/index.html

Firefox14.0.1

Firefox15 Beta

Iron20.0.1150.1（Chromium系）

Opera12.01

結果

	Firefox14.0.1	Firefox15b5	Iron20.0.1150.1	Opera12.01
Octane Score	6145	6479	9166	4017
Richard	8910	8730	9729	3174
Deltablue	6916	6784	15796	2559
Crypto	14208	14192	14460	4421
Raytrace	2835	2995	16100	4919
EarleyBoyer	6297	6814	21286	5254
Ragexp	1038	1112	2402	1392
Splay	9510	9852	3102	7826
NavierStokes	9376	9366	16111	3909
pdf.js	4809	5294	10465	3468
Mandreel	4795	4786	8179	1811
GB Emulator	10365	10305	11809	6729
CodeLoad	8084	11112	6845	9460
Box2DWeb	6370	6947	5094	4487

実行するごとにかなり値が変動するので細かい部分は言い切れませんが……
やっぱりGoogleのベンチマークだけあって、Chromium系のIronがトータルではぶっちぎってますね。ただ、すべての項目というわけではなく、一部Firefoxが勝っている部分も。そしてFirefox内ではやはり新バージョンが順当に底上げをしている感じ。
Operaに関しては両者からかなり引き離されているものの、それでも動くだけマシでしてIE9は結局最初の項目も出ませんでした……。

追記

米Google、JavaScriptベンチマークツール「Octane」発表
http://sourceforge.jp/magazine/12/08/22/2253205

対応WebブラウザはGoogle Chrome 14以降、Firefox 13以降、Internet Explorer 10、Opera 12、Safari 5.1.7以降。また、一部Android端末においてChrome、Firefox、Operaでの動作確認もしているという。

IE9は最初から対応してないのね。

■ツイート

Firefoxも晒したのでついでにGoogleChromeの拡張を晒してみる件

正確にはGoogleChromeではなくIronを使っているのだが、IronではGoogle拡張のページに直接は行けないので、メモ代わりに。

domblrco
https://chrome.google.com/webstore/detail/kehbgighdebdbiefilmmhjlbhlggiijl

Chromeといえばこれしかない。tumblrで簡単にリブログできる簡単拡張。
リブログのアイコン上で右クリック、pb（Publish）アイコンをリブログしたいBlogにドラッグ＆ドロップするだけでそこにリブログできるというあまりにもラクすぎる拡張。

Create Link
https://chrome.google.com/webstore/detail/gcmghdmnkfdbncmnmlkkglmnnhagajbm

FirefoxでのMakeLinkに対応するクリッピング拡張。
設定した後、再起動でちゃんとコンテキストメニューで使える。
ただメニューの順番を入れ替える拡張がないのでFirefoxより使い勝手は悪い。

Gestures for Chrome(TM)
https://chrome.google.com/webstore/detail/jpkfjicglakibpenojifdiepckckakgk
ジェスチャー系については特にこだわりがないのだけれど、今回はこれ。

あとは自分の作った拡張を動作確認レベルで入れてる
https://chrome.google.com/webstore/search/f-square

Firefoxとは当然違い、意外とできないことが多いのでやっぱりFirefoxだなぁと思う今日このごろ。

【追記】

はてなブックマーク GoogleChrome 拡張
https://chrome.google.com/webstore/detail/dnlfpnhinnjdgmjfpccajboogcjocdla

Evernote Web Clipper
https://chrome.google.com/webstore/detail/pioclpoplcdbaefihamjohnefbikjilc

webサービス絡みも入れとかないと……

■ツイート

Chromeの拡張とか改造するのに必要な手順メモ③「サーニャが見てる」おぼえがき

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

①　ファイル配置

以下のファイルをsanyaフォルダ以下に配置する。

sanyaフォルダ
├ manifest.json　……拡張の核になるマニュフェストファイル
├ sanya_BG.html　……拡張の動作を司るJavascriptを埋め込んだhtmlファイル
├ sanya_open.png　……サーニャボタン（目が開いてるもの）
├ sanya_close.png　……サーニャボタン（目が閉じてるもの）
└ sanya_icon.png　……サーニャアイコン（拡張のインストールや管理画面に出るアイコン）

②　manifest.json

{ "name": "sanya_is_looking",　……拡張の名前（拡張配布ページにおける英字名）必須
"version": "1.0",　……バージョン数値必須
"description": "エイラ「サーニャをそんな目で見んなーっ！」",　……拡張の説明（拡張配布ページにおける注釈）推奨
"background_page": "sanya_BG.html",　……拡張機能のプロセスで実行されるJavascriptを埋め込んだHTMLファイル）
"browser_action": { "default_icon": "sanya_close.png",　……ブラウザアクションにおける最初のアイコン（眼を閉じた状態）
"default_title": "サーニャが見てる"　……ブラウザアクションにおける最初のマウスオーバーテキスト
},
"icons": { "16": "sanya_icon.png", "32": "sanya_icon.png", "64": "sanya_icon.png", "128": "sanya_icon.png" },……アイコン（拡張配布時）推奨
"permissions": [ "tabs" ] }

詳しい中身はChrome Extensions API リファレンスの当該ページ参照。 　iconの項目は正確には

"icons": { "48": "sanya_icon.png",……48×48のアイコン（拡張機能の管理ページで使用）
"128": "sanya_icon.png" ……128×128のアイコン（拡張機能のインストール時に使用）
},

ということらしい。記述がおかしいのはコピペ元がおかしかったから。
　permissionsは拡張機能がブラウザのどこの部分に作用、または連動するかを記述する。
　今回の場合はタブの更新イベントを読みとる必要があるので"tabs"は必須になる。

③　sanya_BG.html

HTMLファイルだけれども、実際にはJavascriptを配置している部分

<html>
 <head>

//Javascriptの領域//
<script type="text/javascript">



//目の開閉フラグ（0……閉じてる,1……開いてる）//
eyes=0;

//目の開閉を関数化//
function closing_eye(tabid){
 chrome.browserAction.setIcon({path:'sanya_close.png', tabId:tabid})
}
function openning_eye(tabid){
 chrome.browserAction.setIcon({path:'sanya_open.png', tabId:tabid})
}

//更新中に目を開く・更新していないときは閉じる//
chrome.tabs.onUpdated.addListener(function(tabid, info){
 if (info.status === 'loading') {
  openning_eye(tabid);
  }
  else
  {
  closing_eye(tabid);
 }
}
);

//ボタンをクリックすると目を開く・閉じる//
chrome.browserAction.onClicked.addListener(function(tab){
 if (eyes == 0) {
  openning_eye(tab.id);
  eyes = 1;
  }
  else
  {
  closing_eye(tab.id);
  eyes = 0;
 }
}
);
</script>
</head>
<body>Test</body>
</html>

使ったイベント類 　

１．browserAction.setIcon 　ブラウザアクション（右上のボタン類）のアイコンに画像を設定する。

chrome.browserAction.setIcon({path:'sanya_close.png', tabId:tabid})

２．tabs.onUpdated 　タブが更新されたときに発生するイベント、更新されたタブのidとその状態を示す文字列（“loading” もしくは “complete”）が渡される。

chrome.tabs.onUpdated.addListener(function(tabid, info){……

３．browserAction.onClicked 　ブラウザアクション（右上のボタン類）のアイコンをクリックしたときに発生するイベント。その時選択状態にあるtabオブジェクトが渡される。

chrome.browserAction.onClicked.addListener(function(tab){……

　個人的にはアイコン切り替えの関数は引数いらないような気もするんだけどなぜか動かなかったので念のため。

■Tweet■■

あの「中止ボタンがサーニャに見えて困る」をようやくChromeに移植しました

  昨日の勢いで作ってしまいました。わかってしまえば結構簡単なもので。

　ただ中止ボタンはChromeにはありませんしそっちを弄る方法までは手が届かないので、サーニャボタンを設置してFirefox版同様に、ページ読み込み時に目が開くようにしました。ということで名称も「中止ボタンが～」が抜けています。
　実際に実装してわかったことなんですが、書き込みを要するような処理を除いてほとんどのページでは読み込みが一瞬で終わってしまうため、瞬き程度にしか目が開かないことが多いです。
　なのでボタンとして余っていたクリックで目の開閉が選べるようにしました（読み込むと閉じます）

　ダウンロードはこちらからどうぞ。

■Tweet■■

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つだけ。この３つだけがフォルダにあればいい。
　あとは前回の方法を使ってまずはパッケージ化されていない拡張機能を読み込みます（Load unpacked extention）でフォルダを読み込むと……

　こんな感じに。ボタンは単にあるだけで押しても何も起きない（もちろん中止もできない）が、サーニャが見てるだけであればこのように簡単に作ることができるわけで。
　もちろんパッケージにすればインストールもできる。

　とりあえずここまでできた。この先の機能追加についてはまずは考え中……。

■ツイート ■

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

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

１　まずはソースの入手法

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

「install」ボタンを右クリック→「名前をつけてリンク先を保存」で……

2012/07/11追記：最近はこの方法ではできないみたいですね。

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

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

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

 

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

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

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

3つのボタンが登場する

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

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

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

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

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

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

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

今回のまとめ（理解できた分だけ）

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