概要

NotionのChrome拡張機能を作成する時のメモ．

https://github.com/eetann/notion-tweaks

💡アイデア集

実装するとは言ってない．

• Vivaldiのウェブパネルに表示するぐらいの幅のときは，左右の余白を小さくする
• キーバインド
  • デイリーノートへ
  • 新しいノートの生成
  • 時間をすぐに入力
  • タイトルをコピー
    • @を使ったページリンクのために実装しようと思ったけど，@を使わなくても普通にNotionのページのURLを貼り付けたらMention Pageボタンから変換できることがわかったので実装しない
    • 出てきたスラッシュコマンドのメニューを閉じる
• 検索結果を横に表示
• リスト表示の階層を見やすく
  • 参考: CloudHill's Bulleted List Mod
• コードブロック
  • 余白を狭くする
• 言語を常に表示
• ※の後の背景色や文字色を変更
• Titleやaliasプロパティがあればリンク化するボタン
  • 論文名をいちいちフルで書きたくない
  • 表記ブレ気にせず使える
• スラッシュコマンドのポップアップ
  • もう必要ないなら閉じる
  • emojiで no resultなら非表示
    • 厳密に取得するのが面倒なので一旦保留
• `を入力するときに前後に半角スペース無しでもインラインコードになってほしい
• 現在ブラウザで開いているタブの中からNotionだけを抜き出してfzf的に移動
• Notion内の検索の結果からタイトルをコピー
• 特定のページにすぐノートを作れるようにしたい
  • Obsidianの選択中のテキストを差し込むやつも真似できたら嬉しい

Zennって- [ ]とか- [x]でチェックリスト表示できるのか．

VivaldiのChrome拡張機能を開発するときにservice worker周りのエラーが出る

問題点

自作拡張機能を自動リロードさせようとservice workerを使おうとしたら， An unknown error occurred when fetching the script. や Service worker registration failed といったエラーがVivaldiで出る．

調査

Chromeでは出ない．
Can't get started with developing an extension in Vivaldi | Vivaldi Forum
どうやら，Vivaldiではダメそう．

解決

拡張機能の開発はChromeで行う．開発中のものをVivaldiで使いたい場合は，ビルドしたもの(=service workerを使わないもの)を読み込む

ページ幅が狭いときは左右の余白を小さくする

単純にウィンドウサイズが小さいときだけではなく，Vivaldiのウェブパネルやタイリングのためでもある．
↓通常の例(ウェブパネルで表示)

↓CSSを挿入してページを狭くした例(ウェブパネルで表示)

左側はドラッグはできるくらいの幅にした．「+」の位置までカーソルを持ってくるとサイドバーが表示されるけど，とりあえず無くても今の所良さそう．
改善するとしたら，サイドバーの表示をいじる．

NotionのAPIで連携したいデータベースは，画面右上からintegrationを許可する必要がある．

Manifest v3 では，V2でpermissionsに書いていた一部はhost_permissionsへ移行する必要がある．
Migrating to Manifest V3 - Chrome Developers

Chrome拡張機能にキーボードショートカットを追加

"global": trueはChromeにフォーカスが無い時でも有効にしたい場合のみ加える．

{
  "name": "extension name",
  ...
  "commands": {
    "feature_name": {
      "suggested_key": {
        "default": "Ctrl+Shift+1"
      },
      "description": "hgoehgoe",
      "global": true
    }
  },
  ...
}

chrome.commands.onCommand.addListener(function(command) {
  if (command == "feature_name") {
    console.log("Hoge!");
  }
});

• 公式ドキュメント: chrome.commands - Chrome Developers
• commands - Mozilla | MDN

Chrome ExtensionとGoogle Apps Script(GAS)を連携する

拡張機能のコードやstorageにAPIキーを保存したくないため，GASと連携させる．

GASで最初にやってもらうこと

1. コードの貼り付け
2. スクリプトプロパティにAPIキーを保存する関数のみ実行
3. ↑の関数のみ削除

実際の流れは

1. 拡張機能からGASを呼び出す
2. GASでAPIを叩く
3. GASから拡張機能へ結果を返す

GASのURLは「デプロイをテスト」でできた．
GASのURLがリダイレクトされるため，manifest.jsonのパーミッションは2つ書く．

{
  "manifest_version": 3,
  ...
  "host_permissions": [
    "https://script.google.com/",
    "https://script.googleusercontent.com/"
  ],
  ...
}

Update databaseはデータベースそのもののタイトルやプロパティのUpdate．
Create a pageでデータベースにアイテムを追加できる．
ドキュメントにも，

Creates a new page in the specified database or as a child of an existing page.

と書いてある．

すごい勘違いしてた．

進捗報告2021-10-03

今日のページを開く

拡張機能のstorageに今日のページがあるか確認し，
あればそのページを開く．なければ，↓

GAS経由で今日のページが作成されたか確認し，
作成済みであれば

1. そのページを拡張機能のstorageに保存
2. そのページを開く

作成していなければ

1. GAS経由でページを作成
2. そのページを拡張機能のstorageに保存
3. そのページを開く

今日のページの作成

• タイトルは今日の日付でフォーマットは YYYY-MM-DD
• Dateプロパティに今日の日付を指定
• 本文として heading_1を2つ挿入

進捗報告2021-10-09

options_pageの作成

デザインてきなものは後で直す．

初めてちゃんとReactとTypeScriptを使ってみた．
FormにはReact Hook Form と MUIを使っている．

• UI ライブラリを使用する
• Text Field React component - MUI

chrome.storage.localのラッパー

chrome.storage.local系のものを，JSONに直したりパースするのを忘れがちだったり，awaitとかを使いたいので書いた．

export const getStorage = (key: string) => new Promise(resolve => {
  chrome.storage.local.get(key, (data: any) => {
    if (typeof data[key] === "undefined") {
      resolve(null);
      return;
    }
    resolve(JSON.parse(data[key]));
    return;
  });
});


interface storageType {
  [key: string]: any;
}

export const setStorage = (key: string, value: any) => new Promise(resolve => {
  const setObj: storageType = {[key]: JSON.stringify(value)}
  chrome.storage.local.set(setObj, () => {
    resolve(true);
  });
});

export const clearStorage = () => new Promise(resolve => {
  chrome.storage.local.clear(() => resolve(true));
});

まだTypeScript使い始めたばかりなので，書き直すかも．

非同期処理 — 仕事ですぐに使えるTypeScript ドキュメント

進捗報告2021-10-10

ページ幅が狭いときのタイトルの右の余白を小さくする

続き．
タイトルの右側の余白を小さくした．
左側の「+」の位置までカーソルを持ってくるとサイドバーが表示されてしまう問題を無視していたけど，その余白も残しておくことにした

↓前回までの改善(ウェブパネルで表示)

↓今回までの改善(ウェブパネルで表示)

もう少し微調整したいけど，CSSと格闘するのは飽きたので今はやらない．

進捗報告 2021-10-14

タイムスタンプ

フォーマットHH:mmでタイムスタンプをショートカットキーからすぐに挿入できるようにした．これで，どのOSからでもIMEとか他のツールの設定無しにすぐタイムスタンプを挿入できる！
タイムスタンプはNotionのデイリーログページに使っている．

あとでフォーマットを変えたくなるかもしれない&&自分でフォーマットを変換するのは面倒なので，Day.jsでフォーマット変換を行っている．

webpackの設定とmanifest.json

webpackの設定で，

module.exports = {
 ...
  optimization: {
    splitChunks: {
      name: 'chunk',
      chunks(chunk) {
        return chunk.name !== 'background';
      },
    }
  },
  ...
}

のようにchunk.jsでバンドルしているため，以下のように2つのファイルを指定することを忘れないこと(ここでめっちゃ詰まった)．

  ...
  "content_scripts": [
    {
      "matches": ["https://www.notion.so/*"],
      "css": ["content.css"],
      "js": ["content.js", "chunk.js"]
    }
  ],
  ...

ショートカットキーにprefixを実装

ショートカットキーをこの拡張機能でたくさん設定するわけにはいかないので，ctrl + qをprefixとした．
たとえば，ctrl + qを押したあとにaを押せば機能A，ctrl + qを押したあとにbを押せば機能Bという感じで呼び出せる！
参考: キーボード: keydown と keyup

進捗報告2021-10-15

コードブロックの調整

• 言語を常時表示化
• 「1行空行がある？」「エンター押しすぎた？」って自分はよく勘違いするので，下のパディングを狭くした

メニューを閉じる

スラッシュコマンドと絵文字の入力中に表示されるメニューを，ショートカットキーで閉じることができるようにした．
本当はemojiで no resultなら自動で非表示にしたかったけど，厳密に取得するのが面倒なので一旦保留．

進捗報告2021-10-24

オプション画面の変更

MUIとReact Hook Formをちゃんと使ってそれっぽい画面に変更した．

APIを直接叩く選択肢も用意した

GAS経由だとどうしても嫌な人いるかも知れないので，NotionのAPIキーを直接chrome.storageに保存する選択肢も用意した(良いことではない)．
NotionのAPIキーの使用注意はドキュメントに記載することにする．

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

特定のデータベースのidを設定しておけば，すぐにページが作成され，開いているページにリンクを差し込めるようにした．
もし文字列を選択していた場合は，その文字列がタイトルに置き換わる．
現時点では，ctrl + q + zに割り当てている．

その他メモ

自分の普段使いにはほどんど困らないようになった！
とりあえずこの時点でのデモ付きのドキュメントをさっさと作ることにする．
ドキュメント(というかREADME)の変更はすぐに適用したいので，GitHubのREADME.mdに書いておき，Chrome Extension内にはそのリンクのみ貼ることにする．

進捗報告

設定画面で機能のオンオフの切り替えをできるようにした．

公開！

https://zenn.dev/eetann/articles/2021-11-08-notion-tweaks-intro
https://chrome.google.com/webstore/detail/notion-tweaks/fodemmhibeapiocbkojhfpbbiipojcof

技術的なメモの方も公開した．
https://zenn.dev/eetann/articles/2021-11-10-notion-tweaks-tech