Help us understand the problem. What is going on with this article?

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

概要

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

はじめに

ヘビー図書館ユーザーなので、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をクリックしてたけど、違った。
image.png

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

残課題

普通に、図書館のサイトを開いたときも、勝手に遷移するようになった。どうしよ・・・。
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ふぁくとりー

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした