Как из расширения для chrome изменить картинку на сайте?

Question

[Сергей Карбивничий]

Хочу изменить картинку на сайте, например эту:

В своё расширение добавил этот код:

iconURL = chrome.extension.getURL("/images/1.png");
console.log(iconURL)
el = document.querySelector(".bmenu__theme > img:nth-child(1)")
el.setAttribute("src",iconURL)

Manifest.json

{
	"manifest_version": 2,
	"name": "My First Chrome Extension",
	"description": "This is the description for your first chrome extension",
	"version": "1.0",
	"content_scripts": [
 		{
 			"matches": ["https://qna.habr.com/*"],
 			"css": ["style.css"],
 			"js": ["script.js"]
 		}
 	],
 	"permissions" : [
 	 "tabs", "http://*/*", "https://*/*" 
 	],
 	  "web_accessible_resources": [
    "images/*.png"
  ]
}

Всё работает, только сначала появляется картинка "мешочек баксов", а потом моя. Думаю, что моя картинка меняется после отрисовки странички и отработки скриптов. Как сделать так, чтобы моя картинка сразу устанавливалась?
Вот как это выглядит сейчас:

Answer 1

[Надим]

Попробуйте не менять атрибут src, а целиком заменить сам элемент сразу по готовности документа:

document.addEventListener('DOMContentLoaded', function() {
	document.querySelector('.bmenu__theme > img').outerHTML = '<img alt="Зарплаты айтишников" src="'+chrome.extension.getURL('/images/1.png')+'" style="position:relative; vertical-align: middle; top: -2px; margin-right: 4px;" width="20">';
});

В манифесте расширения на всякий случай укажите порядок загрузки своего скрипта:

{
    "matches": ["https://qna.habr.com/*"],
    "css": ["style.css"],
    "js": ["script.js"],
    "run_at": "document_start"
}

При run_at равной document_start ваш скрипт будет запущен еще до готовности документа.

Comments

[Сергей Карбивничий]

Благодарю, 2 дня не мог нагуглить решение. Находил "run_at": "document_start", но это сработало только с вашим кодом.