はじめに
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 は削除しました。
さいごに
拡張機能完成できるといいな....
