きっかけ

AmazonのWishlistにKindle本を登録しているのですが、入れたときからどのくらい値引きされているのかは見ることができてもKindleでよく行われるAmazonポイント還元が見れないのが不便だと思い、ポイント還元が見られるようなWebExtensionsを作ろうと思いました。

作ったもの

https://github.com/sytkm/PointsintheWishlist
インストール方法もgithubに載せています。

仕組み

実際にポイントの取得を行っているのはcontent.js。
このなかのwishpoints()でポイントを取得しています。
FetchAPIを用いているものだけ解説。(シンプルに見せるため、コメントなどを排除しています。)

content.js

function wishpoints(enablefetch){
    const dom_parser = new DOMParser();
    const itemList = document.getElementsByClassName("price-section");
    const olditemnum = sessionStorage.getItem("storageItemNum")||0;
    for(let item of Array.from(itemList).slice(olditemnum)){
        const asin = JSON.parse(item.attributes["data-item-prime-info"].value).asin;
        if(enablefetch){
            fetch('https://www.amazon.co.jp/dp/'+asin)
            .then(res=>res.text())
            .then(text=>{
                const lopoints = dom_parser.parseFromString(text, "text/html").getElementsByClassName("loyalty-points");
                let points = "";
                if(lopoints.length!=0){
                    points = lopoints[0].children[1].innerText.trim();          
                    item.firstElementChild.insertAdjacentHTML("beforeend", " " + points);
                }
            }).catch(err=>console.error(err));
        }
    }
}

この関数では、price-sectionというクラス名を持つエレメントをアイテムリストとしています。
このアイテムリストに含まれるエレメントの商品ページを1つずつFetchし、そのページの中でloyalty-pointsというクラス名を持つエレメントからポイントを取り出しています。
取り出したポイントはWishlistのページの金額が書いてあるエレメントの最後につけています。

また、MutationObserverを用いてDOMの変更を監視し、無限スクロールに対応しています。

content.js

const obtarget = document.getElementById("g-items");
const observer = new MutationObserver(records =>{
    if(localStorage["fetchType"]=="fetchapi"){
        wishpoints(true);
    }else if(localStorage["fetchType"]=="jqueryajax"){
        wishpoints(false);
    }
});
observer.observe(obtarget,{childList:true});

スクロールなどを行いDOMが変更されたときには、過去読み込んだ数と今読み込まれているアイテムリストの数を比較し、増えている場合には増えた分をFetchしポイントを調べています。

聞かれそうなこと

なぜバージョンが0.2.1なの？

もともと昨年の2月頃に0.1.0を作っていました。
しかし、そのときから今年4月までの間にAmazonのWishlistのデザインなどが変わりページャから無限スクロールに変更されていました。
使っていたのでそのことは確認していましたが、忙しかったこともあり直すのが少し面倒で放置していました。
先日、Githubにissueが来ており、見てみると便利なので直してほしいといった内容でした。
他人に使われていると思うとやる気が出てきたので修正を加えた次第です。人からの期待ってすごい。

なんでFetchAPIとjQueryのajaxがあるの？

昨年の2月に作ったときはFetchAPIがあまりうまく動かず、仕方なくjQueryのajaxを用いて実装を行っていました。
今年直すときに改めて確認してみたところ、FetchAPIがなんか普通に動いたのでそちらも使えるようにしました。
現在はどちらも動くようにはなっています。
できるだけ外部ライブラリなどは使わないようにしたいので削除したいですが、いきなり削除すると使えなくなるものもあるかもしれないので残しています。

delayTimeとか無駄じゃない？

はい、今は使っていないので無駄です。これは以前ページャ方式だったときに使っていた名残です。
現在自分では困ってないのでそのままにしています。
ポイントが高くついてるものをピックアップして拡張機能のアイコンを押したら一覧で見られるようにしたいなどの要望がissueに来たりなど必要に迫られればついでに直すかもしれないです。

Product Advertising APIは使わないの？

PAAPIではkindle本の値段やポイント還元を取得することができないため、fetchする形をとっています。AmazonのページからAmazonをfetchするため、クロスドメイン通信を行わなくて済んでるところがハッピーでした。

参考文献

2017/2のとき

https://blog.fenrir-inc.com/jp/2012/09/jquery-chrome-extension.html
https://developer.mozilla.org/ja/docs/Web/API/Fetch_API/Using_Fetch
http://d.hatena.ne.jp/yk5656/20141011/1414984933
https://easyramble.com/chrome-extension-message-passing.html

Amazonのウィッシュリストに入っているKindle本のポイントを表示させるWebExtensionsを作った