Max Nardit
カスタム連携

Share2Agent 用のカスタム Webhook レシーバーの作り方

任意の言語で Share2Agent 用のカスタム Webhook レシーバーを構築します。このガイドでは、完全なペイロードスキーマ、Python と Node.js の動作する例、テスト用の curl コマンドを取り上げます。

前提条件

  • Python 3.x または Node.js 18+ (使用するスタック次第)
  • Share2Agent Chrome 拡張機能がインストール済み

ペイロードスキーマ

Share2Agent は JSON ボディ付きの POST リクエストを送ります。すべてのフィールドは次のとおりです。

フィールド型必須説明
urlstringはいページの URL
titlestringはいページのタイトル (<title> タグから取得)
contentstringはい抽出されたクリーンなテキスト (HTML を除去、空白を正規化)
commentstringいいえユーザーの指示またはメモ (未入力の場合は空文字列)
timestampstringはいページが共有された時刻の ISO 8601 タイムスタンプ
metaobjectはいメタデータオブジェクト (下記参照)

meta オブジェクト:

フィールド型説明
descriptionstringページの meta description
og_imagestringOpen Graph 画像 URL
authorstringページの著者 (meta タグから取得)
languagestringページの言語コード (例: en、de)

ペイロード例:

json
{
  "url": "https://example.com/article",
  "title": "Understanding WebSockets",
  "content": "WebSockets provide full-duplex communication channels...",
  "comment": "Save for later review",
  "timestamp": "2026-03-28T12:00:00.000Z",
  "meta": {
    "description": "A guide to WebSocket protocol",
    "og_image": "https://example.com/og.png",
    "author": "Jane Smith",
    "language": "en"
  }
}

Python レシーバー (Flask)

15 行の最小レシーバー:

python
from flask import Flask, request, jsonify
 
app = Flask(__name__)
 
@app.route("/", methods=["POST"])
def receive():
    data = request.get_json()
    if not data or "content" not in data:
        return jsonify({"error": "Missing content"}), 400
 
    print(f"Received: {data.get('title', 'untitled')}")
    print(f"URL: {data.get('url', '')}")
    print(f"Comment: {data.get('comment', '')}")
    print(f"Content length: {len(data.get('content', ''))} chars")
 
    # --- ここに自分のロジック ---
    # データベースに保存、API 呼び出し、パイプラインのトリガーなど
 
    return jsonify({"status": "ok"})
 
if __name__ == "__main__":
    app.run(port=9876)

実行します。

bash
pip install flask
python3 receiver.py

Node.js レシーバー (Express)

同じレシーバーの Node.js 版:

javascript
const express = require("express");
const app = express();
 
app.use(express.json({ limit: "5mb" }));
 
app.post("/", (req, res) => {
  const { title, url, content, comment, meta } = req.body;
  if (!content) return res.status(400).json({ error: "Missing content" });
 
  console.log(`Received: ${title || "untitled"}`);
  console.log(`URL: ${url || ""}`);
  console.log(`Comment: ${comment || ""}`);
  console.log(`Content length: ${(content || "").length} chars`);
 
  // --- ここに自分のロジック ---
 
  res.json({ status: "ok" });
});
 
app.listen(9876, () => console.log("Listening on :9876"));

実行します。

bash
npm install express
node receiver.js

curl でテストする

ブラウザ拡張機能を使わずに Share2Agent の Webhook をシミュレートしてレシーバーをテストします。

bash
curl -X POST http://localhost:9876 \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com/test",
    "title": "Test Page",
    "content": "This is a test of the webhook receiver.",
    "comment": "Testing integration",
    "timestamp": "2026-03-28T12:00:00.000Z",
    "meta": {
      "description": "Test page",
      "og_image": "",
      "author": "",
      "language": "en"
    }
  }'

期待されるレスポンス:

json
{"status": "ok"}

ヒント

  • Content-Type を検証する: パースする前に、リクエストに Content-Type: application/json が付いているか確認します。Share2Agent は常に JSON を送りますが、他のソースは送らないかもしれません。
  • 空のコメントを処理する: ユーザーが何も入力しない場合、comment フィールドは空文字列になります。プロンプトや指示として使う前に確認してください。
  • 最大ボディサイズを設定する: Share2Agent はペイロードを 5 MB に制限します。同じ制限をレシーバーにも設定して悪用を防ぎます (Node では express.json({ limit: "5mb" })、Python では Content-Length をチェック)。
  • CORS ヘッダーを返す: ブラウザからテストする場合は、Access-Control-Allow-Origin: * を追加し、OPTIONS プリフライトリクエストを処理します。Share2Agent は CORS ヘッダーが必要な Chrome 拡張機能のコンテキストからリクエストを送ります。
  • すばやく応答する: Share2Agent はレスポンスを待ちます。処理に数秒以上かかる場合は、すぐに 200 で Webhook を受け付けて、バックグラウンドで処理してください。

次のステップ

  • 認証を追加する: Webhook URL に秘密トークンを含め (例: http://localhost:9876?token=mysecret)、レシーバーで検証します。
  • 処理パイプラインを構築する: メッセージキュー (Redis、RabbitMQ) とレシーバーを連携させ、複数ページを並列に処理します。
  • 公開デプロイする: HTTPS 対応のリバースプロキシ (Caddy、nginx) の背後にレシーバーを置けば、ローカルマシンだけでなく任意のデバイスからページを共有できます。
Share2Agent 用のカスタム Webhook レシーバーを作る