モチベ
かっこいいから。
どうやるかは今やってる youtube の iframe 生成 → esa にコピペ と同じようなやり方でいいかなと思っている。そんでよしなに CSS を整えればいいやくらいで考えた。一旦、iframe 生成してそうな、hugo の shortcode とかを作りましたみのある記事を色々探索した。yusukebe さんの記事がとても参考になった。yusukebe さんを見ると Google Domains から Cloudflare Register に移行したいんだった、いつやろうかと思い出す。気が向いたら移行すると思う。
https://yusukebe.com/posts/2020/amazon-shortcode/
記事内にあるサンプルコードを殆どそのまま利用する。この https://blog.cat2koban.dev は esa のコンテンツを nextjs が API 経由で取得してから静的コンテンツを生成しているので、esa のエディタにそのまま生成した iframe をコピペするのが運用上楽。だと思いたい。
iframe の自動生成
yusukebe さんの記事にあるような iframe 全体をベースにした文字列に、今見ている商品ページの情報を抽出して clipboard に iframe のコードを保存する Chrome 拡張を書いた。Chrome 拡張の参考にしたのはこのサイトで、
https://zenn.dev/k41531/articles/3ce99a991b3098
追加で修正したコードも殆ど切り貼りしただけのもの。
{
"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"]
}
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 */
});
}
});
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 をちょちょいと整えて、終わり。
完成した
- Amazon の商品ページで
Command + Shift + Pを押す - esa の記事に飛び、ペーストする
これで amazon のカードリンクがカッコよく映るようになってくれたはず。