https://developer.chrome.com/のページって複雑でどうなってるのかわかりづらいです
リンクもいっぱいあって しかも英語なので行きたいページに辿りつけず毎回 Google 検索通してました

最近やっとわかってきた(もしかするとページの方がわかりやすくしてくれた)ので簡単にメモ書きしておきます
単純に URL の構成とかなので 無くて困らない人には全く必要な程度のものです

それとあくまで今現在のものなので Google のページみたいによく変更されるところだとすぐに使えなくなるかもしれません

トップページ

chrome-dev-01

このページは大きく 3 つに分かれています

DEVTOOLS MULTI-DEVICEPLATFORM です

DEVTOOLS は Chrome の devtools です
F12 押してでてくるあれです

MULTI-DEVICE は Android とか IOS です

PLATFORM は この中に App や Extension や NativeClient など内側にまた種類があります

下の方にもリンクがありますが同じ 3 つへのリンクです

chrome-dev-02

一番下のリンクは外部リンクです
Google Groups とか stackoverflow とか Dart の公式ページとかです

DEVTOOLS

基本的にここの内側は URL が https://developer.chrome.com/devtools になってます

chrome-dev-devtools

基本どこからでも上のナビゲートリンクからジャンプしてこれます
縦でグループになっていて DEVTOOLS のページ内の左側サイドバーのグループと対応しています

chrome-dev-devtools-vmenu

Learn Basics や Use Tools を選択すればより内側の部分がサイドバーで見れるようになります

ほぼ見るのは Reference のグループだと思います

Console APICommand Line API は知っておくとデバッグが格段に楽になります
devtools 内のキーボードショートカットもよく使うのは知っておくと楽できます

devtools の拡張機能を作る説明もこっちです
devtools のパネルを増やしたり Command Line API のように devtools でだけ使える関数を追加したりできます
ここは devtools の中ですが URL は extensions になってます


色々書きましたが 重要な注意点があります

DEVTOOLS の項目は新しいところに移っています
https://developers.google.com/web/tools/chrome-devtools/

古い版(上でリンク貼ってるもの)のほうが他の Extensions などの項目と同じデザインで見やすかったのですが これからは 新しい方を見たほうがよさそうです
ところどころ古い情報のまま更新されていないので 古い方はたぶん更新はされないのかと思います

MULTI-DEVICE

chrome-dev-mutildev

URL が https://developer.chrome.com/multidevice/ から始まります

スマホやタブレットなどモバイル向けを作るなら見ておくと良さそうです
私は特に PC 以外を作る気ないのでおすすめするページがあるほど把握できてないです

PLATFORM

ここは DEVTOOLS などと違って内側に 4 つの項目があります
それぞれ別々のもので Learn Basics もそれぞれにあります

chrome-dev-platform

サイドバーは PLATFORM に対してのものなので Apps から Extensions にも移動できます

Apps

URL は https://developer.chrome.com/apps/ から始まります

昔は拡張機能のひとつにアプリがあったと思うのですが いつからか完全に分離しています
説明も別になっていて 把握しづらいことになってます

昔のなごりか extensions の中の app にアクセスするとこんなページが
https://developer.chrome.com/apps/manifest/app

アプリには hosted apps と packaged apps があります
hosted は自分のサーバで web サービス作ってる人がそこへのリンクをするだけで拡張機能として何かつくるわけじゃないもの
packaged は拡張機能でアプリをつくるもの

リンクしてるだけで拡張機能通さなくても一緒じゃないの?って思う拡張機能があると思いますがあれは hosted ということですね

右クリックにメニューつけたり常に通信を監視したりボタン押したらコードを埋め込んだり とかそういう拡張機能 っぽいのとは違って 1 つのサービスをつくるときに使います

VNC だったり ssh だったり Chrome の中で動かしてるとは思えない 普通の Windows アプリみたいなものも作れます

Extensions

URL は https://developer.chrome.com/extensions から始まります

個人的に一番使うところです

特に役立つのはこのページですね
PLATFORM > Extension > Chrome Platform APIs > JavaScript APIs

ここから tabs とか downloads とか runtime とかそれぞれの API の reference ページに飛べます

chrome-dev-platform-jsapi

ただ 各 API のページに行くと こんな表示になってしまいます

chrome-dev-platform-extension-contextmenus

サイドバーが消えて 右上のナビゲーションも PLATFORM がアクティブじゃなくなってしまいます

このせいでいきなりここに来たら ひとつ上の階層に行って API の一覧を見ようとしてもどうすればいいのかわからず困ります

とりあえず Chrome アイコンを押したら トップページなのでどうやって 拡張機能の API にいけばいいのかすらわからなくなってしまいます
いきなり Extensions って言葉もなく 3 つのうちの一番最後の項目の PLATFORM を開いてみないと見つからないわけですからね

このサイトの構成が分かれば 特にこまらず行きたい所へ行けると思います

Native Client

JavaScript だと難しいというかできない部分を作るやつですね
確か C とか C++ ? で dll を作るのだった気がします

少し前に NPAPI が廃止して PPAPI になったとありましたが あのあたりです
ブラウザを超えて Windows を操作したりできるようですが 難易度高いですし OS 部分を操作できるとセキュリティ面も大変だと思うので超上級者向きって感じがします

Wiki によると Google Native Client は 「ネイティブコードを安全に、しかし効率的に実行することを目標とした、サンドボックスを中心としたフレームワーク」 だそうです

ネイティブコードを実行するものですが プロセッサに依存しない版の PNaCl というのもあります
どんなときにどっち使えばいいかというのも書かれています

URL は https://developer.chrome.com/native-client

Store

URL は https://developer.chrome.com/webstore です
WebStore にアプリや拡張機能を登録することについてです

Google としては野良アプリは非推奨で WebStore を通せというスタンスです
ですが $5 がかかります
お金を取るアプリを作るなら良いと思いますが 気軽に無料配布したいだけなのにお金とられるのは嫌なので私は野良拡張機能配布しかしてません

WebStore を通したほうが ダウンロード数は増えると思いますが 無料でダウンロード数にこだわらないならホームページやブログなどで配布で十分だと思います

WebStore 使う気がなくてほぼ読んでないのでこれくらいです

まとめ

  • DEVTOOLS (F12押して出てくるやつ)
  • MULTI-DEVICE (スマホとか)
  • PLATFORM
    • Apps (アプリ)
    • Extensions (拡張機能)
    • Native Client (PNaCl PPAPI とか)
    • Store (Chrome のウェブストア)


という構造だけ頭に置いておけば

とりあえず右上から DEVTOOLS, MULTI-DEVICE, PLATFORM だけ選んであとは サイドバーから行きたいページを選ぶだけです