DOM에서 특정 element를 제거하는 크롬 확장 프로그램

2015.02.28 12:48

아주 간단한 확장 프로그램을 하나 만들었다. 웹 페이지를 로딩할 때 특정한 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/*"],

      "js": ["jquery.js", "bg.js"],

      "run_at": "document_end"

    }

  ],

  "permissions": ["http://*.daum.net/"]

}


// bg.js

var $target = $('#banner');


if ($target.length) {

$target.remove();

}


두 개의 파일이면 충분하다. manifest.json에서 선언한 것과 같이 사용자가 다음 사이트에 접근하면(matches) dom의 구성이 끝난 시점에(run_at) 파일(js)을 삽입한다. 그러면 bg.js 파일이 실행되고 문서에서 id가 banner인 엘리먼트를 찾아 해당 엘리먼트가 존재할 때 엘리먼트를 제거한다.


다음 사이트 이외의 곳에서는 확장 프로그램의 기능이 실행되지 않기를 원하므로 permissions에도 도메인을 추가했다.


이 프로그램을 더 개선한다면 사용자에게 지울 엘리먼트를 선택하는 방법을 제공할 수 있을 것이다. 지금은 bg.js 파일에 직접 선택자를 지정했지만 사용자가 변경할 수 있게 한다면 더 편리한 프로그램이 될 것이다. 그리고 다음 사이트에만 적용되는 기능을 다른 사이트 혹은 임의의 사이트에서도 동작하도록 변경할 수 있을 것이다.

nundefined ETC Chrome, extensions, 크롬, 확장프로그램

Google Hangouts manifest.json 정리

2013.08.06 01:30

개인적으로 크롬 확장 프로그램(또는 크롬 익스텐션)에 관심이 있는 편이다. 그래서 이전에 간단한 확장 프로그램을 만들어보기도 했고. 크롬 확장 프로그램을 실행시키기 위해 필요한 파일 중에 하나가 manifest.json인데 Google Hangouts의 manifest.json을 예제로 삼아 간단히 정리해봤다. Hangouts가 manifest.json의  모든 항목을 사용하는 것은 아니므로 manifest.json의 전체 내용을 파악하긴 어렵지만 시작점으로는 충분히 의미있으리라 생각한다.


{

   // background 페이지는 익스텐션의 프로세스를 실행한다.

   // extensions의 기본 lifecycle에 대한 이해가 필요함

   // html이 필요 없는 경우 'scripts'를 name으로 하고 javascript 파일의 배열을 value로 설정 가능

   // 브라우저가 빨리 시작되어야 하는 경우에는 permission에 background를 설정한다.

   "background": {

      "page": "background.html"

      // 여기에 persistent를 설정할 수 있는데 특별한 설정이 없다면 true로 설정된 것

   },


   // 브라우저 액션을 위한 설정. 툴바 우측에 아이콘이 생긴다.

   "browser_action": {

      "default_icon": {

         "19": "images_2/presence/offline_19.png",

         "38": "images_2/presence/offline_38.png"

      },

      // 아이콘에 마우스를 올렸을 때 나타나는 툴팁

      "default_title": "__MSG_CHROME_EXT_SHORT_NAME__"

   },


   // 웹페이지의 컨텍스트에서 실행되는 자바스크립트 파일

   // DOM을 사용하여 브라우저의 내용에 접근, 변경이 가능

   "content_scripts": [ {

      // 아래 matches로 선택한 페이지에서 모든 프레임에 삽입할지, top 프레임에만 삽입할지 여부

      "all_frames": true,

      // 대상 페이지에 삽입할 javascript. 배열에 표시된 순서대로 삽입됨

      "js": [ "scripts/ace-contentscript.js" ],

      // 필수. js를 삽입할 대상 페이지를 결정하는 규칙

      "matches": [ "*://*.google.com/mail/*" ],

      // js가 삽입될 때를 지정.

      // document_start: css 다음에 삽입

      // document_end: DOM이 완료되면 삽입. (DomContentLoaded)

      // document_idle: 기본값. document_end와 window.onload 이벤트 사이에서 브라우저가 적절히 삽입

      "run_at": "document_start"

   }, {

      "all_frames": true,

      // 조건에 맞는 URL은 대상에서 제외.

      "exclude_globs": [ "*prop=docs*" ],

      "js": [ "scripts/ace-contentscript.js" ],

      "matches": [ "*://*.google.com/talkgadget/notifierclient*" ],

      "run_at": "document_end"

   }, {

      "all_frames": true,

      "exclude_globs": [ "*prop=docs*" ],

      "js": [ "scripts/ace-contentscript.js" ],

      "matches": [ "*://*.google.com/talkgadget/_/chat*" ],

      "run_at": "document_end"

   }, {

      "all_frames": true,

      "exclude_globs": [ "*prop=docs*" ],

      "js": [ "scripts/ace-contentscript.js" ],

      "matches": [ "*://*.google.com/u/*/talkgadget/_/chat*" ],

      "run_at": "document_end"

   } ],


   // 기본 보안 제약

   // 1. eval 및 동일한 기능을 사용하여 문자열로 된 스크립트 실행 불가

   // 2. inline 스크립트 실행 불가

   // 3. local script와 객체 리소스만 로드 가능

   //

   // inline script 보안 해제: unsafe-inline

   // remote script/object 보안 해제: 필요한 origin 등록

   // eval 보안 해제: unsafe-eval

   "content_security_policy": "script-src 'self' https://*.google.com https://feedback.googleusercontent.com ; object-src 'self'",


   // _locales의 서브디렉토리를 지정한다. _locales 디렉토리가 있는 경우에는 필수

   // _locales 디렉토리가 없다면 빠져야 한다.

   "default_locale": "en",


   // 132자 이내의 설명. management ui와 스토어에 모두 노출됨

   "description": "__MSG_CHROME_EXT_DESCRIPTION__",


   // 아이콘

   // extensions의 경우 128x128과 48x48이 필수

   // 16x16의 경우 favicon용

   "icons": {

      "128": "images_2/icon-128x128.png",

      "48": "images_2/icon-48x48.png"

   },


   // 개발 과정에서 extension의 유일한 Id를 만들기 위해 사용.

   // crx로 패키징한 후 manifest.json 파일을 보면 확인 가능

   "key": "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDsDApubb73tPfYlNIFxDu3K3/EHgV6/YOJXJkld1OZ20jW/cOht1j0NggnXhQYuu1mXFUufud4I2N7b5ydyg09gcM9Va3Zk17RhNV9smbPHOd4XlzJeXifX/9MgHPu4FzCen3CiSXsOeAELJIXEuT28xICriuUko/rNPwGeIB9VwIDAQAB",


   // 항상 2

   "manifest_version": 2,


   // 최소 실행 가능한 크롬 버전

   "minimum_chrome_version": "26.0.0.0",


   // extension 이름. 45자 이하. install dialog, management ui, store에 노출

   // i18n을 사용하기 위해 아래와 같이 설정하고 프로그램에서 변경 가능

   "name": "__MSG_CHROME_EXT_SHORT_NAME__",


   // extension의 동작을 결정하는 옵션을 수정할 수 있는 페이지

   "options_page": "settingsdialog.html",


   // extensions에서 사용할 권한, API, 접근할 도메인 등등

   // 패턴: 접근 가능한 호스트. cross-origin XHR, cookie, 프로그램적으로 삽입되는 컨텐트 스크립트 등

   // background: 크롬이 빨리 뜨고 늦게 종료되도록하여 extension이 더 오래 살아있도록 함 (크롬 실행되지 않아도 extension 실행)

   // cookies: chrome.cookie 모듈 사용시

   // idle: chrome.idle 모듈 사용시

   // notifications: 권한 확인(checkPermission()) 없이 notification API 사용

   // tabs: chrome.tabs 또는 chrome.windows 모듈 사용시

   "permissions": [ "*://*.google.com/*", "*://*.orkut.com/*", "background", "cookies", "idle", "notifications", "tabs" ],


   // NPAPI plugins 설정

   "plugins": [ {

      // plugin 위치. manifest 파일로부터의 상대적 경로

      "path": "plugin/ace.dll",

      // 웹 페이지에서 접근 가능 여부

      // true: 일반 웹 페이지에서 로드 가능

      // false: extensions에서만 로드 가능

      "public": false

   }, {

      "path": "plugin/ace.bundle",

      "public": false

   }, {

      "path": "plugin/libace.so",

      "public": false

   } ],

   "requirements": {

      "plugins": {

         "npapi": false

      }

   },


   // 자동 업데이트를 위한 경로 설정

   "update_url": "https://clients2.google.com/service/update2/crx",


   // .으로 구분하는 4개의 숫자. 0 ~ 65535에서 사용. 0으로 시작할 수 없음.

   // 자동 업데이트시 이 숫자를 기준으로 삼는다.

   // 앞 자리의 숫자가 크면 뒷 자리의 숫자와 관계 없이 새로운 버전 (ex. 1.2.0 > 1.1.9.999)

   "version": "2013.717.433.1",


   // 웹에서 직접 접근 가능한 extensions의 리소스

   "web_accessible_resources": [ "*" ]

}


manifest.json 파일의 전체 내용을 알고 싶다면 크롬 개발자 사이트의 manifest 파일에 대한 페이지를 방문해보기 바란다.




nundefined ETC Chrome, chrome extensions, extensions, Google, google hangouts, hangouts, manifest, manifest.json, 구글, 크롬, 크롬 익스텐션, 크롬 확장 프로그램

  1. Blog Icon

    비밀댓글입니다

크롬 확장 프로그램 만들기

2012.10.21 21:32

지난 화요일 페이스북에 있는 JSLounge라는 JavaScript 커뮤니티에서 크롬 확장 프로그램을 만드는 방법에 대해 발표했다. JSLounge는 지난 여름에 만들어진 JavaScript 커뮤니티로 온라인과 비정기적인 세미나를 통해 정보를 공유하는 모임이다. 


발표한 내용은 이 블로그에 있는 크롬 확장 프로그램 - QRCode Generator 만들기이다. 내용은 거의 동일하며 초반에 확장 프로그램에 대한 간단한 소개를 추가했다.



종종 이와 같이 발표를 할 생각이다.


nundefined Presentations extensions, jslounge, 익스텐션, 크롬