feat: Add support for Google Docs and enhance editable element detection

Author: danielehrhardt

src/entrypoints/content.ts

@@ -70,7 +70,7 @@ export default defineContentScript({
           childList: true,
           subtree: true,
           attributes: true,
-          attributeFilter: ["contenteditable", "role"],
+          attributeFilter: ["contenteditable", "role", "g_editable"],
         });
       }
 
@@ -88,7 +88,7 @@ export default defineContentScript({
 
       private scanExistingElements() {
         const textareas = document.querySelectorAll(
-          'textarea, input, [contenteditable="true"], [role="textbox"]'
+          'textarea, input, [contenteditable="true"], [role="textbox"], [g_editable="true"]'
         );
         textareas.forEach((el) => {
           if (el instanceof HTMLElement && isEditableElement(el)) {
@@ -124,7 +124,7 @@ export default defineContentScript({
 
         // Check children
         const editables = element.querySelectorAll(
-          'textarea, input, [contenteditable="true"], [role="textbox"]'
+          'textarea, input, [contenteditable="true"], [role="textbox"], [g_editable="true"]'
         );
         editables.forEach((el) => {
           if (
@@ -167,6 +167,193 @@ export default defineContentScript({
     const textareaObserver = new TextareaObserver();
     textareaObserver.start();
 
+    // Google Docs Handler - special support for Google Docs canvas-based editor
+    class GoogleDocsHandler {
+      private observer: MutationObserver | null = null;
+      private checkDebounceTimer: ReturnType<typeof setTimeout> | null = null;
+      private isActive = false;
+      private lastText = "";
+
+      isGoogleDocs(): boolean {
+        return (
+          window.location.hostname === "docs.google.com" &&
+          window.location.pathname.includes("/document/")
+        );
+      }
+
+      getDocMode(): "canvas" | "legacy" | "unknown" {
+        if (document.querySelector(".kix-canvas-tile-content svg")) {
+          return "canvas";
+        } else if (document.querySelector(".kix-paragraphrenderer")) {
+          return "legacy";
+        }
+        return "unknown";
+      }
+
+      extractText(): string {
+        const mode = this.getDocMode();
+
+        if (mode === "canvas") {
+          return this.extractTextFromCanvas();
+        } else if (mode === "legacy") {
+          return this.extractTextFromDOM();
+        }
+        return "";
+      }
+
+      private extractTextFromCanvas(): string {
+        const paragraphs: string[] = [];
+        const svgGroups = document.querySelectorAll(
+          ".kix-canvas-tile-content svg > g[role=paragraph]"
+        );
+
+        svgGroups.forEach((group) => {
+          const rects = group.querySelectorAll("rect[aria-label]");
+          let prevText = "";
+          const words: string[] = [];
+
+          rects.forEach((rect) => {
+            const text = rect.getAttribute("aria-label");
+            if (text && text !== prevText) {
+              words.push(text);
+              prevText = text;
+            }
+          });
+
+          if (words.length > 0) {
+            paragraphs.push(words.join(""));
+          }
+        });
+
+        return paragraphs.join("\n");
+      }
+
+      private extractTextFromDOM(): string {
+        const paragraphs: string[] = [];
+        const paraElements = document.querySelectorAll(".kix-paragraphrenderer");
+
+        paraElements.forEach((para) => {
+          const lines = para.querySelectorAll(".kix-lineview");
+          const lineTexts: string[] = [];
+
+          lines.forEach((line) => {
+            const words = line.querySelectorAll(
+              ".kix-wordhtmlgenerator-word-node"
+            );
+            let lineText = "";
+
+            words.forEach((word) => {
+              let text = word.textContent || "";
+              text = text.replace(/[\u200B\u200C]/g, "").replace(/\u00A0/g, " ");
+              lineText += text;
+            });
+
+            if (lineText) {
+              lineTexts.push(lineText);
+            }
+          });
+
+          if (lineTexts.length > 0) {
+            paragraphs.push(lineTexts.join(" "));
+          }
+        });
+
+        return paragraphs.join("\n");
+      }
+
+      getEditorElement(): HTMLElement | null {
+        return document.querySelector(".kix-appview-editor");
+      }
+
+      start() {
+        if (!this.isGoogleDocs() || this.isActive) return;
+
+        const editor = this.getEditorElement();
+        if (!editor) {
+          setTimeout(() => this.start(), 1000);
+          return;
+        }
+
+        this.isActive = true;
+        activeElement = editor;
+
+        this.observer = new MutationObserver(() => {
+          this.scheduleCheck();
+        });
+
+        this.observer.observe(editor, {
+          childList: true,
+          subtree: true,
+          characterData: true,
+        });
+
+        if (settings.checkMode === "realtime") {
+          this.scheduleCheck();
+        }
+      }
+
+      private scheduleCheck() {
+        if (!settings.enabled || settings.checkMode !== "realtime") return;
+
+        if (this.checkDebounceTimer) {
+          clearTimeout(this.checkDebounceTimer);
+        }
+
+        this.checkDebounceTimer = setTimeout(() => {
+          this.performCheck();
+        }, settings.realtimeDelay);
+      }
+
+      private async performCheck() {
+        if (isChecking) return;
+
+        const text = this.extractText();
+        if (text.length < 10 || text === this.lastText) return;
+
+        this.lastText = text;
+        isChecking = true;
+        showStatusButton("loading");
+
+        try {
+          const result = await checkGrammarRequest(text);
+          if (result) {
+            currentSuggestions = result.suggestions;
+            if (currentSuggestions.length > 0) {
+              showStatusButton("errors", currentSuggestions.length);
+            } else {
+              showStatusButton("clean");
+            }
+          }
+        } catch (error) {
+          console.error("Google Docs grammar check error:", error);
+          hideStatusButton();
+        } finally {
+          isChecking = false;
+        }
+      }
+
+      triggerManualCheck() {
+        if (!this.isActive) return;
+        this.performCheck();
+      }
+
+      stop() {
+        if (this.checkDebounceTimer) {
+          clearTimeout(this.checkDebounceTimer);
+          this.checkDebounceTimer = null;
+        }
+        if (this.observer) {
+          this.observer.disconnect();
+          this.observer = null;
+        }
+        this.isActive = false;
+        this.lastText = "";
+      }
+    }
+
+    const googleDocsHandler = new GoogleDocsHandler();
+    googleDocsHandler.start();
+
     // Styles for Shadow DOM
     const STYLES = `
       * {
@@ -1224,25 +1411,29 @@ export default defineContentScript({
 
     // Message listener for keyboard shortcut
     browser.runtime.onMessage.addListener((message) => {
-      if (message.type === "TRIGGER_CHECK" && activeElement) {
-        const text = getTextFromElement(activeElement);
-        if (text.length > 3) {
-          showStatusButton("loading");
-          checkGrammarRequest(text, true)
-            .then((result) => {
-              if (result) {
-                currentSuggestions = result.suggestions;
-                renderUnderlines();
-                if (currentSuggestions.length > 0) {
-                  showStatusButton("errors", currentSuggestions.length);
-                } else {
-                  showStatusButton("clean");
+      if (message.type === "TRIGGER_CHECK") {
+        if (googleDocsHandler.isGoogleDocs()) {
+          googleDocsHandler.triggerManualCheck();
+        } else if (activeElement) {
+          const text = getTextFromElement(activeElement);
+          if (text.length > 3) {
+            showStatusButton("loading");
+            checkGrammarRequest(text, true)
+              .then((result) => {
+                if (result) {
+                  currentSuggestions = result.suggestions;
+                  renderUnderlines();
+                  if (currentSuggestions.length > 0) {
+                    showStatusButton("errors", currentSuggestions.length);
+                  } else {
+                    showStatusButton("clean");
+                  }
                 }
-              }
-            })
-            .catch(() => {
-              hideStatusButton();
-            });
+              })
+              .catch(() => {
+                hideStatusButton();
+              });
+          }
         }
       }
     });
@@ -1301,6 +1492,7 @@ export default defineContentScript({
 
     ctx.onInvalidated(() => {
       textareaObserver.stop();
+      googleDocsHandler.stop();
       cleanup();
       if (unwatchSettings) unwatchSettings();
     });

src/lib/utils.ts

@@ -68,6 +68,9 @@ export function isEditableElement(element: Element): boolean {
   // Check for common rich text editor patterns
   if (element.getAttribute('role') === 'textbox') return true;
 
+  // Gmail-specific editable attribute
+  if (element.getAttribute('g_editable') === 'true') return true;
+
   return false;
 }