読者です 読者をやめる 読者になる 読者になる

Google Chrome の Extension 書いて詰まったりおっと思ったりしたところ

JavaScript GoogleChrome

今朝、クロネコさんの荷物問い合わせ結果画面をリロードしつつ「配達中」ステータスになるのを待っていたら、なんかこれは人間のやることじゃないぞと思い立ち、 Chrome の Extension を書きました。

それがこれ、クロネコヤマタブルです。

しかしこの Extension 自体はどうでも良く、詰まったりへえと思ったところを書きます。

background の js では cross origin な XHR が使える

https://github.com/oogatta/kuronekoyamatable/blob/master/main.js#L25
普通に使えちゃうんですね。

var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.pushover.net/1/messages.json', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
    }
};
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8');
xhr.send('token=' + encodeURIComponent(values.apiToken) + '&user=' + encodeURIComponent(values.userKey) + '&message=' + encodeURIComponent(packageInfo + '\n' + message));
}

これが実行コードで、 manfest が
https://github.com/oogatta/kuronekoyamatable/blob/master/manifest.json#L25

  "content_security_policy": "default-src 'none'; style-src 'self'; script-src 'self'; connect-src https://api.pushover.net",
  "permissions"      : [
//...
    "https://api.pushover.net/*"
  ],

こんなです。一応 CSP 設定したので接続先2回書いてますがデフォルトなら permission だけでいいはず。

content に inject されるスクリプトは特別な sandbox に入っている

https://github.com/oogatta/kuronekoyamatable/blob/master/content/main.js#L68

window.debugRun = function () {
  previousStatus = sessionStorage.getItem('previousStatus');
  message = __checker();
  sender();
}

本来インターバルで動作するものをテストするため手動で動かしてみたいので、適当に関数を露出させてみたんですが存在しません。 DOM にはアクセスどころか変更もかけられるのに。

そうだよ。

ってドキュメントに書いてあるのでそうなのです。 dev tools の Console のあれ、あれですよ、 <page context> ってプルダウンで自分の拡張を選択したら、 window.debugRun いました。

Extension 用のストレージ、相当便利

https://github.com/oogatta/kuronekoyamatable/blob/master/options/main.js

chrome.storage.sync.set({
  apiToken: apiToken,
  userKey:  userKey
}, function() {
  vex.dialog.alert('保存しました。');
});

保存これだけですよすごい。これで、 Chrome アカウントに紐付いて別のマシンにも飛んでいくんですよ!。文明開化だわー。

以上です。オプションページはやりたい放題出来て楽しいですね。