Как корректировать текст или стили в открывшейся Web странице?

Question

[Валерий Орлов]

Здравствуйте. Мне попадались расширения, которые добавляли жирный текст и другие стили загруженным веб страницам. Занялся расширением в Chrome. Оно при определенных условиях открывает новую вкладку: window.open("https://exemple.com/id, "_blank")
на этой странице есть тег:

<span data-v-50ca0f34="" data-v-15d61d2e="" class="enter">Добро пожаловать</span>

Реально ли средствами Javascript/Jquery, проверить наличие данного приветствия и заменить его на <h1>Всего доброго</h1>
Спасибо за любые советы!

Answer 1

[Mr_Sergo]

https://codepen.io/Mr_Sergo/pen/wvvBZRb?editors=1010

Так?

Comments

[Валерий Орлов]

В Вашем примере все работает как часики. Но у меня в расширении замены не происходит. Подскажите, как я могу посмотреть содержимое newWin? Есть подозрения, что заменяемая строка может быть не найдена.

[Mr_Sergo]

как я могу посмотреть содержимое newWin?

document.querySelector('.btn').onclick = () => {
	let newWin = window.open('about:blank', '', 'width=400,height=200');
	newWin.onload = () => {
		console.log(newWin.document);
	}
}

[Валерий Орлов]

Mr_Sergo, Прошу прощения. В Вашем варианте Добро пожаловать удаляется, а заменяемая запись <h1>Всего доброго</h1> появляется вверху страницы, т.е. не на своем месте! Возможно ли, чтобы замена происходила непосредственно в том месте, где ранее было старое значение?

[Mr_Sergo]

где ранее было старое значение

Так ? https://codepen.io/Mr_Sergo/pen/mddJKob

По ссылке происходит замена содержимого тега span
но если сам span, например, находится еще в каком-то теге типа:

<a>
  <span data-v-50ca0f34="" data-v-15d61d2e="" class="enter">Добро пожаловать</span>
</a>

то можно заменить содержимое родителя тега span

enter.parentElement.innerHTML = '<h1>Всего доброго</h1>';

после такой замены получится такая структура

<a>
  <h1>Всего доброго</h1>
</a>

но проще всего, конечно, если тег родителя имеет какой-то класс или ид, например

<a class="some-class">
	<span data-v-50ca0f34="" data-v-15d61d2e="" class="enter">Добро пожаловать</span>
</a>

то можно удалить полностью тег span с его содержимым таким образом

document.querySelector('.some-class').innerHTML = '<h1>Всего доброго</h1>';

[Валерий Орлов]

Mr_Sergo, подскажите, а как можно получить содержимое div'ов с class="col-12 col-md-8" ? Я на странице насчитал их 5 штук. Возможно конструкцией вроде:

$(newWin.document.querySelector('div.col-12.col-md-8')).each(function(){
        console.log($(this).html());
      });

Спасибо за советы.

[Mr_Sergo]

Валерий Орлов, покажите html-структуру этих col-12 и col-md-8

[Валерий Орлов]

Mr_Sergo,

<div><div class="row">
<div class="label col-12 col-md-4">Имя</div><div class="col-12 col-md-8">Дмитрий</div></div> 
<div class="row mt-3 mt-md-3"><div class="label col-12 col-md-4">Категория</div><div class="col-12 col-md-8">
<span>Ремонт</span></div></div> 
<div class="row mt-3 mt-md-3"><div class="label col-12 col-md-4">Электронная почта</div> 
<div class="col-12 col-md-8 text-truncate">[e-mail]</div></div> 
<div class="row mt-3 mt-md-3"><div class="label col-12 col-md-4">Телефон</div> 
<div class="col-12 col-md-8"><span><a href="/" class="float-md-left">Добавить телефон</a></span></div>
</div></div>

Отсюда пробую выбрать:
Имя Дмитрий
Категория Ремонт
Электронная почта [e-mail]
Телефон Добавить телефон

[Mr_Sergo]

Валерий Орлов,
Как вы планируете писать расширение для браузера не зная основ? Вы из-за каждой мелочи будете создавать тему на тостере?
Пробуйте https://learn.javascript.ru/searching-elements-dom...

[Валерий Орлов]

Mr_Sergo, Извиняюсь, увлекся.