ChromeExtensionをSPAに対応したお話

昨日、gitpomoをリリースしました。

このgitpomo、単純にGithubのISSUEページでポモ記録がつけれるツールなんですが、GithubがSPAということで少々作成に苦労しました。

苦労した点

まず、普通にContent Scriptsで作成していたのですが、ISSUEの一覧ページからISSUEの詳細ページに遷移した際にJSが動かないという。

おやおや？と思ったのですが、SPAなのでそりゃそうかと納得。

んじゃどうしたらええんや！と悩んだのですが、普段使いしてるOctoTreeは普通に動いていたのでコードを見たら一発解決しました。

解決策

解決策は簡単で、backgroundを上手に使いましょうという話でした。

OctoTreeでやっていたことは、backgroundで chrome.tabs.onUpdated.addListener を使いタブが更新されたタイミングをhookさせ、 executeScripts でJSを注入するというものでした。

その辺りのTipsは検索すればサクサクっと情報が出るので実装はそこまで困らないはず。

自分が困ったのは executeScripts 対象のJSが複数あった場合の処理。

普通にやろうとするとこんな風にネストが大変なことに。

chrome.tabs.executeScript(null,
    {file: "hoge.js"}, function(){
        chrome.tabs.executeScript(null,
            {file: "fuga.js"}, function(){
                console.log('Script injected.');
        });
});

さすがにこれは現実的じゃないだろ〜、と思ったので何か良い解決方法がないか探していたらStackOverFlowに良い解決方法が書いてありました。

stackoverflow.com

function executeScripts(tabId, injectDetailsArray)
{
    function createCallback(tabId, injectDetails, innerCallback) {
        return function () {
            chrome.tabs.executeScript(tabId, injectDetails, innerCallback);
        };
    }

    var callback = null;

    for (var i = injectDetailsArray.length - 1; i >= 0; --i)
        callback = createCallback(tabId, injectDetailsArray[i], callback);

    if (callback !== null)
        callback();   // execute outermost function
}

というメソッドを用意しておいて、

chrome.browserAction.onClicked.addListener(function (tab) {
    executeScripts(null, [ 
        { file: "jquery.js" }, 
        { file: "master.js" },
        { file: "helper.js" },
        { code: "transformPage();" }
    ])
});

こんな風に配列で食わせればいいだけ！なるほど！

という感じで、無事SPAに対応できましたというお話でした。