hottabxp
@hottabxp
Эксперт по BeautifulSoup(но это не точно!)

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

Хочу изменить картинку на сайте, например эту:
5f25505524346298341187.png
В своё расширение добавил этот код:
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"
  ]
}

Всё работает, только сначала появляется картинка "мешочек баксов", а потом моя. Думаю, что моя картинка меняется после отрисовки странички и отработки скриптов. Как сделать так, чтобы моя картинка сразу устанавливалась?
Вот как это выглядит сейчас:
5f25512be4dd0937750708.gif
  • Вопрос задан
  • 42 просмотра
Решения вопроса 1
@zkrvndm
Веб-разработчик
Попробуйте не менять атрибут 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 ваш скрипт будет запущен еще до готовности документа.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы