
## モチベ
かっこいいから。

どうやるかは今やってる youtube の `iframe 生成 → esa にコピペ` と同じようなやり方でいいかなと思っている。そんでよしなに CSS を整えればいいやくらいで考えた。一旦、iframe 生成してそうな、hugo の shortcode とかを作りましたみのある記事を色々探索した。yusukebe さんの記事がとても参考になった。yusukebe さんを見ると Google Domains から Cloudflare Register に移行したいんだった、いつやろうかと思い出す。気が向いたら移行すると思う。

[https://yusukebe.com/posts/2020/amazon-shortcode/](https://yusukebe.com/posts/2020/amazon-shortcode/)

記事内にあるサンプルコードを殆どそのまま利用する。この [https://blog.cat2koban.dev](https://blog.cat2koban.dev) は esa のコンテンツを nextjs が API 経由で取得してから静的コンテンツを生成しているので、esa のエディタにそのまま生成した iframe をコピペするのが運用上楽。だと思いたい。

## iframe の自動生成

yusukebe さんの記事にあるような iframe 全体をベースにした文字列に、今見ている商品ページの情報を抽出して clipboard に iframe のコードを保存する Chrome 拡張を書いた。Chrome 拡張の参考にしたのはこのサイトで、

[https://zenn.dev/k41531/articles/3ce99a991b3098](https://zenn.dev/k41531/articles/3ce99a991b3098)

追加で修正したコードも殆ど切り貼りしただけのもの。

```json[class="line-numbers"],[data-file="manifest.json"]
{
    "name": "Amazon card link copier",
    "version": "1.0",
    "manifest_version": 3,
    "description": "Extract the information from the amazon.co.jp product page you are currently viewing, create an iframe link and copy it to the clipboard.",
    "background": {
      "service_worker": "service-worker.js"
    },
    "content_scripts": [
        {
          "matches": ["<all_urls>"],
          "js": ["content-script.js"]
        }
    ],
    "commands": {
      "inject-script": {
        "suggested_key": {
         "default": "Ctrl+Shift+P",
         "mac": "Command+Shift+P"
        },
        "description": "Inject a script on the page"
      }
    },
    "permissions": ["clipboardWrite","activeTab"]
}
```

```js[class="line-numbers"],[data-file="service-worker.js"]
chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.command == "copy") {
      var a = document.getElementById("productTitle").textContent;
      var b = document.URL.match("(dp|product)/([0-9a-zA-Z]{10})")[2];
      var str = "<div class='amazon-widget'><a href='https://www.amazon.co.jp/gp/product/"+b+"/?tag=hogehoge'></a><div class='amazon-widget-img'><img src='//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=JP&ASIN="+b+"&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL350_&tag=hogehoge' /></div><div class='amazon-widget-info'><span class='amazon-widget-title'>"+a.trim()+"</span><span class='amazon-widget-via'><img src='https://www.amazon.co.jp/favicon.ico' /> amazon.co.jp</span></div></div>";
      // Send a message to the content script
      navigator.clipboard.writeText(str).then(() => {
        /* clipboard successfully set */
      }, function() {
        /* clipboard write failed */
      });
    }
});
```

```js[class="line-numbers"],[data-file="content-script.js"]
chrome.commands.onCommand.addListener(function(command) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      var activeTab = tabs[0];
      var title = activeTab.title;
      var url = activeTab.url;
      var result = '[' + title + '](' + url + ')';
      // Send a message to the content script
      (async () => {
        chrome.tabs.sendMessage(activeTab.id, {command: "copy", text: result})
      })();
    });
  })
```

後は CSS をちょちょいと整えて、終わり。

## 完成した

1. Amazon の商品ページで `Command + Shift + P` を押す
1. esa の記事に飛び、ペーストする

これで amazon のカードリンクがカッコよく映るようになってくれたはず。

## 参考
[https://yusukebe.com/posts/2020/amazon-shortcode/](https://yusukebe.com/posts/2020/amazon-shortcode/)

[https://zenn.dev/k41531/articles/3ce99a991b3098](https://zenn.dev/k41531/articles/3ce99a991b3098)

ふと Amazon のリンクをリッチにしたいなと思った。