（そろそろAngular 2も来るので、TypeScriptでも覚えるかー案件にしようかと偵察して迷った挙句に、やっぱりDartに戻ってきました。）

Dartを取り巻く情勢

（略。）
Dartで書かれたChrome AppsアプリケーションのDart Dev EditorにDart版のChrome Extensionのテンプレコードが搭載される予定だったが、そこまで至らずに2015/09で開発終了。。
なので、スクラッチで書く。

document

import 'package:chrome/chrome_ext.dart' as chrome;

でimportする。chrome_app.dartではない。

sample

先人たちのサンプル集です。

↓これはExtensionではなく、Chrome Appsです。

注意

それぞれのリポジトリは、動かしてないので今も本当に動くかは不明。
ぐぐる時は、Dart自体のextensionもあるので見分けること。

（少ないなあ。心が折れる前に、動くところまで到達したのでよかった）
他にも知っていたら、教えてください。

debug

Dartiumだとdartファイルでsyntax errorが出て動かない。
（深追いしてないが、backgroundだから？）

よってdebugできないので、debug modeでbuildする。

$ pub build --mode=debug

するとSource Mapsが有効になり、Chromeでもメソッド名などが失われず、エラー箇所を確認できる。

Dart to JS: How to debug the generated Javascript errors

既知の問題

chrome.runtime.onMessage は正常に動作していない。

（修正済みでした。）

成果物

Dartアイコンをアドレスバー内の右端に表示するChrome Extensionです。
以下、ザクッとしたコメント付きで。

pubspec.yaml

name: dart-chrome-extension
description: A sample Dart Chrome Extension
dependencies:
  chrome: any
transformers:
- chrome

# dart2jsコマンドラインへのデフォルトオプション。
- $dart2js:
    # Chrome ExtensionのCSP制限対応で必須。
    csp: true

web/manifest.json

{
  //backgroundから、アイコンの表示を指示する。
  "background": {
    "scripts": [
      "main.dart.js"
    ]
  },
  "description": "A sample Dart Chrome Extension",
  "icons": {
    "128": "dart-logo-128.png"  //16pxとかだと表示されない。
  },
  "manifest_version": 2,  //protocol version、固定。
  "name": "dart-chrome-extension",
  //page_actionとは、アドレスバーエリア内の右端に表示される挙動。
  "page_action": {
    "default_icon": {
      "128": "dart-logo-128.png"
    },
    "default_title": "A sample Dart Chrome Extension"
  },
  "version": "2015.11.30.1" //配信時にはこの値を大きくしないとコンシューマ側が更新されないので、重要。
}

web/main.dart

// 必須。chrome_app.dartではない。
import 'package:chrome/chrome_ext.dart' as chrome;

void main() {
  //現在、前面に表示しているtab
  chrome.TabsQueryParams q =
      new chrome.TabsQueryParams(active: true, currentWindow: true);
  //extension読込み時に呼ばれる。
  chrome.tabs.query(q).then((tabs) {
    //アイコンをアドレスバー内の右端に表示する。
    chrome.pageAction.show(tabs[0].id);
  });

  //tabが切り替わった時に呼ばれる。
  chrome.tabs.onSelectionChanged.listen((chrome.OnSelectionChangedEvent event) {
    //アイコンをアドレスバー内の右端に表示する。
    chrome.pageAction.show(event.tabId);
  });
}

感想

DartiumでExtensioinが動かないと、TypeScriptに対する優位性がががが。ちょっと辛い。
dartdocs2のドキュメントは自動生成なのか、慣れるまでは内容を追いにくい。
また明日からもゴリゴリDartを書いてゆきたい。

DartでChrome Extensionを書く