Amazonの商品ページURLを短くするChrome Extension #JavaScript

はじめに

こんにちは。週末から夏休みに入る@yug1224です。

Amazonの商品ページって、ほんっっっっっっっっとURLが長いですよね！

@notakaosさんが公開していた記事と似たようなことを自分もしていたので紹介します！

アイキャッチは天井を見上げてそわそわする段ボールの中の猫のフリー素材

作ったもの

実際に作ったものは非常にシンプル。

https://www.amazon.co.jp/*の遷移時に/dp/XXXXXXXXXを見つけて、表示しているURLを変更するだけです。

index.js

const url = location.href;

const [_, p1] = url.match(
  /https:\/\/www\.amazon\.co\.jp\/.*dp\/([0-9A-Z]{10})\/?/
);

history.replaceState(null, '', p1 ? `https://www.amazon.co.jp/dp/${p1}/` : url);

manifest.json

{
  "manifest_version": 3,
  "name": "Pretty Amazon URL",
  "description": "",
  "version": "1.0",
  "content_scripts": [
    {
      "js": ["index.js"],
      "matches": ["https://www.amazon.co.jp/*"]
    }
  ]
}

manifest.jsonのcontent_scripts[].matchesにhttps://www.amazon.co.jp/*を指定しているので、Amazonにアクセスした時のみindex.jsが実行されます。

index.jsではlocation.hrefから/dp/XXXXXXXXXを探して、history.replaceState()で表示しているURLを変更するという処理が動きます。

簡単ですねー！

manifest.jsonの詳細については公式ドキュメントの「Manifest file format」を参照してください。

使い方

プログラムはyug1224/pretty-amazon-urlで公開しています。git cloneするかダウンロードをして、ブラウザの拡張機能ページで読み込んでください。

yug1224/pretty-amazon-urlをgit cloneかダウンロード
ブラウザの拡張機能のページを開く
- chrome://extensions/ (Google Chrome)
- edge://extensions/ (Microsoft Edge)
デベロッパーモードを有効にする
「パッケージ化されていない拡張機能を読み込む」をクリックして、ダウンロードしたフォルダを選択する

これでAmazonの商品ページにアクセスするだけでURLを短くしてくれるようになります。

ぜひ使ってみてください！Enjoy!