Google Chrome ブラウザーでは拡張機能にはキーボードのイベントを使って操作をショートカットすること可能です。その際のページで選択されている文字列を引数として利用する方法を備忘録的に投稿しておきます。
キーボードショートカットでChromeを操作
先回、選択した文字列で右クリックしたコンテキストメニューでChromeを操作する拡張機能を作成しました。
今回は、ポップアップ（コンテキスト）メニューではなく、文字列を選択して特定のキーでChromeを操作するキーボードショートカットを実装してみます。
例えば、下の画像のようにChromeで文字列を選択中にキーボードの［Ctrl+Shift+Y］を押すと、Yahoo! JAPANで文字列の検索結果を表示する操作ができる拡張機能を製作してみます。
今回は、作業フォルダー内に３つのファイルを作成します。
[SearchYahooJ-SC]
|-- [manifest.json]
|-- [background.js]
|-- [content.js]［manifest.json］を編集して次のJSONコードを追加します。
{
"manifest_version": 3,
"name": "Yahoo! JAPANで検索ショートカット",
"version": "1.0",
"background": {
"service_worker": "background.js",
"presistent": false
},
"content_scripts": [{
"matches": ["http://*/*","https://*/*"],
"js": ["content.js"]
}],
"permissions": [
"activeTab",
"tabs"
],
"commands": {
"sc_search_yahoo": {
"suggested_key": "Ctrl+Shift+Y",
"description": "Searching Yahoo! JAPAN."
}
}
}製作する拡張機能の仕組みとしては、ページ内の文字が選択される度に［content.js］が動作して選択中の文字列の内容を変数に保存しておき、本体の［background.js］が実行される際に変数を利用します。
文字列を変数に保存するために［content.js］を編集して次のコードを追加します。
document.addEventListener('selectionchange', function (event) {
let selectionText = window.getSelection().toString();
chrome.runtime.sendMessage({
message: selectionText
}, function(response) {
console.log(response);
});
})
コードとしては文字列の選択が変更されたイベントを取得して、Chromeのメッセージシステムに処理を投げます。
最後に［background.js］を編集して次のコードを追加します。
let selectionText
chrome.runtime.onMessage.addListener(
function(request) {
selectionText = request.message;
return true;
}
);
chrome.commands.onCommand.addListener((command) => {
switch (command) {
case "sc_search_yahoo":
chrome.tabs.create({url: "https://search.yahoo.co.jp/search?p=" + selectionText});
break;
}
});動作させると、［content.js］内の “chrome.runtime.sendMessage” で投げられたメッセージが “chrome.runtime.onMessage.addListener” で処理されます。
引数で送られてきたページ内の文字列が、［background.js］内の変数［selectionText］に代入されます。
キーボードの［Ctrl+Shift+Y］が押された際に、［background.js］内の “chrome.commands.onCommand.addListener” イベントが発火して、変数を利用してYahoo! JAPANのページを別タブで表示します。
コンテキストメニューを使った場合はを選択中の文字列を簡単に取得できましたが、ショートカットの場合は［background.js］から直接取得できないため、少し工夫が必要です。
後は、ローカルに保存したファイルを含むフォルダーを［拡張機能］ページでインストールして検証します。
まとめ
今回は、Google Chromeブラウザーでページ内の文字を選択中に、特定のキーボードを押した場合に拡張機能で操作する方法について書きました。
以前に製作したコンテキストメニューの場合と違い、選択した文字列の内容を変数に保存しておく動作を追加する必要があります。
キーボードのショートカットを利用する場合には、”chrome.runtime.sendMessage” を利用してページ内で選択中の文字列の内容を変数として保存することで対処ができました。
Chrome拡張機能でキーボードショートカットで操作する際にページ内で選択中の文字列を利用したい人の参考になれば幸いです。
スポンサーリンク
最後までご覧いただきありがとうございます。
