Posted at
HameeDay 14

Chrome拡張を作りましょう!

More than 1 year has passed since last update.

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で公開するのはまた別の記事で!)