Форум программистов, компьютерный форум, киберфорум
JavaScript: API
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/40: Рейтинг темы: голосов - 40, средняя оценка - 4.60
 Аватар для koker007
59 / 52 / 11
Регистрация: 04.08.2015
Сообщений: 731

Chrome.tabs - получить html код вкладки

11.09.2018, 13:55. Показов 8530. Ответов 3
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день, подскажите пожалуйста с какими функциями chrome.tabs можно получить Html код активной вкладки узнать url адрес этой вкладки?
и допустим добавить весь полученный код к себе на страницу из которой выполняются эти действия, в моем случае это backgraund-script для расширения. Спасибо.
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
11.09.2018, 13:55
Ответы с готовыми решениями:

Вкладки Responsive tabs. Код прикрепил
Всем добрый день! Помогите разобраться в коде данного скрипта: http://codepen.io/ntin12/pen/BHzjG . Подскажите, как сделать чтобы при...

Chrome.tabs.executeScript() - ошибка
Добрый день, использую функцию chrome.tabs.executeScript() чтобы встроить код в конкретную указанную страницу, на моем пк все работает...

Как исправить работу chrome.tabs.remove?
Доброго времени суток. Имеется расширение, которое было допилинно под свои нужды. Расширение умеет закрывать вкладки, если их более...

3
 Аватар для diadiavova
7261 / 2608 / 745
Регистрация: 11.04.2015
Сообщений: 4,155
Записей в блоге: 43
11.09.2018, 15:16
koker007, урл получить несложно, а именно - с помощью методо query, чтобы оно возвращал данные о текущей вкладке, надо передать ему опции { active: true, currentWindow: true }. А вот с получением кода страницы дело обстоит несколько сложнее. Дело в том, что прямой доступ к DOM страницы получить извне - невозможно. Поэтому можно, используя метод executeScript в контексте вкладки, получить код страницы и отправить его бэкграундскрипту через сообщение, а в самом скрипте уже ловить его. Схема достаточно сложная, начать можно так
JavaScript
1
2
3
4
5
6
7
8
9
10
11
        chrome.tabs.query({ active: true, currentWindow: true }, function (activeTab)
        {
            // Здесь уже activeTab.url должен возвратить урл вкладки
            chrome.tabs.executeScript(activeTab.tabId, { code: `
            // Здесь код отправляющий нужные данные (в данном случае код страницы) сообщением
            // Код передается строкой, но лучше написать его в отдельном файле и испоьзовать опцию file, вместо code 
            ` }, function (data)
            {
 
            });
        });
Собственно код получающий хтмл - достаточно обычный, что-то типа
JavaScript
1
let html = document.documentElement.outerHTML
Ну, или что-то в этом роде. Что касается сообщений, то я рекомендую отправлять их в формате {command: message}, чтобы в принимающем скрипте можно было каждую команду обрабатывать отдельно, поскольку расширение может отправлять множество сообщений и их надо как-то различать.
1
 Аватар для koker007
59 / 52 / 11
Регистрация: 04.08.2015
Сообщений: 731
11.09.2018, 19:07  [ТС]
Спасибо, код действительно получилось встроить. Также я нашел еще похожий метод, только тут не используются команды, а с встроеной функцией после ее выполнения возвращается значение через ретурн. https://stackoverflow.com/ques... om-content

В общем код действительно возвращается и его можно посмотреть в консоле. используя тот код. но вот встроить его в мою бекграунд скрипт пока не вышло.. кажется дело в том что теряется тип данных и когда значение возвращается через ретурн то это уже не текст, пробовал через Jquery и обычными методами javascript.. ничего..

