Google Chrome拡張機能はJavaScriptが中心の世界ですが、Pythonを使ってローカルサーバーと連携することで、Chrome拡張の可能性を大きく広げられます。本記事では、PythonとFlaskもしくはFastAPIを使ってChrome拡張機能と通信する方法を、初心者向けにやさしく解説します。
目次
1. Chrome拡張機能の基本構造
拡張機能には最低限、次の3つのファイルが必要です：
manifest.json（拡張機能の設定ファイル）popup.html（拡張機能のUI）popup.js（JavaScriptの動作）
manifest.json の例
{
"manifest_version": 3,
"name": "Python連携拡張機能",
"version": "1.0",
"description": "Pythonサーバーと通信する拡張機能",
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon.png"
}
},
"permissions": ["storage"],
"icons": {
"16": "icon.png"
}
}popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拡張機能</title>
</head>
<body>
<button id="fetchMessage">メッセージを取得</button>
<p id="result"></p>
<script src="popup.js"></script>
</body>
</html>popup.js
document.getElementById("fetchMessage").addEventListener("click", () => {
fetch("http://127.0.0.1:5000/api/message")
.then((res) => res.json())
.then((data) => {
document.getElementById("result").textContent = data.message;
});
});2. PythonでAPIサーバーを作成
ここでは Flask と FastAPI の両方の方法を紹介します。
2-1. FlaskでAPIを作る
パッケージのインストール
pip install flask flask_corsapp.py（Flask）
from flask import Flask, jsonify, make_response
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/')
def home():
return 'Flaskサーバーが起動しています'
@app.route('/api/message')
def get_message():
response = make_response(jsonify({"message": "こんにちは！Pythonからのメッセージです。"}))
response.headers["Content-Type"] = "application/json; charset=utf-8"
return response
if __name__ == '__main__':
app.run(port=5000)2-2. FastAPIでAPIを作る
パッケージのインストール
pip install fastapi uvicornmain.py（FastAPI）
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from fastapi.responses import JSONResponse
app = FastAPI()
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_methods=["*"],
allow_headers=["*"],
)
@app.get("/")
def read_root():
return "FastAPIサーバーが起動しています"
@app.get("/api/message")
def get_message():
return JSONResponse(content={"message": "こんにちは！FastAPIからのメッセージです。"}, media_type="application/json;charset=utf-8")実行コマンド
uvicorn main:app --port 5000 --reload3. よくあるトラブルと対処法
- アイコン画像が反映されない → PNGファイル（例：16×16）のパスが正しく指定されているか確認。
- Not Found が表示される → Pythonアプリに
/のルートを追加しておく。 - 日本語が文字化けする → レスポンスヘッダーに
charset=utf-8を指定。 - CORSエラー → Flask では
flask_cors、FastAPI ではCORSMiddlewareを使用。 - background.js のログが見えない → 拡張機能のページで「サービスワーカー」横の「インスペクト」で確認。
4. 拡張機能の応用アイデア
- 画面内の選択テキストを取得してPythonで翻訳
- Pythonでスクレイピングし、拡張機能で結果を表示
- ChatGPT APIと連携した自動返信ツール
- FlaskやFastAPIでPDF生成、拡張機能でダウンロード
まとめ
Chrome拡張機能とPython（FlaskまたはFastAPI）を組み合わせれば、フロントエンドとバックエンドの両方を自分でコントロールすることができます。
初心者でも「Hello World」から始めて、データ取得や外部API連携まで挑戦できるので、ぜひ試してみてください！
