Why doesn't my browser extension script work on some sites?

Question

JavaScript

Hello. I have a simple browser extension.

I want to catch the moment of pressing a button on a certain site, but it does not work.
The strange thing is that I catch the button by the id assigned to the desired button, but it works on one site, but not on another site.

What could be the problem?

{
  "manifest_version": 2,
  "name": "test",
  "version": "1.0.0",
  "content_scripts": [
    {
      "matches": ["*://*.mysite.ru/*"],
      "js": ["jquery.js", "content.js"]
    }
  ],
    "browser_action": {
    "default_icon": "favicon.ico"
      }
}

$(document).ready(function(){  
    $("#button_id" ).click(function(){
      alert("HELLO");
    });
  });

Actually, I tested it on my site, of course, the site address and button id indicated the correct ones.
For this option, everything works:

<a href="#" id="button_id">test</a>

And on another site, it does not want to catch the click. I repeat, I specify the correct site, the button id is also correct, and I also update the extension.

True, the desired site does not load as quickly as mine with one line of code.
Perhaps this is somehow related?

Answer 1

Most likely, the problem is that at the time of running the code from content.js , your button is still missing from the page.
I will give you a clicker function from one of my extensions, use it:

asynchronous clicker function

function clickElements(selector, regexp, where) {
  
  return new Promise(function(returnResult) {
    
    var search_result = false;
    
    var local_reactive_function = function() {
      
      var click_elements = searchElements(selector, regexp, where);
      
      if (click_elements.length > 0) {
        
        if (search_result === false) {
          
          search_result = true;
          observer.disconnect(); 
          
          setTimeout(function() {
            
            var click_elements = searchElements(selector, regexp, where);
            
            for (var n = 0; n < click_elements.length; n++) {
              click_elements[n].click();
            }
            
            returnResult(click_elements.length);
            
          }, 1000);
          
        }
        
      }
      
    }
    
    var observer = new MutationObserver(local_reactive_function);
    
    observer.observe(document.body, {
      characterData: true,
      attributes: true,
      childList: true,
      subtree: true
    });
    
    local_reactive_function();
    
  });
  
}

function searchElements(selector, regexp, where) {

  var search_elements = [];
  
  if (typeof where !== 'undefined') {
    
    var all_elements = where.querySelectorAll(selector);
    
  }
  
  else {
    
    var all_elements = document.querySelectorAll(selector);
    
  }
  
  for (var n = 0; n < all_elements.length; n++) {
    
    if (typeof regexp == 'object') {
      
      if (typeof regexp.test == 'function') {
        
        if (regexp.test(all_elements[n].innerText.trim())) {
          
          search_elements.push(all_elements[n]);
          
        }
        
      }
      
      
    }
    
    else {
      
      search_elements.push(all_elements[n]);
      
    }
  }
  
  return search_elements;

}

To click sequentially (one after the other) several elements, call the clickElements function :

(async function() {
    await clickElements('CSS-селектор 1');
    await clickElements('CSS-селектор 2');
    await clickElements('CSS-селектор 3');
})();

The clickElements function will definitely wait for the buttons corresponding to the specified CSS selectors to appear and only then click them, sequentially from top to bottom. At the same time, a regular expression can be passed to this function as the second parameter in order to find the button by its text.