Amazonの商品ページURLをクリップボードにコピーしやすくするだけのChrome拡張を作ってみました

下記Qiita記事の転載です

qiita.com

今回のテーマ

  • とりあえずChrome拡張を作ってみる
    • 自分が解決したい課題に取り組む
    • 大きいものを最初から作ろうとしない

自己紹介

株式会社ROXXでサーバーサイドを主に開発しております

コンテンツ

単なる作業報告・ソースコード添付な記事となります

似たようなことをやる/やりたい人の参考になればさいわいです

課題の所在

Amazonの商品ページ機能に関して、前々から下記を解決したいなと思っていました

  • PC向けのページだと「シェアする」ボタンの挙動が「メーラーの起動」になっている
    • slackとかdiscordとかにURLを貼りつけたいだけなときに不便
    • シェア機能は(自分がユーザー個人として頻用している割に)UI上あまり重視されていない気がする
      • ボタンが小さい
      • わかりにくい箇所にある
  • マルチバイト文字列を大量に含むURLになっていることがある
    • 雑にコピペしてslackとかに貼るだけだと(マルチバイト文字列部分が%エンコーディングされ)さらに文字列長が膨らむ

先駆者様

ただ、作業途中で調べたところ、先駆者様がいらっしゃったので、紹介しておきます!

他にもいらっしゃりましたら、コメントください。書き足します!

ken1flanさん

コンセプト完全一致(仲間がいました!)

zenn.dev

r7kamuraさん

短縮URL生成(多機能ですごいです!)

r7kamura.com

前提的認識

やること

  • 綺麗さは棚上げして愚直に書く

やらないこと

  • ブラウザ以外の環境が要らない開発ができるのいいなと思ったので、下記は一旦しません
    • 他の実行環境(Node.js等)への依存
    • TS化
  • スタイル崩れへの対処
    • 「シェアするボタン」たちの位置を改変した上で、そこに今回作成するボタンを並べるつもりでしたが、スタイルが崩れたときの対応が面倒そうなのでこの線は一旦なしにしました
      • 目立ちやすくかつ既存のスタイリングにさほど影響しなさそうだった「タイトル上」にとりあえず設置する方向にします

画面例

f:id:orifuji:20210408204927p:plain

ソースコード

github.com

{
  "name": "Amazon URL Copy Faster",
  "version": "1.0.0",
  "description": "URLのコピーをいいかんじにするだけの拡張、そういうのがあってもいい",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": [
      "*://*.amazon.com/*",
      "*://*.amazon.co.jp/*"
      ],
      "js": ["src/main.js"]
    }
  ],
  "permissions": [
    "activeTab",
    "*://*.amazon.com/*",
    "*://*.amazon.co.jp/*"
  ]
}
main();

function main() {
    const current_url = new URL(location.href);
    const cleaned_url = cleanUrl(current_url);
    if (cleaned_url === '') {
        return;
    }
    createButton().onclick = function() {
        copyUrl(cleaned_url)
    };
}

// sanitize current url
function cleanUrl(current_url) {
    pathnames = current_url.pathname.split('/');
    cleaned_url = '';
    for (let i = 0; i < pathnames.length; i++) {
        if (pathnames[i] === 'dp') {
            cleaned_url = current_url.origin + '/' + pathnames[i] + '/' + pathnames[i + 1] + '/';
        }
    }

    return cleaned_url;
}

// generate a new DOM as a button
function createButton () {
    const copy_button = document.createElement('button');
    const product_title = document.getElementById('title');
    copy_button.insertAdjacentHTML('afterbegin', 'URLをコピー');

    return product_title.parentNode.insertBefore(copy_button, product_title);
}

// causes a side effect on clipboard
function copyUrl(cleaned_url) {
    if (navigator.clipboard) {
        // via clipboard api
        navigator.clipboard.writeText(cleaned_url);
    } else {
        document.execCommand('copy', true, cleaned_url);
    }
}

一応、知見的な部分を……

作業ふりかえり

これからやってみようかなと思っている諸々

  • アイコンを用意する
  • (非プログラマへの需要がありそうなら)ウェブストア公開する
  • スタイルをもうちょっとどうにかする
  • コピーが成功したことがユーザーに伝わるUIにする
  • ノリでTS化してみる
  • モジュールを分割してみる

感想

Chrome拡張作成ですが、特別に開発環境構築をする必要がない点が最高でした

Webフロントエンド・JSの初心者(自分のことです)の学習目的にかなりいいですね

既存のWebサイトをターゲットにJSを走らせるだけなので、自前で一からマークアップを書き書きしなくても、JSに注力できるのが快適です