p5.js Web Editor で編集中のコードをローカルに投げる Chrome 拡張機能を作った #JavaScript

本記事では表題の通りの Chrome 拡張機能を作った解説を行います。
対象者は以下の全てに当てはまる人です。

• どうしても p5.js Web Editor で編集したコードをローカルに送付する必要がある
• でも JavaScript を毎回貼り付けるのは面倒

別にスケッチを作るたびに 適当なJavaScript をページにコピペすればいいので、その手間すら惜しい(私のような)人向けです。

なお、「CodeMirror(5系)が含まれるページ」 や 「クライアントサイドレンダリングのページ」 や 「別オリジンでのiframeが含まれるページ」 での拡張機能の書き方についての言及もあるので合わせてお読みください。

もともと Gemini + A.I.VOICE を使ったAIチャットボットを作っていました。
構成はおよそ以下みたいな感じです。

p5.js Web Editor(以下、エディタ) で作業するときの通話に使いたいと思い、コードを共有しようと考えました。

A.I.VOICE Editor APIの都合上、ローカルに送付する必要があるので、拡張機能を実装するのが必要なのでした。

今回の拡張機能で重要になってくるポイントは3点です。

まず

• 「ローカルへのデータ送信方法」

それから「はじめに」でも述べた、

• 「CodeMirrorが含まれるページ」
• 「クライアントサイドレンダリングのページ」
• 「別オリジンでのiframeが含まれるページ」

です。

ローカルへのデータ送信方法

// 受け取る側 (ローカルで動いているプログラムの方)
const wss = new WebSocket.Server({
  port: 8080
});

wss.on("connection", (ws) => {
  console.log("クライアントが接続");

  ws.on("message", async (msg, isBinary) => {
    // ...
  }
});

// content.js (拡張機能の方)
const WS_URL = "ws://localhost:8080";
let ws = new WebSocket(WS_URL);

// ...

ws.send(JSON.stringify(
  {/* ... */}
));

const code:string = document.querySelector(".CodeMirror").CodeMirror.getValue();

// CodeMirror が undefined なのでエラーとなる
const code:string = document.querySelector(".CodeMirror").CodeMirror.getValue();

// inject the page script
const script = document.createElement("script");
script.src = chrome.runtime.getURL("injected.js");
document.getElementsByTagName("body")[0].appendChild(script);
// inject.js からはCodeMirror変数にアクセス可能

{

  // ......

  // "injected.js" を登録する必要がある
  "content_scripts": [{
    "matches": ["https://editor.p5js.org/*"],
    "js": ["content.js", "injected.js"],
    "run_at": "document_idle"
  }]

  // ......

  // "injected.js" を "content.js" から見えるようにする
  "web_accessible_resources": [{
    "resources": ["injected.js"],
    "matches": ["https://editor.p5js.org/*"]
  }],

  // ......
}

// この時点では、まだReact描画中
const cm = document.querySelector(".CodeMirror");
// false
console.log(cm && cm.CodeMirror);

const observer = new MutationObserver(() => {
  const cmEl = document.querySelector(".CodeMirror");
  if (cmEl && cmEl.CodeMirror) {
    observer.disconnect();

    // ...cmEl.CodeMirror を使った処理...
  }
});

observer.observe(document.body, { childList: true, subtree: true });

{
  // ......

  "content_scripts": [
    {
      "matches": ["https://editor.p5js.org/*"],
      "js": ["content.js", "injected.js"],
      "run_at": "document_idle"
    },
    
    // 追加
  
    {
      "matches": ["https://preview.p5js.org/*"],
      "js": ["content_iframe.js"],
      "run_at": "document_idle",

      // これがないとiframeを見てくれない
      "all_frames": true
    }
  ],

  // ......
}

// キャンバスを取得
// あ、そうそう。なぜかiframeは二段重ねになっています。
// だけど、内側のiframeは同一オリジンなのでアクセス可能です。
let canvas = 
  window.document.body.querySelector('iframe')
    .contentDocument.body.querySelector('canvas');

canvas.toBlob(blob => {
  // Canvasの描画内容 (blob) を取得
});