I'm trying to inject my content script on twitter but not working. What is the possible solution

Question

 {
   "name": "React Extension",
   "description": "Chrome Extension in React!",
   "version": "1.0.0",
   "manifest_version": 3,
   "icons": {
      "16": "icon.png",
      "48": "icon.png",
      "128": "icon.png"
},
   "action": {
   "default_popup": "popup.html",
   "default_title": "React Extension",
   "default_icon": "icon.png"
   },
   "permissions": ["storage"],
   "options_page": "options.html",
   "background": {
   "service_worker": "background.js"
   },
   "content_scripts": [
                 {
        "matches": ["https://twitter.com/*"],
        "js": ["contentScript.js"],
       "run_at": "document_idle"
     }
   ]
 }




 document.addEventListener('DOMContentLoaded', function() {
     // Your JavaScript function goes here
     loadForm();
 });


 function loadForm() {    
      const target = document.querySelector("input[placeholder='Search']");

      if (target) {
          // Create a new input element
          const newInput = document.createElement("input");
          newInput.type = "text"; // Set the input type as text    
          newInput.placeholder = "Check if tweet is news";
          // Insert the new input element after the existing element
          // If target is the last child, this will insert it at the end
          target.parentNode.insertBefore(newInput, target.nextSibling);
      }
  }
 

As seen is my manifest file and my content-script file. Its continuously not loading on twitter home page. Could there be anything more one can do to inject content-scripts and cause it to show up on twitter?

Answer 1

When you insert with document_idle you're loading it after DOMContentLoaded fires, so instead get rid of DOMContentLoaded or use document_start to load.

If you place a console.log() statement in your content script, you will see it actually fires, but stuff inside DOMContentLoaded will never load.