Форум программистов, компьютерный форум, киберфорум
JavaScript: API
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.83/107: Рейтинг темы: голосов - 107, средняя оценка - 4.83
Искусственный интеллект
 Аватар для NQUARE
112 / 82 / 34
Регистрация: 26.08.2020
Сообщений: 590
Записей в блоге: 1
Chrome Extension

Изменение HTML кода страницы скриптом расширения

26.08.2020, 21:13. Показов 21125. Ответов 17

Студворк — интернет-сервис помощи студентам
Всем привет.

Я делаю расширение для Google Chrome, которое при нажатии на его иконку будет парсить html код открытой страницы и если найдёт в нём определённый текст то заменит его на другой определённый текст.

В принципе со всем я уже разобрался, но осталось сделать только сам парсер html кода полученного get запросом.

Подскажите пожалуйста как можно его реализовать с помощью JS.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
26.08.2020, 21:13
Ответы с готовыми решениями:

Изменение html-кода страницы через свой сайт
Есть социальная сеть, где пользователи оставляют к статьям комментарии. Требуется какие-то скрыть, где-то поменять картинки и т.п. Все...

Изменение html кода.
Есть html код который в ручную редактировать не удобно. Хочу сделать этот процесс более удобным. Как с помощью php можно сделать...

изменение исходного кода страницы
Здравствуйте! Скажите, можно ли изменить исходный код страницы, имея только доступ к админке сата?

17
Эксперт JS
 Аватар для Iverycool
1586 / 796 / 362
Регистрация: 01.02.2019
Сообщений: 1,047
26.08.2020, 22:27
Цитата Сообщение от Silin11 Посмотреть сообщение
В принципе со всем я уже разобрался, но осталось сделать только сам парсер html кода полученного get запросом.
Это можно, но зачем? Вам же достаточно просто инжектить свой скрипт в открытую вкладку:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
chrome.browserAction.onClicked.addListener(() => {
  chrome.tabs.executeScript({
    code: getFunctionCode(replaceText, 'google', 'yandex')
  });
});
 
