Chrome Extension - 크롤링한 데이터 script 내용 추출

 

 

1. 특정 텍스트를 넣어서 검색한 결과 html 을 수집 (크롤링)
2. 수집한 html 내 <script> 태그 안의 데이터를 추출해야 함

 

작성한 내용

const url = `URL`;

fetch(url)
  .then((response) => response.text())
  .then((data) => {
    const parser = new DOMParser();
    const doc = parser.parseFromString(data, 'text/html');

    const json = doc.getElementById("__SCRIPT_TAG_ID__").innerHTML;
  });
}

 

👉🏻 fetch를 통해 받아온 html 데이터를 넘겨서 html파일로 인식하게 작업하는 데에 참고한 코드

fetch('/about').then(function (response) {
	// The API call was successful!
	return response.text();
}).then(function (html) {

	// Convert the HTML string into a document object
	var parser = new DOMParser();
	var doc = parser.parseFromString(html, 'text/html');

	// Get the image file
	var img = doc.querySelector('img');
	console.log(img);

}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

 

👇🏿 참고 링크

   Getting HTML with fetch() in vanilla JS

 

 

response 처리에 대해

• response.text() – 응답을 읽고 텍스트를 반환합니다,
• response.json() – 응답을 JSON 형태로 파싱합니다,
• response.formData() – 응답을 FormData 객체 형태로 반환합니다. FormData에 대한 자세한 내용은 다음 챕터에서 다루겠습니다.
• response.blob() – 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환합니다.
• response.arrayBuffer() – 응답을 ArrayBuffer(바이너리 데이터를 로우 레벨 형식으로 표현한 것) 형태로 반환합니다.
• 이 외에도 response.body가 있는데, ReadableStream 객체인 response.body를 사용하면 응답 본문을 청크 단위로 읽을 수 있습니다.

 

 

DOMParser, parseFromString 에 대해

var parser = new DOMParser();	// DOMParser 객체를 생성함.
var doc = parser.parseFromString(html, 'text/html'); // parseFromString() 메소드를 이용해 문자열을 파싱함.