ショートカットキーで選択範囲の色を変えるChrome拡張機能をつくった話

はじめに
--------------------
- Qiita等でMarkdown書く時に、赤字で強調したい時に毎回 `<font>` タグ打つのが面倒だった
- ので、Chrome拡張をつくって公開した

※ ちょっと今時間がないので、あとで整理し直します。一旦公開だけ
※ ちなみに過去にこんなのもつくってます。よかったらどうぞ → [Qiita（とかブログとか）にPlantUMLで書いたUML図を貼れるようにChrome拡張機能を作った](https://qiita.com/ryskiwt/items/06c1322ebae8af376f7a#_reference-4d1bc8ba718333c07d0e)

つくったもの
--------------------
- テキストエリアで文字を選択して、ショートカットキーを押すと、選択文字の前後に `<font color="XXX">` と `</font>` が挿入されるだけのChrome拡張機能
- 現在は `Alt+R` で<font color="red">赤文字</font>に、 `Alt+B`で<font color="blue">青文字</font>になるのみ

これを
<img width="533" alt="スクリーンショット 2017-11-24 9.37.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/111801/8dd6ade6-ea66-f011-5456-df3f9582aea0.png">

こうして
<img width="534" alt="スクリーンショット 2017-11-24 9.37.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/111801/5f8fffb5-49ee-6f04-cfe3-bcb6a9e42776.png">

こうじゃ
<img width="534" alt="スクリーンショット 2017-11-24 9.37.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/111801/322af699-6a52-744b-68d1-c0673b9b230f.png">


Chromeウェブストア
--------------------
- [Color Changer - Chrome ウェブストア](https://chrome.google.com/webstore/detail/bkafkijjlijkgcojllmocbhdklepbncd?hl)

Githubリポジトリ
--------------------
- [ryskiwt/color-changer](https://github.com/ryskiwt/color-changer)

参考にさせていただいたサイト
--------------------
一旦列挙のみ。あとでまとめます

- [javascript - access to focused element from background page in extension for Google Chrome - Stack Overflow](https://stackoverflow.com/questions/8327403/access-to-focused-element-from-background-page-in-extension-for-google-chrome)
- [chrome.commands - Google Chrome](https://developer.chrome.com/extensions/commands)
- [chrome extension : How to get key events - Stack Overflow](https://stackoverflow.com/questions/5498893/chrome-extension-how-to-get-key-events)
- [EventTarget.removeEventListener - Web API インターフェイス | MDN](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/removeEventListener)
- [JavaScript でのキーボード制御 - ICS MEDIA](https://ics.media/tutorial-createjs/keyboard_basic.html)
- [JavaScript でテキストエリア内のカーソルのある位置に文字列を挿入する方法 - Qiita](https://qiita.com/noraworld/items/d6334a4f9b07792200a5)
- [JavaScriptプログラミング講座【キーボード操作について】](http://hakuhin.jp/js/key_board.html#KEY_BOARD_03)
- [範囲選択した文字列を修飾する - Qiita](https://qiita.com/umanoda/items/1042071b038a758b8663)
- [Chrome Extension を作って公開する - Qiita](https://qiita.com/sqrtxx/items/19fd2114430e9e1fb57f)
- [chrome.browserAction - Google Chrome](https://developer.chrome.com/extensions/browserAction#method-getBadgeText)
- [Chrome機能拡張のコンテンツスクリプトについて | OXY NOTES](http://oxynotes.com/?p=8960)
- [Chrome拡張開発: 拡張からページにJavaScriptを送り込みたい - Qiita](https://qiita.com/suin/items/5e1aa942e654bce442f7)
- [3.2.ブックマークされたらContentScriptに伝える · 1000ch/chrome-extension-hands-on Wiki](https://github.com/1000ch/chrome-extension-hands-on/wiki/3.2.%E3%83%96%E3%83%83%E3%82%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%81%95%E3%82%8C%E3%81%9F%E3%82%89ContentScript%E3%81%AB%E4%BC%9D%E3%81%88%E3%82%8B)
- [chrome.commands - Google Chrome](https://developer.chrome.com/extensions/commands)
- [chrome extension : How to get key events - Stack Overflow](https://stackoverflow.com/questions/5498893/chrome-extension-how-to-get-key-events)