Chromeでメモを取ることに特化した拡張機能を作った話

はじめに

エンジニアとして、業務をしていて一番使うアプリは、Chromeです。
Web会議、テスト、プロジェクト管理、コミュニケーションツールなど、一日の大半をChromeで作業しています。

がっつりメモを取るときは、Notionを使っていますが、
ちょっとしたメモを取るときは、いちいちNotionを開くのが面倒だなと思っていまいました。

Chromeでメモを取ることに特化した拡張機能を作りました。

作った拡張機能

Chrome拡張機能「Handy Memo」は、Chromeでメモを残すことができる拡張機能です。

ポップアップで表示されるメモのエリアに、タイトルとメモの内容を入力できます。

ツールバー

アイコンをクリックすることで特定の文字を入力できます。

• # アイコンをクリックすると、#を入力します。
• ## アイコンをクリックすると、##を入力します。
• ### アイコンをクリックすると、###を入力します。
• ■ アイコンをクリックすると、■を入力します。
• DATE アイコンをクリックすると、YYYY/MM/DDを入力します。
• TIME アイコンをクリックすると、HH:MM:SSを入力します。
• URL アイコンをクリックすると、現在開いているタブのURLを入力します。

各種ボタン

• コピーボタンをクリックすると、メモの内容をクリップボードにコピーします。
• リセットボタンをクリックすると、タイトルとメモの内容をリセットします。
• ダウンロードボタンをクリックすると、メモの内容をmdファイルとしてダウンロードします。
  • タイトルが入力されていない場合は、YYYY-MM-DD-HH-MM-SSの形式でファイル名が付与されます。

開発プロセス

使用した言語

• TypeScript
• HTML
• CSS（Bootstrap）

この拡張機能を開発するにあたり、私はTypeScript、HTML、そしてCSS（Bootstrap）を選択しました。
TypeScriptを採用した理由としては、TypeScriptを使ってなにか開発したかったからです。
動画や書籍だけで学ぶのは難しいので実際に手を動かしたかったというのもあります。

開発環境の設定

開発において、環境構築がかなり面倒ですが、Chromeの拡張機能はmanifest.jsonを用意するだけで環境構築ができるのでかなり便利です。

簡単に環境構築ができるので、開発着手までの期間がかなり短くなります。

まとめ

TypeScriptでコーディングする際には、型の重要性を再認識しました。
また、Webpackを使用することで、よりスマートな開発が可能であることを発見しました。
CSSとBootstrapのおかげで、デザインの重要性を完全に理解しました。新しい技術を使うことは最初は挑戦でしたが、その価値をしっかりと実感しました。

新しいことを始めるには時間がかかること、継続的に改善することの重要性を学びました。