楽天アフィリエイトリンク取得

これまでの集大成として、「実用的なアフィリエイトリンク生成ツール」を作成します。

「現在開いているページのURLを取得する技術」と「データを保存する技術」を組み合わせることで、『楽天の商品ページを開いてボタンを押すだけで、自分のアフィリエイトリンクを生成してコピーする』という、ブロガーやアフィリエイターにとって非常に便利なツールが作れます。

まずはデスクトップなど任意の場所に新しいフォルダを作成します。名前は rakuten-link-gen 等、何でも大丈夫です。

このフォルダの中に「manifest.json」、「background.js」、「sidepanel.html」、「sidepanel.js」という４つのファイルを作成します。

テキストエディタ（メモ帳やVS Codeなど）を開いて、以下のコードをコピー＆ペーストして保存してください。

manifest.json （設定ファイル）
background.js （サービスワーカー）
sidepanel.html （表示画面）
sidepanel.js （ロジック）
1. 実行

manifest.json （設定ファイル）

{
  "manifest_version": 3,
  "name": "楽天アフィリリンク作成",
  "version": "1.0",
  "permissions": [
    "sidePanel",
    "storage",
    "tabs",
    "clipboardWrite"
  ],
  "action": {
    "default_title": "リンク作成"
  },
  "background": {
    "service_worker": "background.js"
  },
  "side_panel": {
    "default_path": "sidepanel.html"
  }
}

１． permissions
今回使う機能をすべて申請しています。

"sidePanel": サイドパネルを表示するため
"storage": アフィリエイトIDを保存するため
"tabs": 開いている商品ページのURLを取得するため
"clipboardWrite": 作成したリンクをクリップボードにコピーするため

background.js （サービスワーカー）

chrome.runtime.onInstalled.addListener(() => {
  chrome.sidePanel.setPanelBehavior({ openPanelOnActionClick: true });
});

これまでと同じです。アイコンクリックでサイドパネルを開く設定です。

sidepanel.html （表示画面）

<!DOCTYPE html>
<html>
<head>
<title>Rakuten Affiliate</title>
<style>
body { padding: 10px; font-family: sans-serif; }
input { width: 95%; margin-bottom: 10px; padding: 5px; }
button { width: 100%; padding: 8px; margin-bottom: 10px; cursor: pointer; }
#generate-btn { background-color: #bf0000; color: white; font-weight: bold; }
</style>
</head>
<body>
<h3>設定</h3>
<label>あなたのアフィリエイトID</label>
<input type="text" id="affiliate-id" placeholder="例: 12345.abcde.67890">
<button id="save-btn">IDを保存する</button>
<h3>リンク作成</h3>
<p>商品ページを開いて押してください</p>
<button id="generate-btn">アフィリリンクをコピー</button>

<script src="sidepanel.js"></script>
</body>
</html>

１．デザインの調整
<style>タグを使って、ボタンを押しやすくしたり、楽天っぽく赤色にしたりしています。

２．２つのエリア
「IDを設定・保存するエリア」と、「実際にリンクを生成するエリア」に分かれています。

sidepanel.js （ロジック）

chrome.storage.local.get(["rakutenId"], function(result) {
  if (result.rakutenId) {
    document.getElementById("affiliate-id").value = result.rakutenId;
  }
});

document.getElementById("save-btn").addEventListener("click", function() {
  const raw = document.getElementById("affiliate-id").value;
  const id = raw.trim();                 // ★空白・改行除去
  if (!id) {
    alert("IDが空です。");
    return;
  }
  chrome.storage.local.set({ rakutenId: id }, function() {
    alert("IDを保存しました！");
  });
});

document.getElementById("generate-btn").addEventListener("click", function() {

  const raw = document.getElementById("affiliate-id").value;
  const id = raw.trim();                 // ★空白・改行除去
  if (!id) {
    alert("先にアフィリエイトIDを設定してください。");
    return;
  }

  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const productUrl = tabs?.[0]?.url || "";
    if (!productUrl) {
      alert("タブのURLが取得できませんでした。");
      return;
    }

    if (!productUrl.includes("rakuten.co.jp")) {
      alert("楽天の商品ページではないようです。");
      return;
    }

    const enc = encodeURIComponent(productUrl);

    const affiliateLink = `https://hb.afl.rakuten.co.jp/hgc/${id}/?pc=${enc}&m=${enc}`;

    navigator.clipboard.writeText(affiliateLink).then(() => {
      alert("リンクをコピーしました！");
    }).catch(() => {
      alert("コピーに失敗しました。権限やHTTPS環境を確認してください。");
    });
  });
});

１． chrome.storage.local.get
サイドパネルが開いた瞬間に、以前保存した楽天アフィリエイトIDがあるかを確認します。データが見つかれば、自動的に入力欄（IDが affiliate-id）にその値を表示させます。

２． document.getElementById(“save-btn”).addEventListener
「IDを保存する」ボタンがクリックされた時の処理です。入力欄にあるIDを取得し、chrome.storage.local.set を使ってブラウザに保存します。これで次回から入力が不要になります。

３． document.getElementById(“generate-btn”).addEventListener
「リンクをコピー」ボタンがクリックされた時の処理を開始します。この時、アフィリエイトIDが空欄でないかをチェックし、未入力なら警告を出して処理を中断します。

４． chrome.tabs.query({ active: true, currentWindow: true })
現在ユーザーが実際に開いている（アクティブな）タブの情報を取得します。この処理によって、楽天市場の商品ページのURLを特定することができます。

５． productUrl.match(…
取得したURLが、楽天の「商品ページ」の形式になっているかを正規表現で判定します。商品ページ以外でリンクを作成しようとした場合に注意を促すための安全策です。

６． const affiliateLink = …
あなたのアフィリエイトIDと、商品ページのURLを合体させて、正式なアフィリエイトリンクの形式に組み立てます。encodeURIComponent を使うことで、URL内の記号を正しく処理しています。

７． navigator.clipboard.writeText(affiliateLink)
作成したアフィリエイトリンクを、パソコンのクリップボードに自動的にコピーします。完了後にメッセージを表示することで、ユーザーはすぐにブログやSNSへ貼り付けることができます。

実行

1. 拡張機能をインストールします。
2. 楽天アフィリエイトの管理画面などで、自分のID（例：00000000.aaaaaaa.11111111.bbbbbbb のような文字列）を確認します。
3. 拡張機能のサイドパネルを開き、IDを入力して「IDを保存する」を押します。こうすることで次に開いたときははじめから自分のIDが表示された状態となります。
4. 楽天市場で好きな商品ページを開きます。
5. 「アフィリリンクをコピー」ボタンを押します。
6. 商品ページのアフィリエイトリンクがクリップボードにコピーされます。