Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
12
Help us understand the problem. What is going on with this article?
@orifuji

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

公開したので貼っておきます

Amazon URL Copy Faster

なんとも頭の悪そうな名前ですね

今回のテーマ

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

自己紹介

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

コンテンツ

単なる作業報告・ソースコード添付な記事となります
似たようなことをやる/やりたい人の参考になればさいわいです

課題の所在

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

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

先駆者様

ただ、作業途中で調べたところ、先駆者様がいらっしゃったので、紹介しておきます!
他にもいらっしゃりましたら、コメントください。書き足します!

ken1flanさん
コンセプト完全一致(仲間がいました!)
https://zenn.dev/ken1flan/articles/ab168321a4c284

r7kamuraさん
短縮URL生成(多機能ですごいです!)
https://r7kamura.com/articles/2020-11-04-amazon-url-shortener

前提的認識

やること

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

やらないこと

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

画面例

仕上がり図.png

ソースコード

manifest.json
{
  "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.js
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に注力できるのが快適です

12
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
orifuji
PHP / Laravel, Go, OCaml, TypeScript
roxx
人材紹介業むけプラットフォーム「agent bank」、リファレンスチェックサービス「back check」を運営。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
12
Help us understand the problem. What is going on with this article?