Chrome拡張を作りましょう！ #JavaScript

Chrome拡張の入門として、Chatworkで使える拡張を作りました！
下記のstepsに従ったら、自分でも作れるよ！

Manifestを書きましょう

Chrome拡張を書こうとおもったら、まずはManifestです。このJsonファイルがないと、どんだけコードを書いても、Chrome拡張としてリリースできない。

まず、上の部分：

{
  "manifest_version": 2,

  "name": "ChatWork_TO_@Shortcut",
  "description": "チャットワークメッセージで「@@」を入力するとキーボードでTOを選択できる",
  "version": "1.0.1",

ここで、拡張の名前、内容とバージョンを設定する。
Chromeで使うmanifestバージョン「1」
が対応されていないため、
manifest_versionも2に設定しないといけないらしいです。

次に、browserが起動すると、拡張の行動を書く。今回は簡単なので、iconだけを設定します。iconファイルは現在のフォルダーに保存されている。

  "browser_action": {
    "default_icon": "icon.png"
  },

その下に、content_scriptsを追加します。ここで、どんなurlに有効すると何のスクリプトを読み込むのを設定する。自分はchatworkの全てのチャットで使うので、「＊」を書きました。
Javascriptも使うので、2つファイルを読み込みました。

  "content_scripts": [
    {
      "matches": ["https://kcw.kddi.ne.jp/*"],
      "js": ["jquery-3.1.1.js","ChatworkAtMarkTo.js"]
    }
  ],

最後に、permissionsを追加します。この部分はChromeから拡張になんの情報を渡すかを設定する。

  "permissions":[
    "tabs"
  ]

全体的にmanifest.jsonは下記のようになります。

{
  "manifest_version": 2,

  "name": "ChatWork_TO_@Shortcut",
  "description": "チャットワークメッセージで「@@」を入力するとキーボードでTOを選択できる",
  "version": "1.0.1",

  "browser_action": {
    "default_icon": "icon.png"
  }, 

  "content_scripts": [
    {
      "matches": ["https://kcw.kddi.ne.jp/*"],
      "js": ["jquery-3.1.1.js","ChatworkAtMarkTo.js"]
    }
  ],

  "permissions":[
    "tabs"
  ]
}

これを自分の拡張フォルダに保存して、次Javascriptに行きます。

Javascriptを書きましょう

本拡張はJavascriptのJqueryを使うので、manifestにjqueryファイルもインポートしている。
コードは下記のように。

jQuery(function () {
  //@@が削除されたかのflag
  var replacedAtMarks = false;
  //メッセージ内容boxにキーを打った（keyup）後で実行されます
  $("#_chatText").keyup(function (){
    //チャット入力textareaの内容を取得
    var text = $(this).val();
    //'@@'を探す正規表現
    var regExpAtMark = new RegExp('@{2}'); 

    //内容にどこかで「@@」が入力されたを判断する
    if(regExpAtMark.test(text)){
      //TOボタンをクリック。メンバーの選択はキーボードでもできる。
      $('#_to').trigger('click');
      //「@@」の分だけを削除する
      $(this).val(text.replace(regExpAtMark,''));
      //@@を削除したよ！
      replacedAtMarks = true;
    }
  });

  //@@を押すと、TOのリストが出てくるけど、その後ESCキーを押したら、
  //メッセージ入力画面のfocusが外れる。それを避けるため、下記のfunction
  $(document).keyup(function (e){
    //@@が削除されていた後にESCキーを押すと
    if(e.which == 27 && replacedAtMarks){
      //メッセージ入力画面にfocusを戻す
      $("#_chatText").focus();
      //flag reset
      replacedAtMarks = false;
    }
  });
});

簡単に言うと、Chatworkの入力画面でメッセジを入力した後、正規表現で文字列に「@@」があるかを判断して、TO画面をJqueryでクリックする。その後、「@@」を削除する。

Chromeで使いましょう！

この2つファイルと自分で精製したicon.pngを1つのフォルダに入れて、Chromeブラウザを開く。

chrome://extensions/

までに移動して、'Load unpacked extension...'ボタンを押す。ここで、保存しているフォルダを指定して、そのままchrome拡張を使えるようになる！これで完成です！
（chrome webstoreで公開するのはまた別の記事で！）