// функция для "превращения" функции в строку для выполнения
function getFunctionCode(func, ...args) {
  return `${func};${func.name}(${args
    .map(el => typeof el === 'string' ? `'${el.replace(/\\/g, '\\\\').replace(/'/g, '\\\'')}'` : el)
    .join(',')});`;
}
 
 
// за основу взято https://qna.habr.com/q/627699#answer_item_1384171
function replaceText(text, textToReplace) {
  const reg = new RegExp(text, 'gi');
  function replace(nodes) {
    for (let node of nodes) {
      if (node instanceof HTMLScriptElement) continue;
      if (node instanceof HTMLStyleElement) continue;
      if (node instanceof Text) {
        if (node.nodeValue.match(reg)) {
          node.nodeValue = node.nodeValue.replace(reg, textToReplace);
        }
      } else {
        replace(node.childNodes);
      }
    }
  }
  
  replace(document.body.childNodes);
}
Напомню, что необходимо разрешение activeTab

Вот пример расширения example.zip
Открываете google.com и нажимаете на иконку
1
Искусственный интеллект
 Аватар для NQUARE
112 / 82 / 34
Регистрация: 26.08.2020
Сообщений: 590
Записей в блоге: 1
31.08.2020, 21:07  [ТС]
Да, спасибо, я уже понял. Я не правильно подошёл к решения задачи.
Можно просто изменить код страницы контент скриптом, но я не знаю как.

Добавлено через 27 минут
Спасибо Вам огромное! Это именно то что мне надо было.

Добавлено через 16 минут
И ещё есть вопрос, как теперь изменить текст (он может быть каким угодно) между тегами, например:
HTML5
1
<title>Этот текст надо изменить</title>
0
Эксперт JS
 Аватар для Iverycool
1586 / 796 / 362
Регистрация: 01.02.2019
Сообщений: 1,047
31.08.2020, 21:24
Лучший ответ Сообщение было отмечено Silin11 как решение

Решение

Silin11, измените 32 строчку на:
JavaScript
32
replace(document.documentElement.childNodes);
1
Искусственный интеллект
 Аватар для NQUARE
112 / 82 / 34
Регистрация: 26.08.2020
Сообщений: 590
Записей в блоге: 1
01.09.2020, 11:57  [ТС]
Спасибо вам огромное!
Есть ещё вопрос:
как сделать что-бы вариантов текста который надо заменить было несколько, например код станицы:

HTML5
1
2
3
4
5
6
7
8
9
<DOCTYPE html><html>
    <head>
        <meta charset="UTF-9">
        <title>title</title>
    </head>
    <body>
        <h6>Тестовый заголовок</h6>
    </body>
</html>
А варианты текста для поиска вот такие:
"Заголовок тестовый"
"Тестовый заголовок"
"Test head"

Добавлено через 17 минут
Цитата Сообщение от Iverycool Посмотреть сообщение
Silin11, измените 32 строчку на:
replace(document.documentElement.childNo des);
А как этим пользоваться?
0
Искусственный интеллект
 Аватар для NQUARE
112 / 82 / 34
Регистрация: 26.08.2020
Сообщений: 590
Записей в блоге: 1
02.09.2020, 10:57  [ТС]
Да я вас уже замучил, я в JS не шарю вообще. Ну помогите последний раз пожалуйста)
0
Эксперт JS
 Аватар для Iverycool
1586 / 796 / 362
Регистрация: 01.02.2019
Сообщений: 1,047
02.09.2020, 16:37
Лучший ответ Сообщение было отмечено Silin11 как решение

Решение

Цитата Сообщение от Silin11 Посмотреть сообщение
А варианты текста для поиска вот такие:
"Заголовок тестовый"
"Тестовый заголовок"
"Test head"
Всё это должно быть заменено на одно слово или на несколько? Если на одно, то можно изменить функцию replaceText:
JavaScript
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function replaceText(textArr, textToReplace) {
  if (!Array.isArray(textArr)) textArr = [textArr]; // делает возможность по-прежнему передавать одно искомое слово
  const reg = new RegExp(textArr.join('|'), 'gi');
  function replace(nodes) {
    for (let node of nodes) {
      if (node instanceof HTMLScriptElement) continue;
      if (node instanceof HTMLStyleElement) continue;
      if (node instanceof Text) {
        if (node.nodeValue.match(reg)) {
          node.nodeValue = node.nodeValue.replace(reg, textToReplace);
        }
      } else {
        replace(node.childNodes);
      }
    }
  }
  
  replace(document.body.childNodes);
}
И для использования измените третью строчку:
JavaScript
3
code: getFunctionCode(replaceText, ["Заголовок тестовый", "Тестовый заголовок", "Test head"], 'Ваш текст')
Цитата Сообщение от Silin11 Посмотреть сообщение
А как этим пользоваться?
? Демо-расширение посмотрите.
Цитата Сообщение от Silin11 Посмотреть сообщение
Да я вас уже замучил, я в JS не шарю вообще. Ну помогите последний раз пожалуйста)
Сейчас сентябрь - работы по горло, не могу уже так часто отвечать
1
Искусственный интеллект
 Аватар для NQUARE
112 / 82 / 34
Регистрация: 26.08.2020
Сообщений: 590
Записей в блоге: 1
02.09.2020, 23:10  [ТС]
Ах точно, понимаю, я сам в 6 класс иду))

Добавлено через 3 минуты
Цитата Сообщение от Iverycool Посмотреть сообщение
Всё это должно быть заменено на одно слово или на несколько? Если на одно, то можно изменить функцию replaceText:
Да, на одно, спасибо.

Добавлено через 1 минуту
Цитата Сообщение от Iverycool Посмотреть сообщение
? Демо-расширение посмотрите.
В демо там просто замена текста, я имею в виду что писать в аргументах что-бы заменить текст между тегами <title> например

Добавлено через 5 минут
Цитата Сообщение от Silin11 Посмотреть сообщение
Да, на одно, спасибо.
Хотя лучше на разные, если не сложно подскажите как.
0
Искусственный интеллект
 Аватар для NQUARE
112 / 82 / 34
Регистрация: 26.08.2020
Сообщений: 590
Записей в блоге: 1
03.09.2020, 08:31  [ТС]
Цитата Сообщение от Iverycool Посмотреть сообщение
Цитата Сообщение от Silin11 Посмотреть сообщение
А варианты текста для поиска вот такие:
"Заголовок тестовый"
"Тестовый заголовок"
"Test head"
Всё это должно быть заменено на одно слово или на несколько? Если на одно, то можно изменить функцию replaceText:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function replaceText(textArr, textToReplace) {
  if (!Array.isArray(textArr)) textArr = [textArr]; // делает возможность по-прежнему передавать одно искомое слово
  const reg = new RegExp(textArr.join('|'), 'gi');
  function replace(nodes) {
    for (let node of nodes) {
      if (node instanceof HTMLScriptElement) continue;
      if (node instanceof HTMLStyleElement) continue;
      if (node instanceof Text) {
        if (node.nodeValue.match(reg)) {
          node.nodeValue = node.nodeValue.replace(reg, textToReplace);
        }
      } else {
        replace(node.childNodes);
      }
    }
  }
  
  replace(document.body.childNodes);
}
И для использования измените третью строчку:
JavaScript
1
code: getFunctionCode(replaceText, ["Заголовок тестовый", "Тестовый заголовок", "Test head"], 'Ваш текст')
Получается вот такой код в background.js:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
chrome.browserAction.onClicked.addListener(() => {
  chrome.tabs.executeScript({
  code: getFunctionCode(replaceText, ['тестовый заголовок', 'заголовок тестовый', 'test head'], 'Ваш текст') 
 //['тестовый заголовок'] так тоже не работает. А вот если просто  'тестовый заголовок' то работает
  });
});
 
 
function getFunctionCode(func, ...args) {                           //Проблема здесь, проверено console.log'ами
  return `${func};${func.name}(${args
    .map(el => typeof el === 'string' ? `'${el.replace(/\\/g, '\\\\').replace(/'/g, '\\\'')}'` : el)
    .join(',')});`;
}
 
 
function replaceText(textArr, textToReplace) {                            //А до суда код не доходит
  if (!Array.isArray(textArr)) textArr = [textArr];
  const reg = new RegExp(textArr.join('|'), 'gi');
  function replace(nodes) {
    for (let node of nodes) {
      if (node instanceof HTMLScriptElement) continue;
      if (node instanceof HTMLStyleElement) continue;
      if (node instanceof Text) {
        if (node.nodeValue.match(reg)) {
          node.nodeValue = node.nodeValue.replace(reg, textToReplace);
        }
      } else {
        replace(node.childNodes);
      }
    }
  }
  replace(document.body.childNodes);
}
Но чёта он не работает. с массивом, даже в котором один элемент, а вот с одним словом в кавычках (не в массиве(без квадратных скобок)) всё прекрасно работает.
Причем проблема в функции getFunctionCode(func, ...args), в которой я ни чего не понимаю.
А до replaceText(textArr, textToReplace) дело не доходит вообще
0
Искусственный интеллект
 Аватар для NQUARE
112 / 82 / 34
Регистрация: 26.08.2020
Сообщений: 590
Записей в блоге: 1
04.09.2020, 08:42  [ТС]
Спасибо
0
Эксперт JS
 Аватар для Iverycool
1586 / 796 / 362
Регистрация: 01.02.2019
Сообщений: 1,047
05.09.2020, 14:53
Лучший ответ Сообщение было отмечено Silin11 как решение

Решение

Цитата Сообщение от Silin11 Посмотреть сообщение
проблема в функции getFunctionCode
Да, изначально функция делалась под простые типы. Но можно ввести поддержку массивов:
JavaScript
1
2
3
4
5
6
7
8
9
function getFunctionCode(func, ...args) {
  return `${func};${func.name}(${args.map(transcribeArgument).join(',')});`;
 
  function transcribeArgument(arg) {
    if (Array.isArray(arg)) return `[${arg.map(transcribeArgument).join(',')}]`;
    if (typeof arg === 'string') return `'${arg.replace(/\\/g, '\\\\').replace(/'/g, '\\\'')}'`;
    return arg;
  }
}
Вообще, конечно, это уже походит на костыль. Вам следовало бы создать content-script и передавать в него аргументы через storage.
1
Искусственный интеллект
 Аватар для NQUARE
