SITUATION

I’m creating a Chrome extension to automatically fill out Zendesk’s ticket forms.

PROBLEM

One of the things it does is insert text into a CKEditor on the page. However, CKEditor cannot be found on the DOM element by the extension.

Strangely, the same exact code works perfectly fine when I run it in the console.

NOT A TIMING ISSUE

This does NOT seem to be a timing issue. I verified this in multiple ways, including:

• Firstly, the action that looks for the CKEditor element only takes place when a button is clicked on. This is not a debug attempt but the way the extension should work by default.
• Adding very long 10s+ timeouts before the extension does anything at all, including adding the custom buttons to the UI.
• Running a test script that selected the element and kept logging it, which appear correctly, in the console every second or so and only then pressing the button. The console logs I added to the extension that run on button press then show an element that is almost identical to the one logged by the test script except it has no CKEditor. Screenshot below.
• Creating an ultra simplified extension, shown below.

I’VE ALSO TRIED

• Asking ChatGPT to generate a manifest.json file with ALL possible permissions, running on ALL URLs.
• Fiddling with the manifest such as by changing when the script runs.

CODE

Here’s an ultra simplified version of the extension that replicates the issue. It works perfectly when ran in the console, always.

function insertTicketReply() {
    const element = document.querySelector('[data-test-id="standalone-rich-text-ckeditor"]');

    if (element.ckeditorInstance) {
        console.log("EDITOR FOUND!!!!!!!!!!!!!!!!");
        element.ckeditorInstance.setData("test");
    } else {
        console.dir(element);
    }
}

setTimeout(insertTicketReply, 10000);

WHAT IT LOOKS LIKE WHEN RUNNING IN THE CONSOLE

WHAT IT LOOKS LIKE WHEN USING THE EXTENSION

NOTICE THE MISSING CKEDITOR IN THE ELEMENT

MANIFEST

{
  "manifest_version": 3,
  "name": "Happiness Hub - Zendesk",
  "version": "1.0",
  "description": "Automates filling out Zendesk tickets for strikingly.zendesk.com.",
  "permissions": [
    "activeTab",
    "storage",
    "tabs"
  ],
  "host_permissions": [
    "<all_urls>"
  ],
  "content_scripts": [
    {
      "matches": ["https://strikingly.zendesk.com/*"],
      "js": ["dist/content.js"],
      "run_at": "document_idle",
      "all_frames": true
    }
  ],
  "background": {
    "service_worker": "src/background.js"
  },
  "action": {
    "default_popup": "src/popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}