How to inject a link to ChatGPT left menu bar using chrome plugin/extension

Question

I am trying to inject a link to ChatGPT left menu bar using chrome extension similar to AIPRM for ChatGPT chrome extension is inserting additional menu items.

enter image description here

I am using the following but not working.

menifest.json:

{
  "name": "Auto Snippet AI",
  "version": "1.0",
  "description": "Inject a URL called 'https://autosnippet.ai/' to the left navigation bar of 'https://chat.openai.com/'",
  "manifest_version": 3,
  "permissions": [
    "activeTab",
    "tabs"
  ],
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "content_scripts": [
    {
      "js": [
        "content.js"
      ],
      "matches": [
        "https://chat.openai.com/*"
      ]
    }
  ]
}

content.js:

document.addEventListener('DOMContentLoaded', function () {
    // Find the nav div
    const nav = document.querySelector("#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\\:flex.md\\:w-\\[260px\\].md\\:flex-col > div > div > nav");

    // Check if the nav div exists
    if (nav) {
        // Create a new link for the Auto Snippet AI website
        const a = document.createElement('a');
        a.classList.add('nav-item');
        a.href = 'https://autosnippet.ai/';
        a.target = '_blank';
        a.innerText = 'Auto Snippet AI';

        // Insert the link into the nav div
        nav.insertBefore(a, nav.lastChild);
    }
}); 

So, I want to inject a link "Auto Snippet AI" in left menu bar similar to AIPRM is injecting a link "AIPRM for SEO powered" when installed. Any suggestion and help will be highly appreciable.

Answer 1

Looks like DOMContentLoaded event isn't firing. https://stackoverflow.com/a/39993724/9814969

Or you can add "run_at" : "document_end" in the manifest.json

...
  "content_scripts": [
    {
      "js": ["content.js"],
      "matches": ["https://chat.openai.com/*"],
      "run_at": "document_end"
    }
  ]
...

so the content.js would look like this without the addEventListener

const nav = document.querySelector(
    "#__next > div.overflow-hidden.w-full.h-full.relative.flex > div.dark.hidden.bg-gray-900.md\\:flex.md\\:w-\\[260px\\].md\\:flex-col > div > div > nav"
  );

  // Check if the nav div exists
  if (nav) {
    // Create a new link for the Auto Snippet AI website
    const a = document.createElement("a");
    a.classList.add("nav-item");
    a.href = "https://autosnippet.ai/";
    a.target = "_blank";
    a.innerText = "Auto Snippet AI";

    // Insert the link into the nav div
    nav.insertBefore(a, nav.lastChild);
  }