はじめに

この記事は、完全に理解したTalk Advent Calendar の10日目の記事です。 10月ごろにEasy Easyのコミュニティを知り、Youtubeライブで発表を視聴していました。

今回はChrome Extensionを完全に理解したので、作ったものを紹介できればと思います。

要約

Chrome Extensionで BookLive! の商品ページに「後で買うボタン」を追加しました。
Content.jsに記載した内容がページに反映されます。
公式ドキュメントが英語のみで苦労しました。。。

目的

BookLive!では、毎週末15%オフクーポンがもらえたりします。

booklive.jp

自分はそのタイミングで本を買うことが多いので、平日に発売された新刊やちょっと気になった本を欲しいものリストに入れて、忘れずに購入できるようにしたいと考えました。

f:id:nagana39:20211205144703p:plain — クーポン

しかし欲しいものリストに当たる機能がBookLive!には存在しません。代わりに、後で買う一覧を疑似的に欲しいものリストとして利用していました。

ただこちらも商品ページから、後で買う一覧に追加することはできなかったため、これを解決したいと思いました。

f:id:nagana39:20211205145044p:plain — 既存の商品ページ

f:id:nagana39:20211205145837p:plain — カートからは「後で買う」への追加ができる

仕様

作成した拡張機能では、3種類のボタンを追加しています。

商品ページに「後で買う」に追加するボタンを追加
商品ページに「後で買う」へ遷移するボタンを追加
後で買うリストページに「削除」ボタンを追加
- 既存では後で買う一覧から削除するために、カートへ追加→削除の手間があったためボタンを追加しました。

f:id:nagana39:20211205145508p:plain — 後で買うボタンと後で買うへのリンクボタン

f:id:nagana39:20211205145719p:plain — カートページの下に「後で買う作品」の一覧がある

Chrome Extensionの構成

Manifest.json にExtensionの構成と各jsファイルをどのページで有効にするかなどを記載します。

今回はページ内に影響を及ぼすことができるContent Scriptsのオプションでjsファイルを追加しています。

Manifest.json

商品ページとカート(後で買う)ページにボタンを拡張するため、下記のように設定しました。

    "content_scripts":[
        {
            "matches":["https://booklive.jp/product/index/title_id/*"],
            "js":["Contents/ProductContent.js"]
        },
        {
            "matches":["https://booklive.jp/cart*"],
            "js":["Contents/CartPageContent.js"]
        }
    ],

・matches：jsファイルを有効にするURLの指定(正規表現でパラメータ部分を任意の文字列としています。)

・js：マッチしたページで有効にするjsファイル

Content Scripts

後で買うへ追加するためのURLを調べて、商品ページのURLを元にボタンを生成するようにしました。

 // 商品ページ https://booklive.jp/product/index/title_id/{id}/vol_no/{vol}
 // 後で買うへ追加 https://booklive.jp/cart/move/save_type/2?title={id}-{vol}

jsは特に特殊なこともなくクリックイベントが発火された際に、URLを生成する形にしています。

// 後で買うに保存するリンクを作成する
function createLateBuyBookButton(){
    let li = document.createElement("li");

    const cartLink = {
        id: "lateBuyBookLink",
        innerHTML: "後で買うに保存",
        className: "cart_action btn_module large ",
        href: "#"
    };

    const lateBuyBookLink = createLinkElement(cartLink)

    lateBuyBookLink.addEventListener("click", async () => {
        const a = document.getElementsByClassName("btn_module buy_action large")[0];

        // 商品ページ https://booklive.jp/product/index/title_id/{id}/vol_no/{vol}
        // 後で買うへ追加 https://booklive.jp/cart/move/save_type/2?title={id}-{vol}&sort=t0
        const bookId = a.href.match(/title_id\/(\d+)\//)[1];
        const bookVol = a.href.match(/vol_no\/(\d+)/)[1];
        const lateBuyLink = "https://booklive.jp/cart/move/save_type/2?title=" + bookId + "-" + bookVol + "&sort=t0";

        fetch(lateBuyLink, {
            credentials: 'include',
            model: 'no-cros'
        })
        .then(response => {
            if(response.ok){
                appendText("後で買うに保存しました");
            } else {
                appendText("後で買うに保存できませんでした、もう一度お試しください");
            }
            console.log(response);
        });
    });

    li.appendChild(lateBuyBookLink);
    return li;
}


// カートへ移動リンクを作成する
function createForCartButton(){
    let li = document.createElement("li");

    const cartLink = {
        id: "forCartLink",
        innerHTML: "カート(後で買う一覧)へ",
        className: "cart_action btn_module large ",
        href: "https://booklive.jp/cart"
    };
    
    li.appendChild(createLinkElement(cartLink));
    return li;
}

カートから削除するボタンについても、上記コードと同様な感じで作成しました。

さいごに

今回はChrome ExtensionでBookLive!の商品ページに、後で買うボタンを追加する拡張機能を作りました。

英語よわよわすぎて、公式ドキュメントを読み解くのは大変でしたが、欲しいものが作れて満足しています。また拡張機能の作成は、単純なものなら割と手軽なことが分かったので今後も何か作ってみたいなと思いました

nagana39’s blog

電子書籍サイト BookLive! に「ほしいものリストに追加する」Chrome Extensionを作りました

はじめに

要約

目的

仕様

Chrome Extensionの構成

Manifest.json

Content Scripts

さいごに