Парсить сайт плагином браузера - JavaScript, Ajax

Blackcement · 21.09.2019, 23:06

Здравствуйте.
Возникла необходимость создать плагин для браузера, с помощью которого требуется получать данные с чужого сайта и обрабатывать их. Использую браузер Opera последней версии. В работе плагина используется JavaScrypt, поэтому думаю, что форумом не ошибся.
Плагин состоит из трёх файлов:
manifest.json

Код:

{
	"manifest_version": 2,
	"name": "TEST 1",
	"description": "Test",
	"version": "1.0",
	"background": {	},
	"permissions": ["tabs","http://*/*"],

	"sidebar_action": 
	{
	"default_icon": "icon.png",
	"default_title": "My Sample Extension",
	"default_panel": "panel.html"
	}
}

panel.html Панель(страница) плагина, на которую будем выводить информацию с сайтов

Код:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Мой плагин</title>
		<script src="background.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="timer">00</div>
		<br>
		<div id="lght_1">00</div>
		<div id="txt_1">00</div>
		<div id="tt_1">00</div>
		<br>
		<div id="lght_2">00</div>
		<div id="lght_2_1">00</div>
		<div id="txt_2">00</div>
		<div id="tt_2">00</div>
		<br>
		<div id="lght_3">00</div>
		<div id="txt_3">00</div>
		<div id="tt_3">00</div>
    </body>
</html>

background.js Ну и сам скрипт, который ~~будет~~ должен парсить сайты, пробую это делать тремя способами

Код:

sec = 0;
setInterval(tick, 1000);
         
function tick()
{
	var $ = window.jQuery;
    sec++;
    document.getElementById("timer").childNodes[0].nodeValue = sec; //Таймер отрабатывает

	/// TEST-1 [querySelector]
	chrome.tabs.executeScript(null, {code: "document.querySelector('p').innerHTML"}, 
	(results)=>	{document.getElementById("txt_1").childNodes[0].nodeValue = "Текст " + results;}); //Возвращает текст между первыми тегами <p></p> Тут всё ок

	/// TEST-2 [querySelectorAll]
	
	chrome.tabs.executeScript(null, {code: "document.querySelectorAll('p').length"}, 
	(results)=>	{document.getElementById("lght_2").childNodes[0].nodeValue = "Длина массива " + results;}); //Возвращает правильное значение, Тут всё ок
	
	//А вот так, уже не работает:
	chrome.tabs.executeScript(null, {code: "document.querySelectorAll('p')"}, 
	(results)=>	{
		document.getElementById("lght_2_1").childNodes[0].nodeValue = "Длина массива " + results.length; 
		console.log(results);//В консоли возвращает какой-то странный массив и как с ним работать мне не понятно 	

	Код:
	Вот возвращаемый массив: 
Array(1)
0: {}
length: 1
__proto__: Array(0)
concat: ƒ concat()
constructor: ƒ Array()
copyWithin: ƒ copyWithin()
entries: ƒ entries()
every: ƒ every()
fill: ƒ fill()
filter: ƒ filter()
find: ƒ find()
findIndex: ƒ findIndex()
flat: ƒ flat()
flatMap: ƒ flatMap()
forEach: ƒ forEach()
includes: ƒ includes()
indexOf: ƒ indexOf()
join: ƒ join()
keys: ƒ keys()
lastIndexOf: ƒ lastIndexOf()
length: 0
map: ƒ map()
pop: ƒ pop()
push: ƒ push()
reduce: ƒ reduce()
reduceRight: ƒ reduceRight()
reverse: ƒ reverse()
shift: ƒ shift()
slice: ƒ slice()
some: ƒ some()
sort: ƒ sort()
splice: ƒ splice()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
unshift: ƒ unshift()
values: ƒ values()
Symbol(Symbol.iterator): ƒ values()
Symbol(Symbol.unscopables): {copyWithin: true, entries: true, fill: true, find: true, findIndex: true, …}
__proto__: Object
		}); 
	
	chrome.tabs.executeScript(null, {code: "document.querySelectorAll('p').innerHTML"}, 
	(results)=>	{document.getElementById("txt_2").childNodes[0].nodeValue = "Текст " + results[0];}); //Возвращает null
	
	
	/// TEST-3 [jQuery]
	//тут тоже возвращаются какие-то странные массивы, но тоже хочу разобраться, по этому прошу помощи
	chrome.tabs.executeScript(null, {code: "$('p')"}, 
	(results)=>
	{
		document.getElementById("lght_3").childNodes[0].nodeValue = "Длина массива " + results.length;
		document.getElementById("txt_3").childNodes[0].nodeValue = results[0];
		
	});
	
};

