본문 바로가기

크롬

DOM에서 특정 element를 제거하는 크롬 확장 프로그램 아주 간단한 확장 프로그램을 하나 만들었다. 웹 페이지를 로딩할 때 특정한 dom element를 문서에서 제거하는 것이다. 설정 페이지 등 일반적인 형태로 사용할 수 있는 기능들을 빼고 dom element를 제거하는 기능 구현에 집중했더니 개발 시간은 길지 않았다. 소스 코드는 다음과 같다. // manifest.json{ "manifest_version": 2, "name": "Dom Element Remover", "description": "This extension removes pre-specific elements from HTML document.", "version": "1.0", "content_scripts": [ { "matches": ["http://*.daum.net/*"], .. 더보기
Google Hangouts manifest.json 정리 개인적으로 크롬 확장 프로그램(또는 크롬 익스텐션)에 관심이 있는 편이다. 그래서 이전에 간단한 확장 프로그램을 만들어보기도 했고. 크롬 확장 프로그램을 실행시키기 위해 필요한 파일 중에 하나가 manifest.json인데 Google Hangouts의 manifest.json을 예제로 삼아 간단히 정리해봤다. Hangouts가 manifest.json의 모든 항목을 사용하는 것은 아니므로 manifest.json의 전체 내용을 파악하긴 어렵지만 시작점으로는 충분히 의미있으리라 생각한다. { // background 페이지는 익스텐션의 프로세스를 실행한다. // extensions의 기본 lifecycle에 대한 이해가 필요함 // html이 필요 없는 경우 'scripts'를 name으로 하고 java.. 더보기
크롬 확장 프로그램 만들기 지난 화요일 페이스북에 있는 JSLounge라는 JavaScript 커뮤니티에서 크롬 확장 프로그램을 만드는 방법에 대해 발표했다. JSLounge는 지난 여름에 만들어진 JavaScript 커뮤니티로 온라인과 비정기적인 세미나를 통해 정보를 공유하는 모임이다. 발표한 내용은 이 블로그에 있는 크롬 확장 프로그램 - QRCode Generator 만들기이다. 내용은 거의 동일하며 초반에 확장 프로그램에 대한 간단한 소개를 추가했다. 크롬 확장 프로그램 만들기 - Qr code generator from JeongHwan Jang 종종 이와 같이 발표를 할 생각이다. 더보기
크롬 확장 프로그램 - QRCode Generator 만들기 QRCode Generator 소개QRCode Generator는 현재 탭에 열려있는 페이지의 주소를 QR Code로 만들어주는 크롬 확장 프로그램이다. 동작하는 모습은 다음과 같다. 개발 준비개발을 위해 별도로 준비할 도구는 없다. 우선 확장 프로그램에서 사용할 여러 파일들을 저장할 폴더를 하나 생성한다. 그리고 설정 > 도구 > 확장 프로그램 메뉴를 선택하여 우측 상단의 개발자 모드를 체크하여 개발자 모드를 활성화한다. 개발자 모드를 활성화할 경우 압축되지 않은 확장 프로그램을 로드할 수 있으며 확장 프로그램을 디버그할 수 있는 팝업 검사를 사용할 수 있다. 팝업 검사를 선택하면 일반 웹페이지를 디버깅할 때 사용하는 개발자 도구가 확장 프로그램과 함께 실행된다. 프로그램 구성이 프로그램에서 사용한 파.. 더보기

반응형