Page Redder

[크롬 익스텐션 개발하기]

Chrome Extension Sample page 소스분석

https://developer.chrome.com/extensions/samples

Make the current page red

CALLS:

• browserAction.onClicked
• tabs.executeScript

SOURCE FILES:

• background.js
• manifest.json

1. 프로그램 설명

크롬 익스텐션 개발에 가장 처음 관심을 갖게 한 Sample이다.

해당 프로그램을 실행시키면 현재 활성화 된 웹페이지의 body 스타일에 background를 빨강으로 세팅한다.

내부 코드는 간단하지만 웹페이지에 대한 접근 권한을 얻을 수 있기 때문에 이후 활용도 및 확장성면에서 가장 유용한 코드이다.

[프로그램 실행 전 웹페이지]

[프로그램 실행 후 웹페이지]
body style 설정으로 배경 색상이 지정되었다.

2. 소스설명

manifest.json

이 프로그램의 권한 설정은 현재 active 상태인 Tab에서만 유효하도록 되어있다.

background에 대한 persistent 설정은 false로 사용자가 browser action (아이콘을 클릭)한 상태에서만 해당 js가 로딩 되도록 설정되어 있다.

모든 상황에 대해서 js를 삽입하고 싶다면 backgroud 옵션을 변경해야 한다. 

{

  "name": "Page Redder",

  "description": "Make the current page red",

  "version": "2.0",

  "permissions": [

    "activeTab"

  ],

  "background": {

    "scripts": ["background.js"],

    "persistent": false

  },

  "browser_action": {

    "default_title": "Make this page red"

  },

  "manifest_version": 2

}

background.js

user가 browser action(아이콘 클릭)을 발생시켰을 경우 에 대한 이벤트 리스너를 추가한다.

해당 조건 발생 시 chrome.tabs.executeScript 함수를 실행한다.

// Called when the user clicks on the browser action.

chrome.browserAction.onClicked.addListener(function(tab) {

  // No tabs or host permissions needed!

  console.log('Turning ' + tab.url + ' red!');

  chrome.tabs.executeScript({

    code: 'document.body.style.backgroundColor="red"'

  });

});

chrome.browserAction.onClicked.addListener(function callback)

-> browser action 아이콘이 클릭되었을 시 호출되며, browser action이 popup을 가지고 있을 경우에는 호출되지 않는다.

-> callback 내부는 function( tabs.Tab tab) 가 호출되며 tab 매개변수를 통해 현재 active 상태인 tab의 정보를 얻어올 수 있다.

-> tab 을 통해 얻어올 수 있는 정보는 url, title, width, height 등이 있다. (https://developer.chrome.com/extensions/tabs#type-Tab)

chrome.tabs.executeScript(integer tabId, object details, function callback) 

-> 해당 함수는 programmatic injection 타입으로 page 안에 javascript 코드를 삽입한다. 

-> detail 파라미터에는 javascript 또는 css 코드나 파일 삽입이 가능하다. 

-> callback 파라미터는 javascript 함수가 실행 완료된 후 호출될 함수이다.

-> https://developer.chrome.com/extensions/tabs#method-executeScript