いいねカウントAPIをブックマークレットとChrome拡張機能から使う

⚠️ 現在製作中のため、内容は不正確なことがあります。

LAP では、自分のサイトに <script> で埋め込む ブログパーツ として Like API を使った。本記事では同じ API を、自分のサイト以外でも使える ブックマークレット と Chrome 拡張機能 から呼び出す方法を扱う。

LAP の like.js には window.likeApi という共通インターフェースが公開されている。ブックマークレットも Chrome 拡張機能も、これを再利用するだけで動く。同じ API・同じ like.js を別経路から使い回す体験がゴール。

LAP を完了している前提で進める。LAP で https://mk-like-api.pages.dev/like.js が公開されている状態を想定する。Cloudflare 側の追加作業は不要。

1. 何を作るか

LAP の Like API を、任意の Web ページで呼び出す2通りの仕組みを作る：

• ブックマークレット: ブラウザのブックマークから呼び出す（インストール不要、javascript: URL を1個ブックマークに登録するだけ）
• Chrome 拡張機能: 全ページにいいねボタンを自動で差し込む（拡張機能としてインストール）

全体像：

[ブラウザ]                                       [Cloudflare（LAPで構築済み）]

ブックマークレット
  javascript:...(動的<script>差し込み)
              ↓ load
  like.js (LAP配信)
  window.likeApi.like()                          Pages Functions     D1
              ↓ fetch ──────────────────────→  /api/like/:id  ──→  pages, likes

Chrome 拡張機能
  content_scripts
  + <button> 差し込み
  + like.js を読み込む
              ↓ window.likeApi.like()
              ↓ fetch ──────────────────────→  /api/like/:id  ──→  pages, likes

2つの方法の対比：

	ブックマークレット	Chrome 拡張機能
インストール	不要（ブックマーク登録のみ）	必要（拡張機能を読み込む）
動作タイミング	ブックマーククリック時	ページを開いた瞬間
UI	アラート / コンソール	ページ上にボタンを差し込み
配布	URL（javascript: 文字列）を共有	zip → Chrome ウェブストア
必要な知識	1行のJS	manifest.json + content_scripts
制約	訪問先サイトの CSP	Manifest V3 の permissions

2. 事前準備

2-1. GitHubでリポジトリを作成

GitHub → New repository → リポジトリ名を mk-like-extension で作成。Private にしておく。

名前は別のものでもよい。以降 mk-like-extension と出てきたら自分のリポジトリ名に読み替える。

このリポジトリには Chrome 拡張機能のソース（manifest.json 等）を入れる。ブックマークレットも一緒に管理する（記録用のテキストファイル）。Cloudflare へのデプロイは不要。

2-2. リポジトリを clone する

cd ~/Desktop/claude
git clone git@github.com:ユーザー名/mk-like-extension.git

2-3. Claude Code を起動

Claudeデスクトップアプリを起動。Code → New session → 作業フォルダ ~/Desktop/claude/mk-like-extension を指定。

3. 利用方法1: ブックマークレット

ブラウザのブックマークから JavaScript を実行する仕組み。javascript: で始まる URL をブックマークに登録しておくと、ブックマークをクリックしたときにその時開いているページ上でJSコードが実行される。

3-1. ブックマークレットの実装

ロジックは LAP の like.js に集約されているので、ブックマークレット側は like.js を動的に読み込んで、window.likeApi.like() を呼ぶだけにする。

Claude Code に依頼する。

Claudeへの指示

以下の動作をするブックマークレット（javascript: で始まる1行のJS）を作ってください。

- <script> 要素を動的に作って document.body に追加し、
  src="https://mk-like-api.pages.dev/like.js" を読み込む
- 読み込み完了（onload）後に window.likeApi.like() を呼び出し、
  返り値の { count, liked } をアラートで表示する
  例: 「♥ 42 (新規)」「♥ 42 (既にいいね済み)」

IIFE（即時実行関数）でスコープを汚さないこと。
生成後、bookmarklet.txt に保存してリポジトリで管理できるようにしてください。

3-2. ブックマークに登録して使う

（執筆予定）

1. ブラウザのブックマークバー（または管理画面）から「新規ブックマーク」
2. 名前 に任意（例: Like!）
3. URL に上で生成された javascript:... を貼り付け
4. 任意のページを開いて、ブックマークをクリック
5. アラートに ♥ 42 (新規) のような表示

3-3. CSP（Content Security Policy）の制約

ブックマークレットは外部スクリプト（like.js）を動的に読み込むため、訪問先サイトの CSP が厳しい場合は弾かれることがある。GitHub・Twitter / X・Slack・主要な銀行サイトなど、外部スクリプトを一切許可しないサイトでは動かない。

これはブックマークレットの仕様上の制約。動かない場合は、コンソールに Refused to load the script ... のような CSP 違反メッセージが出る。

CSP の緩いサイト（個人ブログ、note、Qiita、Zenn など）では問題なく動く。

CSP で弾かれる場合の代替手段が、次節の Chrome 拡張機能。拡張機能は CSP を超えて動く特権を持つため、ほぼ全サイトで動かせる。

4. 利用方法2: Chrome 拡張機能

任意のページに「♥ いいね」ボタンを自動で差し込む拡張機能。LAP の like.js をそのまま使うので、共通ロジックの実装は不要。

