Zenn
🤖

amazonのURLから不要な情報を削除するChrome拡張

2021/01/05に公開
Chrome拡張
JavaScript
tech

はじめに

amazonのURLにはURLを貼ったときにわかりやすくするための日本語の商品名や、どこからそのページに訪れたのかなどのトラッキング情報がついています。
最近、amazonのURLを資料に貼ることが多かったのですが、これが大変カッコがつきません。毎回削除して貼っていたのですが流石に面倒になってきました。

だいたいこういったツールはChrome拡張にあるのでそれを入れればよいのですが、今の今まで拡張を書いたことがなかったので、ちょっと書いてみることにしました。

ソース

https://github.com/ken1flan/amazon_url_shorter

仕様

amazonのURLについてはご存知な方も多いでしょうが、一応…。

↓はとある商品のURLです。

https://www.amazon.co.jp/%E3%83%91%E3%83%BC%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88-Ruby-Rails-%E3%80%90%E5%A2%97%E8%A3%9C%E6%94%B9%E8%A8%82%E7%89%88%E3%80%91-Perfect/dp/4297114623/ref=sr_1_1?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&dchild=1&keywords=%E3%83%91%E3%83%BC%E3%83%95%E3%82%A7%E3%82%AF%E3%83%88ruby&qid=1609670000&s=books&sr=1-1

とても長いのですが、本当に必要な情報は https://www.amazon.co.jp/dp/4297114623 だけなのです。/dp/商品番号以外はとっちゃいましょう、という感じです。

あんまりいろいろ操作するのも嫌なので、ピンどめした拡張のアイコンをクリックしたら、不要な情報を省いたURLがクリップボードに保存されるようにします。
あとは煮るなり焼くなりすればよいと思います。

ソース

manifest.json

拡張の概要を表していて、名前や含まれているファイル、必要な権限などが書かれています。
今回はタブのURLを取得したいので、"permissions": ["activeTab"]を設定しています。

manifest.json
{
  "name": "Amazon URL Shorter",
  "version": "1.0",
  "description": "Remove useless information from Amazon URL",
  "permissions": ["activeTab"],
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  },
  "browser_action": {
    "name": "Amazon URL Shorter"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "manifest_version": 2
}

background.js

chrome.browserAction.onClicked.addListener()でアイコンがクリックされたときに動作する無名関数を登録しています。
chrome.tabs.query()で現在のウィンドウのアクティブなタブを検索し、それに対して無名関数で処理を行っています。
処理はURLを取得して、正規表現を使って不要な情報を取り除いたURLをクリップボードにコピーしています。
URLを取得するためにmanifest.jsonで設定したpermissionが必要です。

background.js
chrome.browserAction.onClicked.addListener(() => {
  chrome.tabs.query({active: true, currentWindow: true}, tabs => {
    url = tabs[0].url;

    shorted_url = url.replace(/(https:\/\/www.amazon.co.jp).*(\/dp\/[^/]+).*/, "$1$2");

    // clipboardへコピー
    var textArea = document.createElement("textarea");
    document.body.appendChild(textArea);
    textArea.value = shorted_url;
    textArea.select();
    document.execCommand("copy");
    document.body.removeChild(textArea);
  });
});

余談

許可さえ取れれば、javascriptでなんでもやり放題です。
便利だからといろんな拡張を入れていますが、悪気があれば、タブのURLやページのタイトルなどをどこかのサーバに送るなんて、お茶の子さいさいですね、などと思いました。せめてChrome拡張のソースコードが見やすいところにあればよいのですが、探しにくいので、見ることもできないので…少し怖くなってきました。

小さなツールなら自分で書くようにしようか〜という気持ちです。

参考

Chrome DeveloperｓのManifest V2

この記事を書いたときの現行バージョンはV２です。パッとみたときにV3が現行バージョンに見えましたが、Getting started通りにやっても動かなくて、とても悩みました…。（この記事で一番いいたかったこと！）

Discussion