How can I create a simple chrome extension to automatically fill in text when a selector (text box) is detected?

Question

I've searched for this for quite a while and found some solutions relying on mutationobserver (How to wait until an element exists?). However, I don't understand how to lay a project out like this. I don't know how the manifest would look like and how it would interact with the .js files. I don't know if there would be a background.js or a content script. I'm pretty new to building chrome extensions. Can somebody provide a solution (with file names)? so, when a selector becomes visible (after a drop down is clicked, exposing it, for example) text is sent to that selector via something like:

document.getElementById("Note_2").value = "text sent";

tried this:

popup.js

  elementLoaded('1662123261320', function(el) {
    // Element is ready to use.
    el.click(function() {
      alert("You just clicked a dynamically inserted element");
    });
  });

manifest.json

{
    "manifest_version": 2,

    "name": "Content Scripts example",
    "description": "A simple content_scripts example.",
    "version": "1.0",
    "content_scripts": [
     {
        "matches": ["http://news.163.com/*","file://*"],
        "js": ["popup.js"]
     }
    ],
    "permissions": [
        "<all_urls>"
    ]  
}

on this site:

https://inputtypes.com/

doesn't alert. still trying

tried adding the text dropdown as well: "#\31 662123564414-inputType". nothing happens

tried this on paypal.com as well.. login button:

waitForElementToDisplay("#ul-btn",function(){alert("Hi");},1000,9000);

anybody know why it's not working?

edit: I kind of got it... I can get it to alert when an element is present, but not to send text to that element. paypal login:

// Call the below function
waitForElementToDisplay("#email",function(){
  
  document.getElementById("#email").value = "N/A";
  
  },1000,9000);

function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) {
  var startTimeInMs = Date.now();
  (function loopSearch() {
    if (document.querySelector(selector) != null) {
      callback();
      return;
    }
    else {
      setTimeout(function () {
        if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
          return;
        loopSearch();
      }, checkFrequencyInMs);
    }
  })();
}

anybody know why the text wont prefill?

hmm none of the solutions I try are working. i'll add my code — pRedB234, Sep 02 '22 at 12:57

score 0 · Answer 1 · answered Sep 02 '22 at 13:24

ok this works just had to remove the #

paypal login page:

// Call the below function
waitForElementToDisplay("#email",function(){
  
  document.getElementById("email").value = "N/A";
  
  },1000,9000);

function waitForElementToDisplay(selector, callback, checkFrequencyInMs, timeoutInMs) {
  var startTimeInMs = Date.now();
  (function loopSearch() {
    if (document.querySelector(selector) != null) {
      callback();
      return;
    }
    else {
      setTimeout(function () {
        if (timeoutInMs && Date.now() - startTimeInMs > timeoutInMs)
          return;
        loopSearch();
      }, checkFrequencyInMs);
    }
  })();
}

How can I create a simple chrome extension to automatically fill in text when a selector (text box) is detected?

1 Answers1