A browser action which changes its icon when clicked

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

Chrome Extension Sample page 소스분석

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

A browser action which changes its icon when clicked

Change browser action color when its icon is clicked

CALLS:

• browserAction.onClicked
• browserAction.setIcon

SOURCE FILES:

• background.js
• icon1.png
• icon2.png
• icon3.png
• icon4.png
• icon5.png
• manifest.json

1. 프로그램 설명 

오른쪽 상단의 extension 버튼을 클릭하면 아이콘의 색상이 변경된다. 

extension의  현재 동작 상태를 표현하고자 할떄 응용하면 된다.

2. 소스코드 설명

manifest.json

background.js 설정 이외에는 없다.

browser action 아이콘만 변경 되기 때문에 별도의 권한 설정이 필요 없다.

{

  "name": "A browser action which changes its icon when clicked",

  "description": "Change browser action color when its icon is clicked",

  "version": "1.2",

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

  "browser_action": {

      "name": "Click to change the icon's color"

  },

  "manifest_version": 2

}

background.js

chrome.browserAction.setIcon 함수를 사용하여 아이콘의 path를 변경한다.

별도의 icon refresh 함수를 사용하지 않아도 자동으로 화면에서 변경된다.

// Copyright (c) 2011 The Chromium Authors. All rights reserved.

// Use of this source code is governed by a BSD-style license that can be

// found in the LICENSE file.

var min = 1;

var max = 5;

var current = min;

function updateIcon() {

  chrome.browserAction.setIcon({path:"icon" + current + ".png"});

  current++;

  if (current > max)

    current = min;

}

chrome.browserAction.onClicked.addListener(updateIcon);

updateIcon();