inject.js

// Google Docs Image Expander — page-level hooks (MAIN world)
// Intercepts canvas drawImage calls to capture document images
// painted by Google Docs' canvas-based rendering engine.
(function () {
  "use strict";

  const bitmapSources = new WeakMap(); // ImageBitmap -> source URL

  // --- Hook createImageBitmap to track source URLs ---
  const origCreateImageBitmap = window.createImageBitmap;
  if (origCreateImageBitmap) {
    window.createImageBitmap = function (source, ...args) {
      return origCreateImageBitmap.call(this, source, ...args).then((bitmap) => {
        let src = null;
        if (source instanceof HTMLImageElement) {
          src = source.src;
        } else if (source instanceof Blob && source._gdieUrl) {
          src = source._gdieUrl;
        }
        if (src) bitmapSources.set(bitmap, src);
        return bitmap;
      });
    };
  }

  // --- Hook fetch to tag image blobs with their source URL ---
  const origFetch = window.fetch;
  window.fetch = function (input, init) {
    const url = typeof input === "string" ? input : input?.url;
    return origFetch.call(this, input, init).then((response) => {
      if (url && /\.(png|jpg|jpeg|gif|webp|svg|bmp)/i.test(url)) {
        const origBlob = response.blob.bind(response);
        response.blob = function () {
          return origBlob().then((blob) => {
            blob._gdieUrl = url;
            return blob;
          });
        };
      }
      return response;
    });
  };

  // --- Hook drawImage to capture images painted onto canvas ---
  const origDrawImage = CanvasRenderingContext2D.prototype.drawImage;
  CanvasRenderingContext2D.prototype.drawImage = function (source, ...args) {
    let src = null;
    let naturalW = 0;
    let naturalH = 0;

    if (source instanceof HTMLImageElement) {
      src = source.src;
      naturalW = source.naturalWidth;
      naturalH = source.naturalHeight;
    } else if (source instanceof ImageBitmap) {
      src = bitmapSources.get(source);
      naturalW = source.width;
      naturalH = source.height;
    }

    if (src && naturalW > 100 && naturalH > 100) {
      let dx = 0, dy = 0, dw = naturalW, dh = naturalH;
      if (args.length >= 8) {
        dx = args[4]; dy = args[5]; dw = args[6]; dh = args[7];
      } else if (args.length >= 4) {
        dx = args[0]; dy = args[1]; dw = args[2]; dh = args[3];
      } else if (args.length >= 2) {
        dx = args[0]; dy = args[1];
      }

      const matrix = this.getTransform();
      const actualX = matrix.a * dx + matrix.c * dy + matrix.e;
      const actualY = matrix.b * dx + matrix.d * dy + matrix.f;
      const actualW = Math.abs(dw * matrix.a);
      const actualH = Math.abs(dh * matrix.d);

      const canvas = this.canvas;
      if (canvas && !canvas.dataset.gdieId) {
        canvas.dataset.gdieId = "gdie-" + Math.random().toString(36).slice(2, 8);
      }

      window.postMessage({
        type: "gdie-image-captured",
        src: src,
        canvasId: canvas?.dataset.gdieId || "",
        x: actualX,
        y: actualY,
        w: actualW,
        h: actualH,
      }, "*");
    }

    return origDrawImage.call(this, source, ...args);
  };
})();