112 / 82 / 34
Регистрация: 26.08.2020
Сообщений: 590
Записей в блоге: 1
05.09.2020, 17:38  [ТС]
Пока только для себя (выложу только на github), и так сойдёт. А вам спасибо большое.

Добавлено через 3 минуты
Цитата Сообщение от Iverycool Посмотреть сообщение
Вам следовало бы создать content-script и передавать в него аргументы через storage.
С контент скриптом я уже пробовал но что-то не пошло(

Добавлено через 13 минут
А как все эти слова меня на другие разные слова?
0
Эксперт JS
 Аватар для Iverycool
1586 / 796 / 362
Регистрация: 01.02.2019
Сообщений: 1,047
06.09.2020, 14:02
Цитата Сообщение от Silin11 Посмотреть сообщение
Пока только для себя (выложу только на github)
Выкладывайте, слишком уж он простой, чтоб я его считал "интеллектуальной собственностью"
Хотя, в своё время, прототипом функции getFunctionCode я очень гордился...
Цитата Сообщение от Silin11 Посмотреть сообщение
А как все эти слова меня на другие разные слова?
Опять-таки можно переделать replaceText:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// использовать так: replaceText([['Найти1', 'Заменить1'], ['Найти2', 'Заменить2'], ['Найти3', 'Заменить3']]);
function replaceText(replacings) {
  const replacingRegs = replacings.map(([finding, replacing]) => [new RegExp(finding, 'gi'), replacing]);
  function replace(nodes) {
    for (let node of nodes) {
      if (node instanceof HTMLScriptElement) continue;
      if (node instanceof HTMLStyleElement) continue;
      if (node instanceof Text) {
        node.nodeValue = replacingRegs.reduce((str, [reg, replacing]) =>
          str.replace(reg, replacing), node.nodeValue);
      } else {
        replace(node.childNodes);
      }
    }
  }
  replace(document.body.childNodes);
}
Цитата Сообщение от Silin11 Посмотреть сообщение
С контент скриптом я уже пробовал но что-то не пошло(
Почитайте статьи, про это не мало написано, одна из основных концепций расширений:
https://developer.chrome.com/e... nt_scripts
http://chrome-ext.blogspot.com... _4033.html
Загуглите: contexts-and-methods-for-communication-between-the-browser-action-background-scripts-and-content-scripts-of-chrome-extensions
1
Искусственный интеллект
 Аватар для NQUARE
112 / 82 / 34
Регистрация: 26.08.2020
Сообщений: 590
Записей в блоге: 1
06.09.2020, 20:39  [ТС]
Цитата Сообщение от Iverycool Посмотреть сообщение
Выкладывайте, слишком уж он простой, чтоб я его считал "интеллектуальной собственностью"
Согласен)
Цитата Сообщение от Iverycool Посмотреть сообщение
Опять-таки можно переделать replaceText:
Ух как же я был близок, почти так-же получилось, но только не работающие
Цитата Сообщение от Iverycool Посмотреть сообщение
Почитайте статьи, про это не мало написано, одна из основных концепций расширений:
https://developer.chrome.com/e... nt_scripts
http://chrome-ext.blogspot.com... _4033.html
Загуглите: contexts-and-methods-for-communication-between-the-browser-action-background-scripts-and-content-scripts-of-chrome-extensions
Да, я всё это уже видел, постараюсь попробовать ещё раз, буду долбится. Может чего получится.

Добавлено через 24 минуты
А при использовании content скрипта backraund.js всё ещё нужен? Можно без него обойтись?

Добавлено через 8 минут
Потому что мне нужно что бы поиск происходил по нажатию на иконку расширения, а контент скрипт исполняется стразу при загрузке страницы. Как это сделать как вы говорите?
0
Эксперт JS
 Аватар для Iverycool
1586 / 796 / 362
Регистрация: 01.02.2019
Сообщений: 1,047
06.09.2020, 21:28
Цитата Сообщение от Silin11 Посмотреть сообщение
background.js всё ещё нужен? Можно без него обойтись?
Да, если вы хотите выполнять действия по нажатии на иконку.
Цитата Сообщение от Silin11 Посмотреть сообщение
Потому что мне нужно что бы поиск происходил по нажатию на иконку расширения, а контент скрипт исполняется стразу при загрузке страницы. Как это сделать как вы говорите?
Контент-скрипт объявленный через манифест - да, я же имел ввиду контент-скрипт, как отдельный файл, который мы можем проинжектить когда захотим.

Вот архивчик: example.rar.
https://developer.chrome.com/e... cuteScript
https://developer.chrome.com/e... endMessage
1
Искусственный интеллект
 Аватар для NQUARE
112 / 82 / 34
Регистрация: 26.08.2020
Сообщений: 590
Записей в блоге: 1
06.09.2020, 22:21  [ТС]
Ааа, всё, понял, спасибо. Щас попробую.

Добавлено через 1 минуту
Цитата Сообщение от Iverycool Посмотреть сообщение
https://developer.chrome.com/e... cuteScript
https://developer.chrome.com/e... endMessage
А это всё я тоже смотрел, пробовал.

Добавлено через 17 минут
Цитата Сообщение от Iverycool Посмотреть сообщение
Вот архивчик: example.rar.
С Русскими словами не работает(
0
Эксперт JS
 Аватар для Iverycool
1586 / 796 / 362
Регистрация: 01.02.2019
Сообщений: 1,047
07.09.2020, 19:48
Цитата Сообщение от Silin11 Посмотреть сообщение
С Русскими словами не работает(
У меня работает, значит вы что-то не так делаете...
1
Искусственный интеллект
 Аватар для NQUARE
112 / 82 / 34
Регистрация: 26.08.2020
Сообщений: 590
Записей в блоге: 1
07.09.2020, 20:40  [ТС]
Что? Я просто скачиваю и загружаю распакованное расширение, при замене НА русские символы заменяется на карказябры, а про замене Русских символов другими ни чё не работает и не заменяется.

Добавлено через 23 минуты
Ладно, дальше сам как ни будь разберусь, осталось только popup сделать, настройки всякие и прочее...
Спасибо вам большое! Очень помогли.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
07.09.2020, 20:40
Помогаю со студенческими работами здесь

Изменение кода страницы в Firefox
Доброго времени суток. Рылся, но ничего путного по этому вопросу не нарыл. А вопрос такой: 1. Есть мозила 2. Есть некий сайт с неким...

Изменение исходного кода страницы
Привет! я хочу сделать такую программу чтобы она позволяла менять код html через код элемента )

Изменение html страницы на локальном компьютере
Доброго всем времени суток. Я html знаю совсем немного, поэтому заранее извиняюсь если мои вопросы покажутся вам глупыми, думаю это не...

Изменение HTML кода в Delphie
Задача состоит в следующем: Есть HTML блок в котором нужно изменять лишь некоторые значения,ссылки,текст.В остальном блок остаётся без...

Изменение текущего html кода
Привет! Есть html код: &lt;head&gt; &lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=UTF-8&quot; /&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
18
Ответ Создать тему
Новые блоги и статьи
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru