search
LoginSignup
5

More than 5 years have passed since last update.

posted at

updated at

DartでChrome Extensionを書く

(そろそろ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でもメソッド名などが失われず、エラー箇所を確認できる。

既知の問題

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を書いてゆきたい。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
5