質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%

Q&A

解決済

1回答

4617閲覧

chrome拡張で Ctrl+Enterが押されたときalertを表示したい

mknji

総合スコア19

Chrome extension

Chrome拡張機能

0グッド

0クリップ

投稿2017/12/15 15:40

やりたいこと

・Chrome extensionを使って、ブラウザ上でCtrl+Enterが押されたときにalert()を表示したい
ぶち当たってる問題

・Ctrl+Enterが押されたときにalert()を表示できない
やったこと

・方法①manifest.jsonのbackgroundで常時スクリプトを呼び出して、JavaScript側でキー判定させる
manifest.json側:

json

1"background": { 2 "scripts": ["background.js"] 3}

background.js:

JavaScript

1window.onkeydown = function (e){ 2 //Ctrl+Entrが押されたとき、alert(); 3 if(e.ctrlKey == true && e.keyCode == 13 ) 4 { 5 alert(); 6 } 7};

なぜだめなんでしょうか


・②manifest.jsonでCtrl+Enterを受け付けて拡張機能を起動させJavascriptでalert()
manifest.json:

json

1"commands": { 2 "Ctrl-Enter": { 3 "suggested_key": { 4 "default": "Ctrl+Enter" 5 }, 6 "description": "ctrl_enter" 7 } 8}

background.js:

JavaScript

1window.onkeydown = function (e){ 2 //Ctrl+Entrが押されたとき、alert(); 3 if(e.ctrlKey == true && e.keyCode == 13 ) 4 { 5 alert(); 6 } 7};

この場合、Ctrl+Enterでは通らず、Ctrl+Shift+Enterになってしまう。
疑問

manifest.jsonのbackgroundではどうして動かないのか。
どちらかまたは新しい方法でもいいので、Ctrl+Enterが押されたときalertを表示する仕方をご教授願いたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

すみません嘘書きました。

方法①についてこうすれば出来ます。
manifest.json:

JSON

1 "content_scripts": [ 2 { 3 "matches": ["<all_urls>"], 4 "js": ["script.js"] 5 } 6 ]

script.js:

JavaScript

1window.addEventListener("keydown", function(e){ 2 //Ctrl+Entrが押されたとき、alert(); 3 if(e.ctrlKey && e.keyCode === 13){ 4 alert(); 5 } 6});

そもそもbackground.jsはウィンドウと隔離した状態で実行されているため、
~~alert()しても表示されることはありません。~~キーボードイベントはキャッチ出来ません。
逆に上記のスクリプトはコンテンツの上で実行されるため、予期せぬ動作を生む可能性があります。

方法①の改良としては、content scriptとbackground.jsの通信を利用することになります。
manifest.json:

JSON

1"background": { 2"scripts": ["background.js"], 3"persistent": false 4}, 5"content_scripts": [ 6 { 7 "matches": ["<all_urls>"], 8 "js": ["keydown_send.js"] 9 } 10]

keydown_send.js:

JavaScript

1window.addEventListener("keydown", function(e){ 2 //Ctrl+Entrが押されたとき、backgroundページにメッセージを送る 3 if(e.ctrlKey && e.keyCode === 13){ 4 chrome.runtime.sendMessage({command: "Ctrl+Enter"}); 5 } 6});

background.js:

JavaScript

1chrome.runtime.onMessage.addListener(function(message){ 2 if(message.command === "Ctrl+Enter"){ 3 alert(); 4 } 5});

方法②ではEnterの使用が許可されていないため難しいと思います。

投稿2017/12/16 07:10

編集2017/12/17 03:24
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

mknji

2018/01/09 14:44

ありがとうございます!一応解決いたしました!! コメントが非常に遅れてしまい、申し訳ありませんでした....。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問