서울의 현지 기온을 웹에서 읽기 위해 여러 방법을 사용하고 있다.
서울의 기온 데이터가 있는 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 파일을 브라우저에서 바로 읽어 들인다면 아래와 같은 에러 메시지가 나타나면서 웹 데이터 읽기에 실패할 것이다. 전체 코드를 확인할 수 있다.
위쿨리 