[Chrome Extension] URL에서 Crawling하기 (1)

0. 패키지 설치

  - 크롤링에 사용할 axios, cheerio, iconv-lite 라이브러리 설치

  - iconv-lite : 유니코드 문자열이 깨지지 않도록 하는 라이브러리

  - puppeteer : 헤드리스 브라우저를 프로그래밍 방식으로 조작하는 라이브러리

  - loadsh : 자바스크립트에 기본으로 제공되지 않는 유틸리티 함수를 제공하는 라이브러리

npm i axios cheerio iconv-lite
npm i puppeteer@9.1.1 lodash@4.17.20 date-fns@2.21.1 date-fns-tz@1.1.4

 

1. Cheerio와 axios를 사용한 크롤링

const axios = require('axios');
const iconv = require('iconv-lite');

// URL 불러오기
function getTabUrl(callback) {
  var queryInfo = {
    active : true,
    currentWindow : true
  };

chrome.tabs.query(queryInfo, function(tabs) {
  var tab = tabs[0];
  var url = tab.url;
  callback(url);
});
}

// URL 크롬 확장 프로그램 상에 뿌려주기
function renderUrl(statusText) {
  document.getElementById('result').textContent = statusText;

}

//버튼이 눌렸을 때
document.addEventListener('DOMContentLoaded', function() {

  var link = document.getElementById('getUrl');

  link.addEventListener('click', function() {
    getTabUrl(function(url) {
      renderUrl(url);
    });

	// URL로 axios의 get 요청을 보내 화면을 구성하는 데이터 받아오기
    axios({
      url : link,
      method: 'GET',
      responseType: 'arraybuffer',
    })
    .then(response => {
      const content = iconv.decode(response.data, 'EUC-KR');
      console.log(content);
    })
    .catch(err => {
      console.error(err);
    });

  });
  
});

 

  - 이 방법을 사용하면 Network 오류가 발생 !

 

- axios에서 get하기 위해 사용한 link 변수에 문자열이 아닌 <button> 태그 요소가 들어가서라고 🖤팀원분이 알려주셨다

  - URL을 담는 변수를 따로 선언하고 해당 값을 전달하여 오류를 해결했으나

  - console에는 여전히 출력값이 찍히지 않는다 :<

let globalUrl = '';

...
    axios({
      url: globalUrl,
      method: 'GET',
      responseType: 'arraybuffer',
    })
...

 

2. HTML을 파싱하여 DOM에서 CSS로 원하는 값 추출하기

  - 오류는 나지 않지만 콘솔 역시 출력되지 않는다.

import axios from 'axios';
import iconv from 'iconv-lite';
import * as cheerio from 'cheerio';
let globalUrl = '';

function getTabUrl(callback) {
  var queryInfo = {
    active : true,
    currentWindow : true
  };


  chrome.tabs.query(queryInfo, function(tabs) {
    var tab = tabs[0];
    globalUrl = tab.url;
    callback(globalUrl);
  });
}

function renderUrl(statusText) {
  document.getElementById('result').textContent = statusText;
}

// 함수 추가
async function renderHTML(statusText) {
      // axios로 HTML 로드하기
      const resp = await axios.get(statusText);

      // HTML을 파싱하고 DOM 생성하기
      const $ = cheerio.load(resp.data);
  
      // CSS 셀렉터로 원하는 요소 찾기 
      const elements = $('#sc-1cpbr6m-0 dNgyLy');
  
      elements.each((idx, el) => {
        console.log($(el).text());
      });

}

document.addEventListener('DOMContentLoaded', function() {

  var link = document.getElementById('getUrl');

  link.addEventListener('click', function() {
    getTabUrl(function(url) {
      renderUrl(url);
      renderHTML(url);
      console.log('check1');
    });

  });
  
});