最近Notionというツールを[ノートアプリ + タスク管理アプリ]として乗り換えてみたところ、めちゃくちゃ便利で毎日使い倒しています。

ただNotionってタイトルと絵文字がめっちゃでかく表示されておしゃれなのですが、職場だとそれがなんだか恥ずかしかったので小さくしたくなりましたw

そこで、Notionのデスクトップ版にカスタムのJavaScriptを当てる方法を模索してみました。

Electronを触るのは初めてでしたが、結果的にはユーザースクリプトを流し込み、常に自分好みのUIに調節することに成功しました!

※Macでのやり方を説明します。

1. NotionアプリからDevToolを開き、preload.jsの場所を確認する

Electronが提供しているwebviewタグというものがあり、

その中にWeb版のNotionを表示しているようです。

属性要素をよく見ると、preload.jsというものが読み込まれています。

(おそらくこれもElectronではデフォルトの方法でしょうか)

僕の場合は

file:///Applications/Notion.app/Contents/Resources/app.asar/renderer/preload.js

でした。

2. preload.jsを編集するため、app.asarファイルを解凍する

app.asarファイルを解凍するためには、はasarというコマンドラインツールのインストールをしておきます。

npm install -g asar

以下のように解凍できます。

asar e app.asar myApp

そこにJavaScriptを書けばDOMにアクセス可能なので、UIの変更など基本的になんでもできます。

Notionの場合はページ遷移時のイベントがわからなかったので、以下のようなスクリプトでElectronのipcメッセージを確認したところ、それに近いイベントが見つかったので、それを利用することにしました。

webview.addEventListener('ipc-message', function(event) {
    console.log(event);
});

asar pack myApp app.asar

アプリを⌘Rなどで更新すれば変更が反映されているはずです。

以下のようなコードをNotionデスクトップアプリのDevToolで実行することでWebviewのDevToolを開くことができます。

document.querySelector('webview').openDevTools()