Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@optimisuke

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

More than 1 year has passed since last update.

概要

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ふぁくとりー

1
Help us understand the problem. What is going on with this article?
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
optimisuke
Feedback Welcome
acall
ACALLは、「Life in Work and Work in Life for Happiness」をVISIONとして、どこでも安心・安全・快適なワークスタイルを実現するスマートオフィスプラットフォーム「WorkstyleOS」を開発・提供しています。オフィスワークとリモートワークのベストミックスを通じて、人々の「くらし」と「はたらく」を自由にデザインできる世界を目指します。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?