「Chromeで単語を選択 → そのままマウスジェスチャで任意のサイトにて単語検索」をしてブラウジングを快適にする方法

できるようになること

Webページを見てる時、調べたいフレーズが登場することはよくよくあることです。
未知の単語、出てきますよね。
そのときどのような手順でそのフレーズを検索しているでしょうか。
簡単にできればできるほど、きっと素敵です。

ここでは、以下の流れでできるようにします。

気になるワードが目に飛び込んでくる。
そのフレーズを選択。
マウスジェスチャ実行。
任意のサイトでそのフレーズが検索され、新規背面タブで表示される。

Google検索、Amazon検索、Weblio検索、Yahooリアルタイム検索、YouTube検索など、様々なサイトですぐに検索できるようになります。

方法

マウスジェスチャは任意のプラグインを利用してください。
ただし自分で記述したJavaScriptを実行可能な拡張であることが必要です。

Googleで検索する場合は、マウスジェスチャを実行した際に以下のJavaScriptが実行されるようにします。

var url = "https://www.google.co.jp/search?&q=%s";
searchChoosedText(url);

function searchChoosedText(targetUrl) {
    var selectedText = window.getSelection().toString();
    targetUrl = targetUrl.replace("%s", encodeURIComponent(selectedText));
    openNewBackgroundTab(targetUrl);
}

function openNewBackgroundTab(url) {
    var a = document.createElement("a");
    a.href = url;
    var evt = document.createEvent("MouseEvents");    
    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
    a.dispatchEvent(evt);
}

私の好みにより、新規背面タブで結果ページを表示するようにしています。

コードの一行目を任意のページに変えることで、好きなサイトですぐに検索できるようになりますね。
マウスジェスチャ実行時に選択されているテキストは、 %s に入ります。
そのコードをそれぞれのジェスチャに関連付ければ、その場で任意のサイトで検索できるでしょう。

例えば以下の様なサイトで使えますね。

// Weblio
var url = "http://www.weblio.jp/content/%s";

// YouTube
var url = "http://www.youtube.com/results?search_query=%s";

// Amazon
var url = "http://www.amazon.co.jp/s/?field-keywords=%s";

// Yahooリアルタイム検索
var url = "http://realtime.search.yahoo.co.jp/search?p=%s";

仕組みとしては、aタグを生成し、そのaタグにマウスクリックイベントを実行することで新規背面タブで開いています。

調べ物をしていると未知のワードに遭遇することはよくあることです。
そのような頻繁に行う流れを簡単にしてくれるため、ブラウジングがより快適になります。

atson