Amazonで見ている本のタイトルを図書館のサイトで検索するChrome拡張の作り方

概要

Amazonで見ている本のタイトルを図書館のサイトで検索するChrome拡張を作ってみた。

はじめに

ヘビー図書館ユーザーなので、WEB予約を効率化したくて試行錯誤中。ブックマークレットで、効率化しようとしてある程度成功したけれど、ページ遷移を挟んだスクリプトは実行できなかった。なので、Chrome拡張使って試してみることにした。
自分のスキル的には、JavaScriptとHTMLなんとなくならわかる程度。

ブックマークレット初心者がWEBサイト入力を自動化するためにやったこと - Qiita

方針

とりあえず、公開はおいといて、自分のために動くものを作る。
Amazonのサイトで気になる本を表示してるときに、Chrome拡張のアイコンを押すと、図書館のサイトで検索した結果を表示するようにしたい。本読むとき、それなりにAmazonのレビューとか評価を気にするタイプなので。

やったこと

他の人のマネ

作り方、全然知らないので、調べた。
いくつか見たけど、ややこしそうやった。
一番シンプルそうな、このサイトに書かれてること試してみた。
Chrome拡張の作り方 (超概要) - Qiita

すんなり動いたので、これを真似して作ることにした。
content_scriptsっていうのを使ってる。
特定のサイトを開いたときに動作するスクリプト。

manifest.jsonってので、全体的な設定を書いて、JavaScriptのファイルで動作を書いたら良さそう。HTMLとかアイコンはなくても良さそう。

やりたいことするための調査

やりたいのは、Amazonのサイトを開いてるときに、アイコンをクリックしたら動作するイメージ。どうも、アイコンをクリックしたときに動作するpage_actionってのと、バックグラウンドで動作するbackgroundってのを設定したらよさそう。

Chrome拡張の開発方法まとめ　その1：概念編 - Qiita

できたもの

試行錯誤して、処理の流れはこんな感じになった。

1. バックグラウンドで、クリックを監視
2. クリックされたら、Amazonのサイトでタイトルを取得して（|でタイトルとか著者名が区切られてる）、タイトルをローカルに保存して、図書館のサイトを開く
3. 図書館のサイトが開かれたら、ローカルに保存してあるタイトルで検索する。

※ permissionsをエラーとか見ながら、適当に検索して設定した。
※ スクリプト間のデータ受け渡しはchrome.storage.local使った。他にも方法ありそう。
※ page actionのbrowser_styleも、style.jsがどうこうっていうエラーが出たので、適当に設定してみた。

ファイルはこれ（↓）で全部。

manifest.json

{
    "name": "Amazon2KobeLibrary",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "Amazonで見ている本のタイトルを神戸市図書館のサイトで検索",
    "background": {
        "scripts": [
            "background.js"
        ]
    },
    "page_action": {
        "default_title": "page action",
        "browser_style": true
    },
    "content_scripts": [
        {
            "matches": [
                "https://www.lib.city.kobe.jp/opac/opacs"
            ],
            "js": [
                "content_lib.js"
            ]
        }
    ],
    "permissions": [
        "storage",
        "activeTab"
    ]
}

background.js

(function(){
    chrome.tabs.onUpdated.addListener(function(tabId){
        chrome.pageAction.show(tabId);
    });

    chrome.pageAction.onClicked.addListener(function(tab){
      chrome.tabs.executeScript(null,{ file: "script.js"});
    });
})();

script.js

var title = document.title;
var title1 = title.split('|');
chrome.storage.local.set({ hold_title: title1[0] });
// alert('タイトル：' + title1[0]);
window.open('https://www.lib.city.kobe.jp/opac/opacs')

content_lib.js

chrome.storage.local.get("hold_title", function (items) {
    document.forms['search_form'].elements['keywords'].value = items.hold_title;
    var x = document.getElementsByTagName("form");
    var request = document.createElement('input');
    request.name = 'btn1';
    request.value = '検索';
    document.forms['search_form'].appendChild(request);
    document.forms['search_form'].submit();
});

拡張機能として追加

想像以上に簡単やった。
Extensionsを開いて、Load Unpackedをクリックして上記ファイルが入ったフォルダを選択するだけ。たぶん、Developer modeにチェック必要。はじめ、Pack extensionをクリックしてたけど、違った。

こんな感じで登録される。ソースコードを更新したときは、右下の方の更新ボタン押したら勝手に読み込んでくれた。ファイルのパスを覚えてるっぽい。たぶん。

残課題

普通に、図書館のサイトを開いたときも、勝手に遷移するようになった。どうしよ・・・。
Amazonからしか検索できない。微妙すぎる。検索窓にタイトル入れるまでにしといた方がましかも。
公開方法わからない。もうちょい、ちゃんと作ったら公開してもいいのかも。

おわりに

とりあえず、動くもの作れてよかった。ちょっと微妙ではあるけれど。
思ったより簡単やった。食わず嫌いよくない。

追記

妥協案として、検索窓にタイトルを入れて検索窓にフォーカス（カーソルで選択した状態）するところで止めてみた。悪くない気がする。

content_lib.js

chrome.storage.local.get("hold_title", function (items) {
    document.forms['search_form'].elements['keywords'].value = items.hold_title;
    document.forms['search_form'].elements['keywords'].focus();
    // var x = document.getElementsByTagName("form");
    // var request = document.createElement('input');
    // request.name = 'btn1';
    // request.value = '検索';
    // document.forms['search_form'].appendChild(request);
    // document.forms['search_form'].submit();
});

参考：
テキスト入力欄に最初からカーソルを入れる(フォーカスを与える)方法 - JavaScript TIPSふぁくとりー