Newtionという「Notionの新規ページを作って開くショートカットをブラウザで使う」Chrome拡張機能を作った
はじめに
自分がブラウザ版の Notion に欲しかった機能を Chrome 拡張機能で実現できたので、紹介も兼ねて記事にすることにしました。
使うとどうなるか？
このようにショートカットを使って新規ページを DB に作ってモーダル形式で開くことが可能です ✌️
インストール・設定・使い方
Chrome ウェブストアで公開しています。
設定方法は以下の記事にまとめました。
README にも載せていますが、上記ブログで画像付き解説です！
つい先日、 Notion Students Meetup に登壇したのですが、その資料でも紹介しています。
ここから雑談・開発話となります。
使用例
こんな時に使うと便利で、問題を解決できるよ！ということをアピールします 😃
- ブラウザ版にないショートカットを使いたい・・・
- 不可能が可能に！
- あるテーマに関してググっていて、今の記憶を全てまとめたい・・・
Cmd/Ctrl+Shift+Iで開いてすぐ書ける！
- デスクトップ版で新規ページ作りまくるとサイドバーが散らかる・・・
- 新規ページを作りまくってもサイドバーが散らからない！
作るに至った経緯
Notion は PC で使う際に、デスクトップ版・ブラウザ版の 2 つの選択肢があります。
Notion のページを同時にいくつも開く場面が多いのですが、デスクトップ版ではウィンドウが複数開かれるのです。
非常に邪魔で不便でした。このストレスを感じてブラウザ版に移行した方もいらっしゃるでしょう。（僕は併用してます）
また、新規ページを作って開くショートカットが、**ブラウザ版にもいずれ実装されるのでは？**と思ったかもしれません。
その機能が実装されても問題ないDB へのページ作成という強みがあるため問題はないと考えています。
技術的な話
開発時間はテンプレート調査・Chrome 拡張のドキュメント調査など含め
3,4 時間かかりました。ドキュメント・ブログ記事書くのも地味に数時間かかってます。
そういったドキュメントを書く時間も開発時間のうちだと最初から計画してやるべきでした、反省。
技術構成
React
TypeScript
Jest
Github Actions- 現状はテストと
Github Pagesのみ動かす - 時期にリリースもここからやる
React を用いて作りました。結局のところビルドして
HTMLCSSJavaScript になれば何で作っても OK です。僕は Web フロントエンドを
JavaScript の勉強せず React をやるバカなことをしたので、React しか書けません。また、Chrome 拡張機能の開発は初めてだったので、何かテンプレートから作ろうと思い探したところ、以下のリポジトリを見つけました。
大変お世話になりました、開発者の方ありがとうございます 🙏
安全性
また、Notion の API を用いているため、安全性に不安を感じる方もいるでしょう。
実は、ほぼ安全です。API に与える権限は、DB への挿入権限だけで、ユーザー情報の読み取りは不要です。
仮に Token が漏洩しても、データを挿入するしかできません。よって安全だと言えます。
初めて Chrome 拡張機能を作って感じたこと
単なる Web サービス・ルールであれば、誰の審査も必要ありません。
しかし、Chrome 拡張機能は審査が必要です。Chrome などのブラウザはセキュアな情報を扱うので、開発会社の対応としては当然ですね。
Chrome 拡張機能は最低限のルールを守っているか・セキュリティ的に問題がないか、など運営に確認してもらい合格をもらう必要があります。
iOS,Android などのネイティブアプリの開発経験がなかったので、これは新鮮でした。
審査の時間について
誰かの参考になると思うので、残しておきます。
結論としては、レビュアーはランダム・審査は 1 回目が優先される、ということです（推測）。
初回の審査は 2 時間ほどで通りました、逆に怖かった・・・
問題は 2 回目の審査です。アイコンの修正とポップアップの文字列変更をしただけでしたが、4 日ほどたって連絡が来ました。
？となりましたが、確かにミスってました。なんで 1 回目に教えてくれないの？と思いますよね。
ちなみに、その修正をすると翌日に反映され、公開されました。初回の審査よりはやはり遅いです。
ここから、審査する人は当然バラバラで、初回審査は優先されるということがわかりました。今後はこれを意識して開発することにします。
あと、Chrome の開発者登録として
5$かかりました、円安・・・今後の展開
超スモールスタートしか考えていなかったので、ポップアップのデザインは放置しました。設定するときしか見ませんからね。
ロードマップは、以下の通りで、上から順に優先です。
- ポップアップデザインの改善
- Chrome 拡張としての公開を自動化
- 新規タブとして開くかを選ぶ
- データベースのカラムを自由に設定可能に
- コンポーネントのテスト
- 開発環境の整備（Docker 化・Pre Commit・eslintrc を正しくなど）
反省点
ドキュメントを書く必要のないテーマを選ぶべきだと感じました。サイトを開いたらサルでも使えるを目指すべきです。
また、Notion の API に依存するので、保守性は悪いと感じました。
やってみて気づくこともあるので、この失敗は肯定的に受け止めてます・・・
さいごに
最後までお読みいただきありがとうございました！
これで Chrome 拡張機能を作ることに不安はなくなりました。
Chrome 拡張機能にアイデアは無限に書き留めていたので、適宜作って公開しようと思います。
Github は以下です。良いなと思っていただけたら Star 欲しいです、喜びます。
Notion Students Meetup の資料もどうぞ。