ClaudeでChrome拡張を作ってみる 〜WebサイトのQRコード発行
Claudeを課金してしまったので、仕方なく（＾＾； 色々使っています。
codeも試してみねば
QRコード生成の拡張機能をお願いした
”chromeの拡張機能を作って 現在のページのQRコードを生成してスマホで開きやすく”
Chrome拡張機能を作成します。現在のページのURLをQRコードにして表示する拡張機能ですね。
まず作業ディレクトリを確認して、実装を進めます。
Update Todos Creating manifest.json Create QR code generation library Create popup HTML/CSS Create popup JavaScript Create extension icon Write /Users/tomoya/Dropbox/93_Claude/code/qr-page-extension/manifest.json Update Todos Create manifest.json Creating QR code library Create popup HTML/CSS Create popup JavaScript Create extension icon (SVG) QRコード生成ライブラリを軽量に自前実装します。 Write /Users/tomoya/Dropbox/93_Claude/code/qr-page-extension/qrcode.min.js Update Todos Create manifest.json Create QR code generation library Creating popup UI Create popup JavaScript Create extension icon (SVG) Write /Users/tomoya/Dropbox/93_Claude/code/qr-page-extension/popup.html Update Todos Create manifest.json Create QR code generation library Create popup HTML/CSS Creating popup logic Create extension icons Write /Users/tomoya/Dropbox/93_Claude/code/qr-page-extension/popup.js Update Todos Create manifest.json Create QR code generation library Create popup HTML/CSS Create popup JavaScript Creating extension icons アイコンをPNGで生成します。Canvasを使ったNode.jsスクリプトは使えないので、シンプルなSVGからPNGを変換します。 Bash mkdir -p /Users/tomoya/Dropbox/93_Claude/code/qr-page-extension/icons Bash which python3 && python3 -c “from PIL import Image; print('PIL available’)" 2>/dev/null || echo “No PIL" /usr/bin/python3 No PIL Bash which sips && echo “sips available" /usr/bin/sips sips available macOSのsipsを使ってSVGからPNGアイコンを生成します。 Write /Users/tomoya/Dropbox/93_Claude/code/qr-page-extension/icons/icon.svg Bash cd /Users/tomoya/Dropbox/93_Claude/code/qr-page-extension/icons && python3 -c " import subprocess import os svg_file = 'icon.svg’ sizes = [16, 48, 128] for size in sizes: output = f’icon{size}.png’ # Use sips to convert – first create a large PNG, then resize # Use the qlmanage approach for SVG to PNG on macOS subprocess.run(['qlmanage’, '-t’, '-s’, str(size), '-o’, '.’, svg_file], capture_output=True) # qlmanage creates file with .svg.png extension src = f'{svg_file}.png’ if os.path.exists(src): os.rename(src, output) print(f’Created {output}’) else: print(f’Failed to create {output}’) " Created icon16.png Created icon48.png Created icon128.png Bash ls -la /Users/tomoya/Dropbox/93_Claude/code/qr-page-extension/icons/ total 56 drwxr-xr-x@ 6 tomoya staff 192 Feb 8 06:36 . drwxr-xr-x@ 7 tomoya staff 224 Feb 8 06:35 .. もっと表示 Update Todos Create manifest.json Create QR code generation library Create popup HTML/CSS Create popup JavaScript Create extension icons Chrome拡張機能「QR Page」が完成しました。ファイル構成は以下の通りです: qr-page-extension/ ├── manifest.json # Manifest V3 設定 ├── popup.html # ポップアップUI ├── popup.js # 現在のタブのURLを取得しQR生成 ├── qrcode.min.js # QRコード生成ライブラリ └── icons/ ├── icon16.png ├── icon48.png └── icon128.pngChrome拡張のインストール方法
インストール方法についても何も言わなくても出てきました。
- Chromeで
chrome://extensions/を開く - 右上の「デベロッパーモード」をONにする
- 「パッケージ化されていない拡張機能を読み込む」をクリック
/Users/tomoya/Dropbox/93_Claude/code/qr-page-extensionフォルダを選択
使い方:
- ツールバーのQRアイコンをクリックするだけで、現在のページのQRコードが表示されます
- スマホのカメラで読み取れば、そのページをスマホで開けます
ということで早速インストール ディベロッパーモードにして拡張機能を読み込んでみます。
早速はいりました。アイコンも作ってくれるのはいいですね。
完成した！ が・・・
できましたね・・・ぽんっと QRコードが生成できました。しかし、うまく読み込めませんでした。。。
ということで、再度お願いしました。
”QRコードのような画像が生成はできましたが、読み取れないです 修正して”
なんか色々間違いを見つけて修正してくれたみたいです。 今度はうまくいきました。 すごいね。
そんなところで
