開発

AmazonアフィリエイトリンクをHTMLコードに変えるChrome拡張機能。大幅に進化させてみた。

進化しました！！

Amazonアソシエイトのみなさんこんにちは。
前回のバージョンでは、わざわざ画像タブをクリックし、その上でわざわざ拡張機能ボタンをクリックしなくてはならず、とても面倒な仕様となっていました。

しかし、今回「@takeokunn」にコードレビュー及びアドバイスをもらい、より進化させることができました。

使い方


拡張機能を導入すると上の画像のように[HTML生成]ボタンがでてくるぞ！

これをクリックするだけで、な、なんと！



こんなのができてしまうのです。

前回はわざわざ拡張機能のアイコンをブラウザの上から探して、わざわざわざわざクリックしなくてはならなかったのですが、今回は製品ページを開くだけで、ボタンが製品名の下に出てくるっていう神仕様。

ちなみに全部「@takeokunn」のおかげです。
本当にありがとうございます。

苦難の連続

１，クリックしてくれない。
前回もそうだったんですが、アフィリエイトの画像多分のところがクリックできませんでした。

この画像タブをクリックすると、JSのコードが発火して、アフィリエイトリンクの生成が行われるみたいだったのですが、

$(hoge).click();

では動かず。

Choromeのコンソールに直接打ち込めばクリックしてくれたのですが、拡張機能のjsファイルに書いて実行すると、発火してくれませんでした。

でもなんかのサイトで偶然見つけたちょっと違う書き方を試してみたらなんかできました。

$(hoge).click();　→　$(hoge)[0].click();

たったこれだけです。

なんでこれでOKなのかよくわからないので、誰か詳しい人は教えてください。
お願いします。

2,アフィリンクの読み込み
1で発火させたのはいいものの、アフィリンクを生成してもらっている間もプログラムが進行してしまいます。
このままでは、アフィリンクを取得するまえにプログラムが終了してしまうので、望む結果を得ることができません…。

ということで、アフィリンクを取得してから次のコードを実行するために、

setTimeout()

という関数を使いました。
これは、指定時間setTimeoutの中にあるプログラムの実行を遅らせることができる関数らしいです。

これで、とりあえずアフィリンクを読み込み完了してからHTMLコードの制作に進めるようになりました。

3,コピーできない…
今回もクリップボードにコピーしてくれるようにしたかったので、以下を参考に実装しました。

参考: https://qiita.com/simiraaaa/items/2e7478d72f365aa48356

しかし、なんかコピーできなかったんですよね。

いろいろ検証した結果、setTimeoutで実行した関数内で選択部分をクリップボードにコピーするexecCopy()を仕様すると失敗するという結論にいたりました。

理由はわかりません。
だれか教えてくれさい。

となると、クリップボードにコピーする部分だけ、setTimeout()外で行えばいいか…となると思うんですけど、ここでJSの同期処理、非同期処理というのが障壁になりました。

JSは非同期処理と同期処理があり、非同期処理が行われている間も同期処理は進んで言ってしまうということを今回学びました。

例で書くと

コード１(同期処理)
コード２(非同期処理)
コード３(同期処理)

このコードを上から順番に実行すると、

コード１(同期処理)
コード３(同期処理)
コード２(非同期処理)

の順番で実行結果が帰ってきます。

つまり、setTimeout()は非同期処理なので、setTimeout()内で実行しているのHTML生成関数の処理が終わる前に、クリップボードにコピーしてくれる関数の処理が終わってしまうのです。

で、非同期処理と同期処理を順番に実行する方法はPromiseがよさそうという結論に至りました。

で、で、で、Promiseを使ってみようとしたのですが、よくわからず断念。
(一日中試行錯誤してたから疲れてたんだよ言い訳タイム)

諦めて別の方法をとることにしました。

別の方法は、商品ページを表示した段階でアフィリンクの生成をしてしまうことです。

ページを開き終わった段階でアフィバーの画像タブをクリックして、すぐに閉じればあまり違和感がないのではないかと。
そして、実際にアフィリンク生成ボタンを押すのは人間だから、よほどの高速神エイムを噛まさなければリンク生成前にボタンをクリックすることは人間ではできないだろうと、そのような考えで、それに至りました。


(window.onload = function() {
    $('[data-event-name="GetImageLink"]')[0].click(); 
 $(function(){
  setTimeout(function(){
      $('#productTitle').click();
  },100);
 });
})();


これがそのコードです。

ページロードが完了した段階で、画像タブをクリックし、0.1秒後にテキトーな箇所をクリックさせて、画面を消しています。

このようにすれば、HTML生成ボタンを押したあとにsetTimeoutを使う必要はないので、execCopy()は実行できるというわけです。

たいへんだった

のですが、満足できるものができてよかったです。

凝っているのが、ログインしていない状態でボタンをクリックすると、強制的にログイン画面に飛ばすところですかね？
『書いているときに思いましたが、ログインされていなかったらそもそもHTML生成ボタン生成しなければよいのでは？』

いろいろバグが内容に検証はしていますが、おそらくおかしいところはおかしいので、なにかあったら「@akasananosa」まで連絡お願いします。
たぶん直します。

Githubにコード乗っけてるので、見たい方はぜひ。

また、なんか作ります。


0 件のコメント :

コメントを投稿