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

# 概要
Amazonで見ている本のタイトルを図書館のサイトで検索するChrome拡張を作ってみた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184221/e24b6e33-5aec-041e-0038-14d882ac6219.png)

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

[ブックマークレット初心者がWEBサイト入力を自動化するためにやったこと - Qiita](https://qiita.com/optimisuke/items/ccaf048dc78ab6079ec3)

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

# やったこと
## 他の人のマネ
作り方、全然知らないので、調べた。
いくつか見たけど、ややこしそうやった。
一番シンプルそうな、このサイトに書かれてること試してみた。
[Chrome拡張の作り方 (超概要) - Qiita](https://qiita.com/RyBB/items/32b2a7b879f21b3edefc)

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

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


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

[Chrome拡張の開発方法まとめ　その1：概念編 - Qiita](https://qiita.com/k7a/items/26d7a22233ecdf48fed8)

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

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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184221/15b83eed-cae4-c6b6-0f48-2de688cb5e66.png)


こんな感じで登録される。ソースコードを更新したときは、右下の方の更新ボタン押したら勝手に読み込んでくれた。ファイルのパスを覚えてるっぽい。たぶん。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/184221/22a8dc46-372c-5483-90f2-63f30debd96b.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ふぁくとりー](https://www.nishishi.com/javascript-tips/form-focus.html)