Zenn
💪

Notionをさらに便利にするChrome拡張機能 Notion Tweaks を作った

2021/11/09に公開
Chrome拡張
Notion
Google Apps Script
idea

概要

Notionをより便利にするChrome拡張機能「Notion Tweaks」を作りました．この記事はその紹介編です．

↓公開先
https://chrome.google.com/webstore/detail/notion-tweaks/fodemmhibeapiocbkojhfpbbiipojcof

↓技術編
https://zenn.dev/eetann/articles/2021-11-10-notion-tweaks-tech

機能

ページ幅が狭いときに余白を狭くする

ウィンドウを横に並べたりVivaldiのウェブパネルで表示する時に見やすくなります．
narrow-page-margin-page
左がこの機能をオン，右がオフにした状態です．

プレビューモードで開いているときは以下のようになります．
narrow-page-margin-preview

コードブロックの下の余白を狭くする

「1行空行があるの？」「エンター押しすぎた？」と自分はよく勘違いしてしまうため，実装しました．
narrow-code-block-bottom

コードブロックの言語を常に表示する

Notionのコードブロック左上に表示される言語欄は，近くにカーソルが無いと表示されません．これを，カーソルを近くに移動しなくても見えるようにしました．

↓のGIFはループしているので分かりづらいかもしれません笑
ShowCodeBlockLanguage

タイムスタンプを挿入する

Notionのページ上でCtrl + q + tと入力すると，タイムスタンプが挿入されます．フォーマットはHH:mmです．
Notionの @now の下位互換的な存在です．
タイムスタンプ自体はIMEを始めとした他のツールを使えば挿入できるのですが，「拡張機能を入れたらすぐ使える状態」にしたかったため，実装しました．
onTimeStamp

特定のデータベースにページを作成する

Notionのページ上でCtrl + q + zと入力すると，タイトル未定のページが作成されてそのURLがページに挿入されます．
文字列を選択していた場合はその文字列がページタイトルとなります．
この機能は，Zettelkastenの考え方をNotionで実践している人に便利かなと思います．

onCreateZ10n

あくまでもURLを挿入するところまでの機能で，メンション形式にしたり新しいタブで開くかどうかはユーザーに任せます．
Zettelkastenの綴と読み方を忘れるので，拡張機能内やGitHubのREADME内ではz10nと表記しています．

今日のページ

Ctrl(cmd) + shift + yと入力すると，登録したデータベースの今日の日付のページが1つある場合はそのページを新しいタブで開きます．
存在しなかった場合はタイトルがYYYY-MM-DD，プロパティDateは今日の日付，ページ本文は空の状態で作成されます．
あるデータベースに毎日1つページを作っている場合に便利です．
うまく動かない場合があるので調査中です．

onTodayPage

ページを作り直した場合は拡張機能のオプションページから今日のページのURLを編集できます．

スラッシュコマンドや絵文字メニューを閉じる

Ctrl + q + cと入力すれば，スラッシュコマンドや絵文字メニューを閉じることができます．この機能を使わなくてもエスケープキーでも同様のことができます．そのことを忘れて実装しました．必要ない機能です．

onCloseMenu

注意事項

機能のオンオフ

すべての機能は，拡張機能のオプションページからオンにする必要があります．オンオフを切り替えた際にはNotionのページをリロードしてください．

APIについて

「特定のデータベースにページを作成する」と「今日のページ」で紹介した機能は Notion API を扱うため，自己責任で使用してください．
この拡張機能で Notion API を叩くには2つの方法があります．

Notion API を直接使う方法

拡張機能のオプションページのSelect APIでNotion API Directを選択することで，Notion API のAPIキーを直接 chrome.storage.localに保存します．

Google Apps Script 経由で使う方法

拡張機能のオプションページのSelect APIでGAS URLを選択することで，Notion API のAPIキーを Google Apps Script(GAS) のスクリプトプロパティに保存してAPIを叩きます．スクリプトを作成したGoogleアカウントでログインしないと実行できないように設定できます．

手順
  1. Google Apps Scriptを作成する(参考: Standalone Scripts  |  Apps Script  |  Google Developers)
  2. このコードをコピペする
  3. コード内のscriptProperties.setProperties({ "NOTION_API_KEY": "YOUR_API_KEY", });のYOUR_API_KEYを自分のAPIキーに書き換える
  4. 関数initを実行
  5. 関数initまたは書き換えたAPIキーの記述をコードから削除
  6. デプロイし，ULRをコピー
    • 「デプロイをテスト(https://script.google.com/macros/s/hoge/dev のように末尾がdevのもの)」でも実行可
    • 種類: ウェブアプリ
    • アクセスできるユーザー: 自分のみ
  7. 拡張機能のオプションページにて，Select APIをGAS URLに選択，URLを貼り付けてUpdateボタンをクリック

最後に

自分用の拡張機能ですが，誰かの役に立てれば嬉しいです．
↓リンクまとめです．

Discussion