❤️

Notionにいいねボタンを追加するChrome拡張を作った

2022/02/05に公開

Chrome拡張

Notion

idea

はじめに

組織で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 Field Name に Like と入力します。Notionで作成したデータベースで「Like」プロパティではなく別の名前にしている場合はその名前を入れてください。
この設定はインポート、エクスポートができるようになっています。組織内の他のメンバーにも設定を共有する時に便利です。
以上で設定は完了です。この状態で Integration が招待されたページを開き直すと、いいねボタンが表示されるようになっていると思います。

その他のTips:　データベースのプロパティにいいねされた数を表示する

Formula というタイプのプロパティを Like Count のような名前で追加します。
データベース内のページを何かひとつ開き Like Count の値をクリックし、以下のコードを入力します。（ Like プロパティ名は任意で変えてください）
```
if(not empty(prop("Like")), length(replaceAll(prop("Like"), "[^,]", "")) + 1, 0)
```

分かっている問題: いいねするたびにメンションがつく

いいねは API 経由で行っているので、「Bot ユーザーが自分をメンションした」という扱いになり、メンションがついてしまいます。回避策を探しています。

技術周りの話

Chrome機能拡張を作ったのはほぼ初めてだったのですが、ボイラープレートがいくつかあったので簡単に作り始めることができました。フロントエンドは React に加えて、CSS-in-JS ライブラリの Linaria を使ってみました。UIの処理を阻害しないよう、APIとの通信はバックエンドで行なっています。

ソースコードは以下で公開しています。Pull Requestをお待ちしています。

（おまけ）カスタムビルドについて

この機能拡張は組織内の多くの人に使ってもらうことで効果を発揮します。しかし組織の人数が多いと、全員にこの設定をしてもらうのは若干ハードルが高い可能性があります。

そこで、組織に合わせたカスタムビルドも作れるようにしてみました。
ソースコードをダウンロードし、リポジトリのルートに nlb.config.js というファイルを置いてビルドすることで、APIトークンを機能拡張に埋め込んだカスタムビルドを作成できるようになっています。出力される機能拡張の manifest.json　を書き換えることもできるので、ドメイン限定で Chrome ウェブストアに上げるときにも便利です。

nlb.config.js

module.exports = {
  manifest: {
    name: "Notion Like Button for Company",
    description: "Embed Like Button into Notion",
    version: process.env.npm_package_version,
  },
  apiToken: "secret_xxxxxxxxxxxxxxxxxxxxxxxx",
  likeProp: "Like",
};

この状態で yarn build を実行すると機能拡張がビルドされます。
chrome://extensions にアクセスしてデベロッパーモードをオンにし、「パッケージ化されていない機能拡張を読み込む」ボタンから dist ディレクトリを読み込ませるとインストールできます。

また、dist.zip も作成されているので、 Chrome Web Store デベロッパーダッシュボードからパッケージをアップロードして申請することもできます。（開発者登録に$5掛かります）

ただし、機能拡張に埋め込まれたAPIトークンは、機能拡張のソースコードを解析すると分かってしまうので、一般向けに公開する機能拡張には向いていないのでご注意ください。