おぼえがき

アウトプットで知識を体系化していきます

NotionのDesktopアプリのUIをカスタマイズするハック

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

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

f:id:taku_oka:20190128223223j:plain
UIの文字がでかいのでハズい

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

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

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

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

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

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

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

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

f:id:taku_oka:20190119235334j:plain
electronのwebview

僕の場合は

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

3. preload.jsにユーザースクリプトを追記する

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

Notionのページ遷移イベントのハック

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

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

4. preload.jsを圧縮し、置き換える

asar pack myApp app.asar

5. アプリにリロードをかけて確認

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

※ WebviewのDevToolを開く方法

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

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

ハック後のUI

f:id:taku_oka:20190128223305p:plain
変更前
f:id:taku_oka:20190128223321p:plain
ハック後のUI