웹 데이터 읽기 – 크롬 확장

서울의 현지 기온을 웹에서 읽기 위해 여러 방법을 사용하고 있다.

서울의 기온 데이터가 있는 URL 주소와 온도 문자열 추출할 수 있는 CSS selector 문자열을 사용했다.

https://www.accuweather.com/ko/kr/seoul/226081/weather-forecast/226081
#current-city-tab > a > span.local-temp

1. 크롬 확장 만들기

이번에는 크롬 확장을 이용하여 브라우저에서 서울의 온도를 읽을 예정이다. 크롬 확장을 만들기 위해 디렉터리를 하나 만들고 3개의 파일을 작성하겠다.

$ mkdir -p /src/ce
$ cd /src/ce
$ touch manifest.json
$ touch popup.html
$ touch popup.js
$ tree
.
├── manifest.json
├── popup.html
└── popup.js

0 directories, 3 files

먼저 manifest.json 파일을 생성한다. 이 파일은 크롬 확장에서 읽어 들일 필수 파일이다. Json 형식을 가지고 있다. permissions 값에 https로 시작하는 URL주소가 지정되어 있는데 이 주소로 cross-origin HTTP 요청을 하겠다는 의미다.

a. manifest.json

{
    "manifest_version": 2,
    "name": "Reading Web Data Example",
    "description": "This extension shows a current temperature of the seoul",
    "version": "1.0",
    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "https://www.accuweather.com/"
    ]
}

manifest.json에서 지정한 popup.html 파일은 같은 디렉토리에 위치하며 사용자에게 온도를 표시할 내용으로 아래와 같다. 크롬 확장 아이콘을 클릭했을 경우 보일 내용이다.

b. popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>서울 기온</title>
    <meta charset="utf-8" />
    <style type="text/css">
    .box {
      width: 120px;
      height: 14px;
      line-height: 14px;
      font-size: 14px;
      color: brown;
    }

    .box > span {
      color: red
    }
    </style>
    <a href="http://popup.js">http://popup.js</a>
  </head>
  <body>
    <div class="box">서울의 온도 <span id="temperature">0 도</span></div>
  </body>
</html>

popup.html 파일은 하나의 자바스크립트 파일을 불러오는데 popup.js 파일이며 이 코드가 웹에서 기온 데이터를 읽어오는 동작을 한다. 다른 자바스크립트 라이브러리를 사용하지 않으려다 보니 기능에 비해 코드가 조금 길다.

c. popup.js

document.addEventListener('DOMContentLoaded', function () {
  httpRequest = new XMLHttpRequest();
  httpRequest.onreadystatechange = getContents;
  httpRequest.open('GET', 'https://www.accuweather.com/ko/kr/seoul/226081/weather-forecast/226081');
  httpRequest.send();

  function getElement(html) {
    var div = document.createElement('div');
    div.innerHTML = html;
    return div;
  }

  function parseHTML(html) {
    var el = getElement(html);
    var temp = el.querySelector('#current-city-tab > a > span.local-temp').innerHTML;
    document.querySelector('#temperature').innerHTML = temp;
  }

  function getContents() {
    if (httpRequest.readyState === 4) {
      if (httpRequest.status === 200) {
        parseHTML(httpRequest.responseText);
      } else {
        document.querySelector('.box').innerHTML = '온도 읽기 실패';
      }
    }
  }
});

2. 크롬 확장 테스트

이제 완성된 크롬 확장을 브라우저에 등록하자. 아래 주소를 브라우저에 입력한다.

chrome://extensions

상단에 압축해제된 확장 프로그램 로드… 버튼이 나타난다. 이 버튼을 클릭하여 크롬 확장이 저장되어 있는 로컬 디렉터리를 선택한다. 그러면 아래와 같은 화면이 나타난다.

이제 크롬 확장이 설치되었다. manifest.json에 아이콘이 생략되어서 name 속성의 첫 글자인 R이 우 상단에 표시되고 있다. 이 버튼을 클릭하면 팝업 창이 나타나면서 잠시 후에 서울의 기온을 보여준다. 이제 브라우저에서 웹 데이터를 읽을 수 있다.

3. 크롬 확장을 이용하는 이유

manifest.json의 permissions 속성을 사용하면 popup.js를 크롬 확장 내부에서 동작시킬 수 있으며 Access-Control-Allow-Origin이 없다는 에러 없이 XMLHttpRequest 요청을 사용할 수 있기 때문이다. 만약에 popup.html 파일을 브라우저에서 바로 읽어 들인다면 아래와 같은 에러 메시지가 나타나면서 웹 데이터 읽기에 실패할 것이다. 전체 코드를 확인할 수 있다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.