NotionのデスクトップアプリをオリジナルのJavaScriptで改造する (2021年4月版)

２年ぶりくらいにやってみたら少しだけやりかたが変わっていた(簡単になっていた)のでまとめ直し。

MacOS向けですが、Windowsとかでもたぶん同じです。

①Notionアプリの内容を開く

ApplicationフォルダにあるNotionアプリの内容を開きます。

ここからAppの中身を開く

②preload.jsを開く

場所は以下のスクショのとおり。

ここにあるファイル

③inPageSearchのstopのところにからオリジナルスクリプトを呼べるようにする

以前(1~2年前)と変わらずここに仕込むとページ遷移ごとに呼ばれていい感じにユーザースクリプトを注入できます。

ここに仕込むといい感じ

④好きなところにオリジナルスクリプトを書く

例えばタイムラインのアイテムに"🔥"マークがあったら赤くする」としたらこんなコード。

これコードなぐり書きでめっちゃ汚いですけど、初心者のために貼ります。

上級者はもうここまでで十分だと思うのでコード読まないでください。

ていうか５分で書いたし自分用だしめっちゃ適当です。本気出したらもっとエレガントになります。

// =====================================================================================
//      ↓ MY NOTION HACK ↓
// =====================================================================================
var myNotionHack_onPageChange = function(){};

var TITLE_DIV_HACK_CLASS = "TITLE_DIV_TO_HACK";

var INJECTION_STYLE_TAG = (function() {/*
<style id="myHackStyle"> 
.TL_ITEM_LEVEL_FIRE {
    background: red!important;
}
</style>
*/}).toString().replace(/(\n)/g, '').split('*')[1];

// タイムラインのハック
function appendOriginalClassesToTimelineItems() {
    console.log("appendOriginalClassesToTimelineItems");

    var getTimelines = function () {
        return document.querySelectorAll(".notion-timeline-view");
    }

    var getRows = function () {
        return document.querySelectorAll(".notion-timeline-item-row");
    }

    var appendLevelClassToItem = function (rowDiv) {
        var itemDiv = rowDiv.querySelector(".notion-timeline-item");
        var propDivs = rowDiv.querySelectorAll(".notion-timeline-item-properties > div > div");
        isAppendded = false;
        propDivs.forEach(function(propDiv) {
            if (propDiv.innerText.indexOf("🔥") >= 0) {
                if(!itemDiv.className || itemDiv.className.indexOf("TL_ITEM_LEVEL_FIRE") == -1) {
                    itemDiv.classList.add("TL_ITEM_LEVEL_FIRE");
                    isAppendded = true;
                }
            }
        });
        return isAppendded;
    }

    // MAIN
    var timelines = getTimelines();
    if (timelines.length == 0) {
        console.log("timeline is not found")
        return false;
    }

    var isAppendded = false;
    var rows = getRows();
    rows.forEach(function(row) {
        if (appendLevelClassToItem(row)) {
            isAppendded = true;
        }
    }); 
    return isAppendded;
}

(function MY_NOTION_HACK_SCRIPT() {
    function us_injectStyleTag() {
        if (document.querySelector("#myHackStyle") == null) {
            document.body.insertAdjacentHTML('afterbegin', INJECTION_STYLE_TAG);
            return true;
        }
        return false;
    }
    
    function polling(times, action) {
        for (var i=0; i<times.length; i++) {
            setTimeout(action, times[i]);
        }
    }

    myNotionHack_onPageChange = function() {
        var isCompleteStyle = false;
        var isCompleteTimelineHack = false;
        polling([100, 200, 300, 350, 500, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000, 150000], function() {
            if (!isCompleteStyle) { isCompleteStyle = us_injectStyleTag(); }
            if (!isCompleteTimelineHack) { isCompleteTimelineHack = appendOriginalClassesToTimelineItems(); }
        });
    }
})();
// =====================================================================================
//      ↑ MY NOTION HACK ↑
// =====================================================================================

④結果

例えば結果はこんな感じ。 デバッグツールはChromeとかと同様にアプリ内で cmd + opt + i とかで開けます。