chrome拡張機能で検索エンジンを変える機能を作った話

今回は…

chromeのgoogleを開いたときに、検索エンジンを自由に変えれるような機能(chrome拡張)を作りました。

作った経緯

単に、便利かなーと思ったから
あと、検索するたびにそのサイト開くのめんどくさいし、
いちいち設定変えるのもめんどくさいと思ったからです。

ソースコード

chrome拡張のマニフェスト

manifest.json

{
    "name": "I like search",
    "version": "1.2.0",
    "manifest_version": 3,
    "description": "Let's internet search!!",
    "content_scripts": [{
      "matches": ["https://google.com/*",
                  "https://google.co.jp/*",
                  "http://google.com/*",
                  "http://google.co.jp/*",
                  "https://www.google.com/*",
                  "https://www.google.co.jp/*",
                  "http://www.google.com/*",
                  "http://www.google.co.jp/*"],
      "js": [
        "content.js"
      ]
    }]
  }

本コード(manifestで言うcontent.js)

content.json

const select = "<select id='select_search'>\
<option value='https://google.com/q'>Google検索</option>\
<option value='https://www.youtube.com/results'>Youtube検索</option>\
<option value='https://www.amazon.co.jp/s'>Amazon検索</option>\
<option value='https://search.yahoo.co.jp/search'>Yahoo!検索</option>\
<option value='https://www.bing.com/search'>BING検索</option>\
</select>";
//↑htmlコードの変数の定義

if (! location.href.match("search")){ //urlがsearch.googleではない時
    let box_position = document.querySelector("body > div.L3eUgb > div.o3j99.ikrT4e.om7nvf > form > div:nth-child(1) > div.A8SBwf > div.FPdoLc.lJ9FBc > center"); //この場所にセレクトメニューを配置する
    box_position.innerHTML += select;
}else{ //urlがsearch.googleの時(実際は、それ以外も拾ってしまう)
    let box_position = document.querySelector("#searchform > div.sfbg"); //この場所にセレクトメニューを配置する
    box_position.innerHTML += select;
}

document.getElementById("select_search").onchange = function() { //select_searchの値が変えられた時
    if (! location.href.match("search")){ //urlがsearch.googleではない時
        let target = document.querySelector("body > div.L3eUgb > div.o3j99.ikrT4e.om7nvf > form > div:nth-child(1) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input"); //targetを検索boxにする

        if (document.getElementById("select_search").value.match("yahoo")){
            target.name = "p";
        }

        if (document.getElementById("select_search").value.match("amazon")){
            target.name = "k";
        }

        if (document.getElementById("select_search").value.match("google")){
            target.name = "q";
        }

        if (document.getElementById("select_search").value.match("youtube")){
            target.name = "search_query";
        }

        if (document.getElementById("select_search").value.match("bing")){
            target.name = "q";
        }

        document.querySelector("body > div.L3eUgb > div.o3j99.ikrT4e.om7nvf > form").action = document.getElementById("select_search").value; //検索formのactionを変える
    }else{ //urlがsearch.googleの時(実際は、それ以外も拾ってしまう)
        let target = document.querySelector("#tsf > div:nth-child(1) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input"); //targetを検索boxにする

        if (document.getElementById("select_search").value.match("yahoo")){ //yahooの場合
            target.name = "p";
        }

        if (document.getElementById("select_search").value.match("amazon")){ //amazonの場合
            target.name = "k";
        }

        if (document.getElementById("select_search").value.match("google")){ //googleの場合
            target.name = "q";
        }

        if (document.getElementById("select_search").value.match("youtube")){ //youtubeの場合
            target.name = "search_query";
        }

        if (document.getElementById("select_search").value.match("bing")){ //bingの場合
            target.name = "q";
        }

        document.querySelector("#tsf").action = document.getElementById("select_search").value; //検索formのactionを変える
    }
}

こんな感じです。

今対応しているのが
・google
・amazon
・youtube
・yahoo!
・bing
です。
duckduckgoにも対応しようかと思いましたが、自分はあまりつかってないし
世の中にも使ってる人がいないので、ここには書いてありません。
もし使う人がいれば、本コード(content.js)の

6-7行目にスペースを開けて、

<option value='https://duckduckgo.com/'>duckduckgo検索</option>\

37行目に

if (document.getElementById("select_search").value.match("duckduckgo")){
    target.name = "q";
}

65行目に

if (document.getElementById("select_search").value.match("duckduckgo")){
    target.name = "q";
}

を挟めば、不具合なく使用できると思います。

使っている感じは、こんな感じです

便利に使えると思います

まとめ

google拡張も時々作っているので、よろしくおねがいします！

ご視聴ありがとうございました！