开发skribbl.io绘图Chrome扩展：如何修改画布让其他用户可见？

Hey there! Let's break down how to fix this issue—since you're transitioning from a Java bot to a Chrome extension, the core problem here is understanding how skribbl.io actually syncs drawing data between users. Directly modifying the local canvas context only updates your own view because the server has no idea you made those changes. Here's what you need to do:

1. Understand Skribbl.io's Sync Mechanism #

Skribbl.io uses WebSocket to send drawing instructions from your browser to its server, which then broadcasts those instructions to all other users in the room. When you draw manually, your browser sends structured data (like coordinates, color, brush size) to the server—not just raw canvas pixel data. That's why modifying the canvas locally doesn't show up for others: you're skipping the server step entirely.

2. Capture the Exact Drawing Message Format #

First, you need to figure out what those WebSocket messages look like. Here's how to inspect them:

• Open skribbl.io in Chrome, start a private room, and open DevTools (F12).
• Go to the Network tab, filter by WS (WebSocket). You'll see an active connection to skribbl.io's server.
• Click into that connection, switch to the Frames tab. Now draw a few lines manually—you'll see outgoing messages appear in the list.
• Inspect those messages (they're usually JSON) to identify the structure. For example, it might look something like this:

  {"type":"draw","lines":[{"x":150,"y":220,"color":"#000000","size":4}]}
  

  Note key details like the type field, the lines array of coordinate/property objects, and how color/size are formatted.

3. Inject Code to Send Custom WebSocket Messages #

Now that you know the message format, you need to send these structured messages directly from your extension to the server. Here's how to implement this in a Chrome Content Script:

• Hook into the WebSocket instance: Skribbl.io creates a WebSocket object when the page loads. Inject code to capture this instance for later use:

  // Inject this code into the page context from your content script
  const originalWebSocket = window.WebSocket;
  window.WebSocket = function(...args) {
    const socket = new originalWebSocket(...args);
    // Save the socket to a global variable your bot can access
    window.skribblSocket = socket;
    return socket;
  };
  

• Grab current drawing settings: Before sending messages, pull the active color and brush size from the page's DOM elements:

  const currentColor = document.querySelector('.color-picker__input').value;
  const currentBrushSize = document.querySelector('.brush-size__input').value;
  

• Construct and send your drawing commands: Convert your bot's drawing logic into the message format you captured. For example, to draw a line from (100,100) to (200,200):

  const drawMessage = {
    type: "draw",
    lines: [
      { x: 100, y: 100, color: currentColor, size: currentBrushSize },
      { x: 200, y: 200, color: currentColor, size: currentBrushSize }
    ]
  };
  // Send the message via the captured socket
  window.skribblSocket.send(JSON.stringify(drawMessage));
  

4. Why This Works Better Than Simulating Mouse Clicks #

This approach mirrors exactly how the site's own drawing tool works—you're sending the same data a human user would, just programmatically. It's faster, more reliable, and avoids the clunky mouse simulation you wanted to skip (which is what your Java Robot implementation relied on).

Important Notes #

• Skribbl.io might tweak its WebSocket message format occasionally, so you may need to re-inspect the messages if your bot stops working.
• Make sure your extension's Content Script runs early enough (use "run_at": "document_start" in your manifest.json to hook the WebSocket before the page creates it).

内容的提问来源于stack exchange，提问作者user10364171