4-1. Chrome 拡張機能の基本

（執筆予定）

• 拡張機能 = フォルダに manifest.json + JS/HTML/CSS をまとめたもの
• ブラウザに「開発者モード」で読み込ませて動かす
• 公開したければ Chrome ウェブストアに申請

主要な構成要素：

• manifest.json: 拡張機能の設定ファイル（必須）
• content_scripts: 訪問先ページのコンテキストで動く JS
• background.js / service_worker: バックグラウンドで動くスクリプト（任意）
• popup.html: ツールバーアイコンクリック時のUI（任意）
• permissions / host_permissions: 必要な権限の宣言

LEX では content_scripts 中心で構成する。

4-2. manifest.json の作成

（執筆予定）

Claudeへの指示

Chrome 拡張機能の manifest.json を作って。Manifest V3 で。

- name: Like Button Injector
- version: 0.1.0
- description: 任意のページに「いいね」ボタンを差し込む
- content_scripts: matches に <all_urls>、js に content.js
- host_permissions: https://mk-like-api.pages.dev/* を追加

host_permissions に LAP の API オリジンを指定することで、content_scripts から fetch ができる。

4-3. content_scripts で LAP の like.js を使う

（執筆予定）

Chrome 拡張機能の content_scripts からは、自前で like.js を読み込んで window.likeApi を使う。直接 fetch を書いてもよいが、LAP と同じロジックを使い回すほうが保守が楽。

Claudeへの指示

content.js を作って。以下の動作をする。

- ページに <button id="like-ext-button" style="position:fixed; bottom:20px; right:20px; z-index:9999; ...">♥</button> を差し込む
- <script> を動的に作って src="https://mk-like-api.pages.dev/like.js" を読み込む
- 読み込み完了後、window.likeApi.getCount() でカウント取得、ボタン表示
- ボタンクリックで window.likeApi.like() を呼び、ボタン表示を更新

ブックマークレットと拡張機能、どちらも 同じ like.js を読み込んで、同じ window.likeApi を使う。「フロントの届け方が違うだけで、本体は1つ」。

4-4. permissions と CSP の関係

（執筆予定）

• host_permissions: ["https://mk-like-api.pages.dev/*"] で fetch 先を明示
• 拡張機能の content_scripts は通常のページとは別の「分離されたワールド」で動くため、訪問先サイトの CSP の影響を受けにくい
• ただし <button> をページの DOM に差し込む処理は、訪問先サイトの DOM/CSP の影響を受ける場合がある

ブックマークレットでは弾かれる CSP 厳しめサイトでも、拡張機能なら動かせるケースが多い。これが拡張機能を使う最大のメリット。

4-5. ローカルで読み込んで動作確認

（執筆予定）

1. Chrome のアドレスバーに chrome://extensions/ を入力
2. 右上の デベロッパーモード をオン
3. パッケージ化されていない拡張機能を読み込む をクリック
4. ~/Desktop/claude/mk-like-extension フォルダを選択
5. 任意のページを開く → 右下に「♥」ボタンが出る → クリックでカウント増加

問題があれば chrome://extensions/ で拡張機能の エラー や Service worker のログ を確認する。

4-6. (任意) Chrome ウェブストアへの公開

（執筆予定）

個人で使うだけなら不要。公開したい場合：

• Chrome ウェブストアデベロッパー登録（初回 $5）
• アイコン・スクリーンショット・説明文を用意
• zip にして審査に出す
• レビュー通過後に公開

審査では「権限の妥当性」「プライバシーポリシー」「説明文の正確さ」などが見られる。

5. 2つの方法の使い分け

（執筆予定）

状況	向いている方法
自分専用、すぐ試したい	ブックマークレット
友達にも配りたい	ブックマークレット（URL共有）
全ページに自動で出したい	Chrome 拡張機能
CSP 厳しめサイトで動かしたい	Chrome 拡張機能
Chrome ウェブストアで配布したい	Chrome 拡張機能

両方とも本質的には「LAP の window.likeApi を呼ぶだけ」。実装の手間と機能性のトレードオフで選ぶ。

6. 制約と注意点

（執筆予定）

• CSP: 訪問先サイトの CSP がブックマークレットを弾く場合あり（拡張機能なら回避可能）
• DOM 構造: サイトによっては差し込むボタンの位置調整が必要
• SPA: ページ遷移が JS で行われるサイトでは、URL が変わってもボタンが更新されない場合がある（MutationObserver などで対応）
• プライバシー: <all_urls> 権限は強い。本番運用なら matches を絞る
• LAP 側の停止: LAP の API が落ちると、ブックマークレットも拡張機能も動かない（共通の依存）

7. 発展課題

（執筆予定）

• popup UI: ツールバーアイコンから現在ページのカウントを表示
• オプションページ: 動作対象サイトを制限できる設定画面
• chrome.storage: 拡張機能スコープで UUID を保持（localStorage より安定）
• ボタンの見た目: ハートアニメーション、テーマ対応
• 複数サービス対応: LAP 以外の API も叩けるようにする（設定で API URL を切り替え）
• ブックマークレット集: 同じパターンで「閲覧履歴を記録」「ページ要約を送る」など、他用途のブックマークレットも作る