学名・和名からどんな植物かを一発画像検索するアドオンの作成

実験関連

2016年01月27日2020年05月03日

注）本記事はあまりサボテン・多肉植物とは関係ありません。

—

サボテンは原種だけでもおおよそ2500種ぐらいあるそうです。

もちろん、そんな多い種類の外観など暗記できているわけもありません。

よく業者さんのリストとか、植物データベースなど、写真がなく学名だけしか載っていないこともしばしばあります。

そんなとき、この名前のサボテンってどんな見た目なんだろうって思いますね。

そんなときは・・・

１．WEBページから学名をコピー
↓
２．検索窓にペースト
↓
３．画像検索結果を確認
↓
「これはかっけえ！」
↓
４．元のWEBページに戻る
↓
１に戻る

こんなことをすると思います。

そう！この作業、実に面倒くさいのです！

特に海外の業者のSeed Listから種を選ぶときとか！

というわけで、そんな作業が少しでも楽になるように、Google Chrome用のExtension（いわゆるアドオンであり、いわゆる拡張機能）を作ってみました。以下はいつものように自分用の備忘録です。

ちなみにスマホではなくパソコン用です。

目的

WEBページから文字列を選択する。

↓

マウスの中央クリック（ホイールを押す）で、別窓でその文字列の画像が表示される

↓

(ﾟдﾟ)ｳﾏｰ

※文字列を選択して、右クリックから「イメージ検索をする」→別タブに結果を表示、みたいなのはもう結構あるのですが、それでさえ面倒くさいので、なんとかボタン一発にして、連続で検索できるように別窓にしたかったのです。

ファイル構成

４つのファイルで構成しています。

【image-searchディレクトリ】
・manifest.json
・script.js
・background.js
・jquery.min.js

ファイルの中身

・manifest.json

{
  "manifest_version": 2,
  "name": "Image-search",
  "description": "Google image search by selecting text and wheel mouse click",
  "version": "1.0",
  "background": {
    "persistent": false,
    "scripts": [ "background.js" ]
  },
  "content_scripts": [{
    "matches": [ "http://*/*", "https://*/*", "file:///*" ],
    "js": [ "script.js" ]
  }]
}

・script.js

window.addEventListener('mousedown', function (e) {
    if (e.button == 1) {
        var text = window.getSelection().toString();
        if (text.length > 0) {
            chrome.extension.sendMessage({ text: text }, function (response) { });
        }
    }
}, false);

・background.js

chrome.extension.onMessage.addListener(function (req, sender, callback) {
        if (req.text !== undefined) {
            window.open("http://images.google.com/images?hl=ja&ie=UTF-8&oe=UTF-8&q=" + req.text, null, 'width=600, height=600, menubar=no, toolbar=no, scrollbars=yes');
        }
});

・jquery.min.js

Download jQuery | jQuery　ここらへんからダウンロードしておく。

主な動き

１．選択文字列をwindow.getSelectionで取得。

２．取得した文字列をイメージ検索のURLパラメータに渡してwindow.open。

使い方

０．GoogleChromeを最新版にしておく。

１．アドレスバーに「chrome://extensions」と入力。
２．右上の「デベロッパーモード」にチェック。
３．「パッケージ化されていない拡張機能を読み込む」を押してディレクトリを読み込む。
４．下画像のようになればOK。
５．念のためブラウザ再起動。