Почему не срабатывает скрипт моего расширения для браузера на некоторых сайтах?

Question

[kickass77]

Здравствуйте. У меня есть простенькое расширение для браузера.

Хочу отловить момент нажатия кнопки на определенном сайте, но оно не срабатывает.
Странность в том, что кнопку ловлю по id, который присвоен нужной кнопке, но на одном сайте это срабатывает, а для другого сайта - нет.

В чем может быть проблема?

{
  "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");
		});
	});

Собственно, протестировал у себя на сайте, естественно, адрес сайта и id кнопки указывал верные.
Для такого варианта все работает:

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

А на другом сайте не хочет отлавливать нажатие. Повторюсь, сайт указываю верный, id кнопки также верный, также обновляю расширение.

Правда, нужный сайт не так быстро прогружается, как мой с одной строчкой кода.
Возможно, это как-то связано?

Comments

[Алексей Дубровин]

Я не шарю за расширение.
Но думаю что некоторые сайты не имеют jq - не отрабатывает скрипт

[zkrvndm]

Вы кликер пытаетесь написать?

Answer 1

[zkrvndm]

Скорее всего проблема в том, что на момент запуска кода из content.js кнопка ваша еще отсутсвует на странице.

Я дам вам функцию кликер с одного из своих расширений, используйте его:

Асинхронная функция кликер

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;

}

Чтобы кликнуть последовательно (один за другим) несколько элементов вызывайте функцию clickElements:

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

Функция clickElements обязательно дождется появления кнопок соотвествующих указанным CSS-селекторам и только тогда их нажмёт, последовательно сверху вниз. При этом в эту функцию вторым параметром можно передать регулярное выражение, чтобы найти кнопку по его тексту.