Форум программистов, компьютерный форум, киберфорум
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. Показов 21179. Ответов 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
Ответ Создать тему
Новые блоги и статьи
Переходник USB-CAN-GPIO
Eddy_Em 20.03.2026
Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого
Argus19 18.03.2026
Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++
8Observer8 17.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip
Символические и жёсткие ссылки в Linux.
algri14 15.03.2026
Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора
ФедосеевПавел 14.03.2026
Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию
anaschu 13.03.2026
прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++
8Observer8 10.03.2026
Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:
Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE
8Observer8 10.03.2026
Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru