Uncaught TypeError: Cannot read property 'onCommand' of undefined【Chrome Extensions】

はじめに

Chrome の拡張機能を作っているときに

Uncaught TypeError: Cannot read property 【any function】 of undefined

でエラーをたくさん出したので原因と自分の解決法を書いておく。

エラー内容

Uncaught TypeError: Cannot read property 'onCommand' of undefined

以上のエラーコードは、表示されている関数内で取得できていない(undefined)ものがありました的なエラーだと思います。
以下発生したソースコード

$("#menu-container").before('<div><button id="stamp-button">TEST BUTTON</button></div>');

chrome.commands.onCommand.addListener(function(command) {
    if (command === "Ctrl+Q") { 
        document.getElementById("stamp-button").click();
    }
});

このコードでは、『TEST BUTTON』を作成する。その後に、「manifest.json」で設定したショートカットが入力されると3行目の関数が実行されるというコードです。

原因

『chrome.commands.onCommand.addListener』を実行しているURLが『TEST BUTTON』を作成してURLと異なることが原因でした。

$("#menu-container").before('<div><button id="stamp-button">TEST BUTTON</button></div>');
 var url = location.href ;
alert("I watch this url :\n"+url);

chrome.commands.onCommand.addListener(function(command) {
    if (command === "Ctrl+Q") { 
         var url = location.href ;
        alert("addListener execute this url :\n"+url);
    }
});

以上のコードに変更して、実行してみると

Output : 出力
I watch this url :
http:www.website~/~

addListener execute this url :
chrome-extension://hkedmcfecnafcmlhhokljjlmjbfnebjd/_generated_background_page.html

以上から実行しているURLがことなるため、エラーが発生していた。

自分なりの解決策

私が作ろうとしている拡張機能は、『特定のwebページ上でショートカットを入力すると決まった処理を行う』というものでした。そのため、以下のurl の answer を改変して使用した。 stackoverflow.com

//17 == control, 81 == q
var map = {17: false, 81: false};
$(document).keydown(function(e) {
    if (e.keyCode in map) {
        map[e.keyCode] = true;
        if (map[17] && map[81]) {
            alert("shurtcut sucsess");

            //any process here(ここになんか書く)

            map[17] = false;
            map[81] = false;
        }
    }
}).keyup(function(e) {
    map[17] = false;
    map[81] = false;
});

また、「manifest.json」のcommands は削除しました。

さいごに

拡張機能完成できるといいな....

naya_hira’s diary

三日坊主の備忘録