Форум программистов, компьютерный форум, киберфорум
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. Показов 21089. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов
Argus19 22.11.2025
Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .
Сколько Государство потратило денег на меня, обеспечивая инсулином.
Programma_Boinc 20.11.2025
Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2025, CyberForum.ru