Помогите, люди добрые, уже второй день бьюсь.

Alex11223 · 21.09.2019, 23:20

Цитата:

Сообщение от Blackcement

//В консоли возвращает какой-то странный массив и как с ним работать мне не понятно

это обычный массив и его стандартные функции.

Как видно из первых строк, в нем один объект.

Blackcement · 21.09.2019, 23:41

Цитата:

Сообщение от Alex11223

это обычный массив и его стандартные функции.

Как видно из первых строк, в нем один объект.

Да, но как выделить из этого массива необходимые мне данные? Я предполагал получить массив, каждый элемент которого будет содержать текст расположенный между тегами <p></p>.

Alex11223 · 21.09.2019, 23:45

смотрите что за объект, какие у него свойства, функции.

Если это результат querySelectorAll, то там же обычные элементы.
https://developer.mozilla.org/en-US/...eb/API/Element

Вадим Мошев · 21.09.2019, 23:47

Цитата:

Сообщение от Blackcement

Да, но как выделить из этого массива необходимые мне данные? Я предполагал получить массив, каждый элемент которого будет содержать текст расположенный между тегами <p></p>.

Код:

let paragraphStrings =  arr
  .filler(e => e.tagName === 'P')
  .map(e => e.textContent)

Blackcement · 22.09.2019, 00:34

Цитата:

Сообщение от Alex11223

смотрите что за объект, какие у него свойства, функции.

Если это результат querySelectorAll, то там же обычные элементы.
https://developer.mozilla.org/en-US/...eb/API/Element

Посмотрел ссылку, нашел этот метод querySelectorAll(), возвращает он мне массив NodeList. На этой странице https://developer.mozilla.org/en-US/...deList#Example указан пример с простым перебором массива. Делаю по аналогии, получаю NULL.

Код:

var item="";
	chrome.tabs.executeScript(null, {code: "document.querySelectorAll('p')"}, 
	(results)=>	
               {
		document.getElementById("lght_2_1").childNodes[0].nodeValue = "Длина массива " + results.length; 
		for (var i = 0; i < results.length; i++) 
                {
		 item = item + results[i];
                }
		console.log(item);//В консоли получаю undefined
		});

Blackcement · 22.09.2019, 00:42

Цитата:

Сообщение от Вадим Мошев

Код:

let paragraphStrings =  arr
  .filler(e => e.tagName === 'P')
  .map(e => e.textContent)

Спасибо, но однострочные-многоуровневые алгоритмы мне пока сложно понять. Возможно ли этот код разделить построчно? Да что я говорю, я вообще не понимаю как сюда прикрутить полученный массив "results".

Blackcement · 22.09.2019, 01:11

Цитата:

Сообщение от Вадим Мошев

Код:

let paragraphStrings =  arr
  .filler(e => e.tagName === 'P')
  .map(e => e.textContent)

Ой, извините, я понял Вашу мысль, просто гуглил arr.filler и не мог понять, почему поиск выдаёт информацию о филлерах для волос.)))
Попробую Вашим способом, спасибо.

К сожалению, оба способа не помогли, на выходе я опять получаю какой-то NodeList массив

Вадим Мошев · 25.09.2019, 13:25

Цитата:

Сообщение от Blackcement

Ой, извините, я понял Вашу мысль, просто гуглил arr.filler

Извините за опечатку. Конечно, filter. Я ваш код не читал. Могу посоветовать, если вы получаете nodeList, преобразовать его к массиву.
Например, таким образом:

Код:

let realArray = [...nodeList];

21.09.2019, 23:45	#4
Alex11223 Старожил Регистрация: 12.01.2011 Сообщений: 19,500	смотрите что за объект, какие у него свойства, функции. Если это результат querySelectorAll, то там же обычные элементы. https://developer.mozilla.org/en-US/...eb/API/Element Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223 ЛС отключены Аларом.

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
как парсить https сайт ?	alman12	Общие вопросы Delphi	12	25.08.2018 11:58
Как парсить сайт без явного указания города	Parallelogram	PHP	4	02.08.2015 18:46
Как парсить сайт origin.com	JGalt	PHP	3	31.01.2015 20:16
Парсить сайт и создать сайт-каталог на этой основе	sn600	Фриланс	3	21.09.2013 19:41
Парсить ИМ + создать сайт на этой базе+ залить ключевики в ЯД+ГА	sn600	Фриланс	3	21.08.2013 19:35