Safari extension으로 먼저 나온 바른 말씨를 Google Chrome 용으로도 배포할 목적으로 개발하면서 부딪혔던 문제로, 대부분의 extension APIs와 그 구조는 서로 닮았기 때문에 코드 이전에는 별다른 어려움은 없었다. 그런데 한 가지 커다란 장벽과 마주쳤으니.

보통 extensions에 의해 페이지에 삽입되는 Content Scripts는 독립적인 sandbox 환경에서 실행되면서 원래 웹 페이지에 존재하는 스크립트와의 간섭을 걱정할 필요 없이 DOM을 만질 수 있게 되는데, 불행히도 Google Chrome extensions에선 iframes 접근이 차단되어 있어서 window.frames 값으로 undefined를 돌려준다. 이 문제는 알려진 버그로, 해결책으로 다음과 같이 Background Page에서 chrome.tabs.executeScript() 명령으로 해당 사이트의 DOM에다 직접 script tag을 생성해서 Chrome의 Sandbox 밖에서 실행되는 스크립트를 삽입해 주는 것이다.

chrome.tabs.executeScript(null, {file: 'scriptInjecting.js'}, scriptInjected);

script tag를 만들고 Sandbox를 탈출해서 실행될 스크립트를 삽입하는 scriptInjecting.js 파일의 내용은 다음과 같다.

(function(doc) {
  var s = doc.createElement('script');
  s.type = 'text/javascript';
  s.src = chrome.extension.getURL("escapedFromChromeSandbox.js");
  var x = doc.getElementsByTagName('script')[0];
  x.parentNode.insertBefore(s, x);
})(document);

이렇게 해서 삽입된 escapedFromChromeSandbox.js 파일에선 iframes의 속 내용을 들여다볼 수 있게 된다.

여기서 얻어진 정보는 가령, hidden input을 만들고 이놈의 value나 title 혹은 data 속성에다가 저장해 놓기만 하면, 나머진 종전처럼 해당 페이지의 DOM 접근이 가능한 Content Scripts에서 이곳에 저장된 정보를 읽고 message passing을 통해 background pages에 전달해주면 된다.

이 밖에도 사소한 것으로, 검사 결과를 보여주는 창을 마우스로 잡아서 이동시킬 수 있도록 하는 기능을 구현하는데, Safari에선 별문제 없던, HTML5의 Drag and Drop 기능을 빌려 쓰려 하였으나 drag시 마우스의 위치 값을 제대로 돌려받지 못하는 문제도 있어서 결국 약간 소모적일 수도 있는 Mouse events를 써야만 했다.

최근 많은 브라우저가 extensions 혹은 add-ons 형태로 사용자 입맛에 맞는 추가 기능을 제공하는 추세이고 또 각 브라우저가 가지고 있는 고유 API와 그 구현 방식도 서로의 차이점이 줄어들고 있기는 하지만, 아직은 개발자에게 혼동을 일으킬 수 있는 미묘한 차이를 보이면서 앞으로 어떤 통합된 개발 환경이 제공되었으면 하는 바람도 가지게 된다.

평소 img에다 필수도 아닌 title attribute을 사용하는 일은 거의 없었고 또 그래야 할 동기도 없었다. 그림에 대한 설명은 alt로도 충분하다고 생각했기 때문이다.

그런데 무조건 모든 그림과 관련된 정보를 alt의 속성으로 묶어서 쓰기엔 무리가 있고 가끔 간단한 그림의 보충 설명이나 제목은 alt보단 title 속성을 써주는 것이 더 적절한 때가 있단다.

alt 속성은 필수 요소로서 그림을 대체하는 내용이 들어가는데, 보통 그림이 없다고 가정했을 때 앞뒤 문맥을 자연스럽게 연결하는 내용을 대신 써주는 게 좋다. 그리고 간혹 생략 시에도 앞뒤 문맥이 자연스럽게 연결되면서 내용을 전달하는데 별 지장이 없다면 그냥 공백으로 놔두는 것도 가능하다. img를 위한 alt 그리고 title의 쓰임새 비교(이)란 제목의 글 마저 읽기 →

WordPress가 3.1로 갱신되었다는 소식을 듣고 얼른 갱신을 완료하였다. 그런데 한동안 있다 살펴보니 갑자기 블로그 옆구리에 달린 Category 링크가 작동하질 않았다.

문제의 원인을 알아보니, 평소 꼬리표 관리 기능 때문에 잘 쓰고 있는 Simple tags plugin과의 충돌로 밝혀졌다.

해결 방법은, Simple Tags 관리자 화면의 General 메뉴 속에 있는 Active tags for page 기능을 꺼주면 된단다.

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?') format('eot'),
       url('myfont-webfont.woff') format('woff'),
       url('myfont-webfont.ttf') format('truetype'),
       url('myfont-webfont.svg#svgFontName') format('svg');
}

새 @font-face 문법은 전에 문제가 되었던 Android 플랫폼에서도 잘 보인다고 함.
The New Bulletproof @Font-Face Syntax

Natasha Wescoat씨의 Sunrise라는 제목의 미술작품.

그냥 나무 그림이 좋다.

 없음.