Notionにいいねボタンを追加するChrome拡張を作った
作成日
2022/02/07
オススメ度
👍👍
デバイス
Chrome拡張機能
ひと言メモ
Notionにいいね！ボタンつけられるChrome拡張機能の詳細！！これは実装する価値あり！！！
カテゴリDBカテゴリ
はじめに
組織でNotionを使っていると、記事の発掘やコミュニケーションの円滑化を図るために、「いいねボタン」をつけたいと思ったことはありませんか？
- 記事ごとにいいね数や誰がいいねしたかを保持する何らかの外部データベースが必要
- 1ページずつ設置する手間がある
しかし Notion には「データベース」という機能があり、そこには「プロパティ」という任意のデータを格納できる仕組みがあります。これを応用し、データベースの全ページに「いいねボタン」を表示するChrome機能拡張を作ってみました。
使い方
Notion 側の設定
- この機能拡張は Notion のデータベース以下のページでのみ動作します。データベースがない場合はまず作成しましょう。
- 作ったデータベースに
Likeというプロパティ（カラム）を作ります。タイプはPersonにします。Likeではなくいいねなどでも構いませんが、後ほど設定が必要なのでプロパティ名を控えておいてください。
- 機能拡張は Notion の API を使って
Likeプロパティへのデータの読み書きを行います。こちら から Notion の Integration を新規で作成します。ワークスペースの管理者権限が必要なので、権限がない人は管理者の方に相談してください。
- 作成する Integration の名前やアイコンはなんでも構いません。最低限必要な Capabilities は以下の通りです。
- Integration を作成すると Internal Integration Token が発行されるので、こちらも控えておいてください。
- いいねボタンを表示するデータベースを開き、右上の
Shareをクリックして、作成した Integration をメンバーとして追加します。
機能拡張の設定
- こちらから機能拡張をインストールします。
- ツールバーのボタンをクリックし、設定画面を表示します。
- 設定画面 API Token に先ほど控えた Internal Integration Token を入力します。
- また、 Like Prop に
Likeと入力します。Notionで作成したデータベースで「Like」プロパティではなく別の名前にしている場合はその名前を入れてください。
- この設定はインポート、エクスポートができるようになっています。組織内の他のメンバーにも設定を共有する時に便利です。
- 以上で設定は完了です。 この状態で Integration が招待されたページを開き直すと、いいねボタンが表示されるようになっていると思います。
その他のTips: データベースのプロパティにいいねされた数を表示する
FormulaというタイプのプロパティをLike Countのような名前で追加します。
- データベース内のページを何かひとつ開き
Like Countの値をクリックし、以下のコードを入力します。（Likeプロパティ名は任意で変えてください）
分かっている問題: いいねするたびにメンションがつく
いいねは API 経由で行っているので、「Bot ユーザーが自分をメンションした」という扱いになり、メンションがついてしまいます。回避策を探しています。
技術周りの話
Chrome機能拡張を作ったのはほぼ初めてだったのですが、ボイラープレートがいくつかあったので簡単に作り始めることができました。フロントエンドは React に加えて、CSS-in-JS ライブラリの Linaria を使ってみました。UIの処理を阻害しないよう、APIとの通信はバックエンドで行なっています。
ソースコードは以下で公開しています。Pull Requestをお待ちしています。
（おまけ）カスタムビルドについて
この機能拡張は組織内の多くの人に使ってもらうことで効果を発揮します。しかし組織の人数が多いと、全員にこの設定をしてもらうのは若干ハードルが高い可能性があります。
そこで、組織に合わせたカスタムビルドも作れるようにしてみました。
ソースコードをダウンロードし、リポジトリのルートに
nlb.config.js というファイルを置いてビルドすることで、APIトークンを機能拡張に埋め込んだカスタムビルドを作成できるようになっています。出力される機能拡張の manifest.json を書き換えることもできるので、ドメイン限定で Chrome ウェブストアに上げるときにも便利です。nlb.config.js
Plain Text
この状態で
yarn build を実行すると機能拡張がビルドされます。chrome://extensions にアクセスしてデベロッパーモードをオンにし、 「パッケージ化されていない機能拡張を読み込む」ボタンから dist ディレクトリを読み込ませるとインストールできます。ただし、機能拡張に埋め込まれたAPIトークンは、機能拡張のソースコードを解析すると分かってしまうので、一般向けに公開する機能拡張には向いていないのでご注意ください。