Попробую разобраться с отправками команд может тут то и получится как текст вытащить.

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
34
35
36
    load_get_script_for_tabs(){
        //Грузим все табы
        chrome.tabs.query({url:"https://olymptrade.com/platform"},function(tab)
            {   
                //Если вкладки нет, открываем
                if(tab.length == 0){
                    chrome.tabs.create({url:"https://olymptrade.com/platform"}, function(){});
                    
                }
                //Если вкладка найдена
                else{
                    //Если код уже есть удаляем старую инфу
                    $('#OLIMP_main').remove();
                    //Создаем заного отсек под код
                    $('body').append('<div id="OLIMP_main" class="HTML_OLIMP">Тут будет загружена страница олимпа</div>');
                    
                    
                    chrome.tabs.executeScript(tab[0].tabId, { code: '(' + modifyDOM + ')();' }, (results) =>
                    {
                        console.log('Popup script:');
                        console.log(results[0]);
                        
                        var text_html = " ";
                        for(var x = 0; x < results.length; x++){
                            text_html = text_html + results[x];
                        }
                        //Встраиваем код в отсек
                        $('#OLIMP_main').append(text_html);
                        
                    });     
                }
            }
        
        );
        
    }
JavaScript
1
2
3
4
5
6
    function modifyDOM() {
        //You can play with your DOM here or check URL against your regex
        console.log('Tab script:');
        console.log(document.body);
        return document.body.innerHTML;
    }
Добавлено через 34 минуты
diadiavova, Пожалуйста приведите пример отправки и получения команды, а то я ничего дельного не найду..
в документации по chrome.commands, никаких примеров толком нет, просто описание. И еще, я так понимаю если команда была отправлена она так и будет каждый раз получаться через chrome.commands.getAll() или нет? а то я не вижу как удалить команду после выполнения. чтобы chrome.commands.getAll() каждый раз ее не выдавал, а то мне ведь нужно мониторить ту страницу, код которой нужно передать. Следить за изменениями в общем.
0
 Аватар для diadiavova
7261 / 2608 / 745
Регистрация: 11.04.2015
Сообщений: 4,155
Записей в блоге: 43
11.09.2018, 22:09
Лучший ответ Сообщение было отмечено koker007 как решение

Решение

koker007, по поводу документации: у хрома она действительно не очень. Я обычно пользуюсь документацией к расширениям файрфокса, но там хоть и те же апи, но ряд нюансов все-таки присутствует, так что надо понимать где что делается иначе, но зато там есть примеры. Можно еще к Edge документацию посмотреть, там вроде тоже более понятно, но тоже есть нюансы.
Небольшой пример я набросал, он во вложении. Собственно что делает пример. Когда жмешь на иконку расширения, то код страницы выводится в консоль из бэкграунда. Там я не использовал query, как в примере выше, по той причине, что все делается в обработчике клика по иконке, а он имеет параметр, как раз содержащий информацию об активной вкладке. А так все попытался написать предельно просто и компактно. Изучи пример, мне кажется, там все не очень сложно.
Вложения
Тип файла: zip get-page-code.zip (3.2 Кб, 90 просмотров)
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
11.09.2018, 22:09
Помогаю со студенческими работами здесь

Получить код вкладки в Chrome
Доброго дня. Имеется браузер Google Chrome, на нем могут быть открыты вкладки определенного ресурса. Например ресурс имеет url:...

Получить html код открытой в Google Chrome страницы
Как достать html код сейчас открытой страницы из хрома?

Как загрузить HTML открытой вкладки в Chrome
Добрый день, меня интересует вопрос: можно ли с помощью JS в браузере открыть вкладку, дождаться пока она загрузится и выполнит все...

Как вытащить HTML из активной вкладки браузера Chrome?
Всем привет! Всю ночь форум копал :wall: Надо найти баланс в самом низу страницы и никак не могу получить код для парсинга - в адресной...

Как получить ID процесса открытой вкладки в Chrome
У Chrome много процессов. И мне нужно получить ID определённой вкладки. У меня открыто например 10 вкладок. И 1 имеет названия (заголовок)...


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

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Новые блоги и статьи
Знаешь почему 90% людей редко бывают счастливыми?
kumehtar 14.04.2026
Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.
Фиксация колонок в отчете СКД
Maks 14.04.2026
Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code
Loafer 13.04.2026
{ "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .
Оптимизация кода на разграничение прав доступа к элементам формы
Maks 13.04.2026
Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений
Maks 12.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .
Архитектура слоя интернета для сервера-слоя.
Hrethgir 11.04.2026
В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа
Maks 10.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании
Maks 09.04.2026
Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru