발생일: 2014.12.28 키워드: Content Security Policy, CSP, Chrome Extension, 크롬 확장, 크롬 익스텐션, angular, google analytics, 구글 애널리틱스 문제: 크롬 익스텐션에서 앵귤러를 사용하려고 추가했는데, 아래와 같은 오류가 나면서 실행되지 않는다. Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' https://ssl.google-analytics.com". 오류 구문을 보니 앵귤러의..
발생일: 2014.12.09 키워드: Date.parse(), new Date(), Date, ISO-8601, RFC2822, ISO8601, 날짜, IE9 문제: 얼마 전에 서버 시간과 클라이언트 시간의 오차를 줄이려고, 서버 응답의 헤더를 가져와서 타임스탬프로 변경해 비교하는 코드를 작성했었다. 서버의 Date 문자열을 바로 타임스탬프로 변환하기 위해서 아래처럼 `Date.parse()`를 사용했다. var dateResponseHeader = 'Thu, 11 Dec 2014 13:08:28 GMT’; var serverTime = Date.parse(dateResponseHeader); 위 코드는 잘 동작했다. 그리고 며칠이 지난 후에, 옆 자리 D와 서버 응답에 포함된 시간 데이터를 가공하는 것..
발생일: 2014.12.05 키워드: jQuery, form, $(‘form’), IE8 문제: 버튼을 클릭하면 엘리먼트를 생성해 특정 주소로 서브밋하는 코드를 아래처럼 만들었다. 태그는 숨겨둔 채 전송하려고 `style` 속성도 정의했다. function onClickButton() { $(‘’).attr({ target: ’targetFrame’, method: ‘POST’, action: ‘/some/path' }).submit(); } 문제 없이 잘 동작한다. 어랏. IE8에서는 폼이 전송되지 않는다… 왜일까? 해결책: `jQuery()` API 문서에 의하면, `jQuery()`의 파라미터로 문자열이 들어왔을 경우에 아래와 같이 동작한다. - 문자열이 싱글 태그인 경우, `document.cre..
발생일: 2014.12.01 키워드: chrome extension, 크롬 익스텐션, 크롬 확장, background pages, event pages, 백그라운드 페이지, 이벤트 페이지 문제: 사전 익스텐션을 대폭 개편하려고 `manifest.json` 포맷을 다시 살펴보다 보니, 백그라운드 페이지가 deprecated 되고 이벤트 페이지라는 것이 생겼더라. 이벤트 페이지는 뭐가 다른 거지? 해결책: 백그라운드 페이지와 이벤트 페이지 크롬 익스텐션에서 브라우저가 열려있는 동안 계속 떠있어야 할 페이지나 스크립트가 있다면, 백그라운드 페이지나 스크립트로 등록해두고 사용하면 됐었다. { "name": "My extension”, ... "background": { "scripts": ["background..
발생일: 2014.12.01 키워드: coffeescript, 커피스크립트, 네임스페이스, namespace, 전역 변수 문제: 커피스크립트는 컴파일 하면 각 파일이 즉시 실행 함수로 감싸져 있기 때문에, 다른 파일에서 이전 파일의 변수에 접근할 수 없다. 예를 들면, 아래와 같이 두 개의 파일이 있고, 각 파일은 아래와 같이 되어 있다고 가정해보자. [Animal.coffee] class Animal # … [main.coffee] new Animal # 접근할 수 없다. `Animal.coffee`는 아래와 같이 컴파일 되기 때문에, `main.js`에서는 이 파일의 변수에 접근할 수 없다. [Animal.js] (function () { var Animal = ... }()); 앱의 네임스페이스를 ..
발생일: 2014.11.30 키워드: 크롬 익스텐션, chrome extension, 크롬 확장, 메시지, message, onMessage, chrome.runtime, chrome.tabs 문제: 크롬 익스텐션과 컨텐트 스크립트 간 1회성으로 메시지를 주고 받는 법에 대한 메모이다. 해결책: https://developer.chrome.com/extensions/messaging#simple 컨텐트 스크립트에서 익스텐션으로 보내기 chrome.runtime.sendMessage({greeting: "hello"}, function(response) { console.log(response.farewell); }); `chrome.runtime.sendMessage()`로 전달한다. 익스텐션의 메시지 ..
발생일: 2014.11.30 키워드: postMessage, message 문제: window.postMessage()에 대한 메모이다. 해결책: 일반적으로 스크립트는 동일 근원 정책에 의해, 프로토콜, 도메인, 포트 중 어느 하나라도 다른 경우엔 다른 윈도우와 통신할 수 없다. 하지만, `window.postMessage()`를 사용하면 안전하게 오리진이 다른 윈도우와 통신할 수 있다. 아래 코드와 같이 다른 윈도우로 메시지를 보낼 수 있다. otherWindow.postMessage(message, targetOrigin); - otherWindow: - `window.open()` 의 응답으로 얻은 윈도우 객체 - `iframe`의 `contentWindow` 프로퍼티로 가져온 윈도우 객체 - `w..
window, document, frame, iframe 이해하기
발생일: 2014.11.30 키워드: window, document, frames, iframe, 윈도우, 도큐먼트, 프레임, 아이프레임 문제: 자바스크립트를 처음 접하는 사람들은 대부분 window 와 document 에 대한 개념을 헷갈려한다. 더불어, 윈도우와 프레임의 관계, frame 과 iframe, iframe 과 window 등등… 웹서핑을 하다가 이 개념들을 잘 설명하고 있는 포스트를 하나 발견해서, 이참에 나도 초보자를 대상으로 이해하기 쉽게 설명해두려고 한다. 해결책: window `window`는 브라우저를 시작할 때 가장 처음 생성되는 객체이다. 이 ‘창’을 생성하고 난 후에, 이 안에 다른 ‘창’(window)나 ‘문서’(document)를 추가할 수 있다. `window` 객체는..
에버노트 웹 클리퍼 익스텐션의 동작 방식 분석
발생일: 2014.11.30 키워드: Evernote Web Clipper, 에버노트 웹 클리퍼, 크롬 익스텐션, 크롬 확장 문제: 어느덧 네이버 영어사전 크롬 익스텐션 사용자가 45,000명이 되었다. 사용자가 많아진 만큼 개선 요청이나 문의가 많이 들어오는데, 몇몇 분들이 특정 사이트에서 사전이 보이지 않는다고 문의를 하셨다. 문제가 발생하는 페이지들은 frameset 으로 구성되어있는 경우였다. 사전은 페이지에 엘리먼트를 직접 삽입하는 방법으로 구현했는데, 이 페이지엔 엘리먼트를 삽입할 수 없기 때문이다. 근데, 에버노트 웹 클리퍼 익스텐션은 요 문제를 해결하고 있더라. (난 이 익스텐션이 너무너무 좋다 +_+b) 노드 바로 아래로 을 삽입하는 방법인데, 이렇게 하면 스타일이 중복되는 것도 막을 수..
발생일: 2014.11.28 키워드: chrome, 크롬, 탭 비활성화, outerWidth, outerHeight 문제: 간헐적으로 페이지가 로드됐을 때, window 의 outerWidth 와 outerHeight 속성이 0으로 나오는 경우가 있다. 왜일까? 해결책: 크롬은 탭이 비활성화되어 있을 때, window.outerWidth 와 window.outerHeight 의 값이 0으로 나온다. 아래 링크로 테스트해볼 수 있다. http://jsbin.com/hutoya 1. 링크를 클릭해서 바로 여는 경우, outerWidth 는 정상적으로 출력된다. 2. 오른쪽 버튼 > 새 탭으로 열기를 하거나, Ctrl 또는 Cmd 를 클릭한 채 열면 탭이 포커스되지 않은 채로 열린다. 탭을 열어보면 outer..