CLD

Chrome Extension Sample page 소스분석

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

CLD

Displays the language of a tab

CALLS:

• browserAction.setBadgeText
• tabs.detectLanguage
• tabs.onSelectionChanged
• tabs.onUpdated
• tabs.query

SOURCE FILES:

• background.js
• manifest.json

1. 프로그램 설명

현재 active 상태입 탭의 language를 읽어들어 browser action 아이콘에 반영하여 보여준다. 

탭 이동 이벤트를 인식한 후 language 를 읽어들이는 코드가 핵심이다.

2. 소스코드 설명

manifest.json

탭 페이지에 직접적으로 관여하지 않는 프로그램 이기 때문에 별도의 권한은 필요하지 않다.

{
  "name": "CLD",
  "description": "Displays the language of a tab",
  "version": "0.3",
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
      "default_name": "Page Language"
  },
  "manifest_version": 2
}

background.js

탭 이동이 발생할 수 있는 3가지 이벤트( onUpdated, onSelectionChanged, query({active: true, currentWindow: true} ) 에 각각 refreshLanguage를 등록했다.

chrome.tabs.detectLanguage(integer tabId, function callback)




함수를 사용하여 현재 탭의 primary language 값을 없어온다.

callback 함수 매개변수로 아래 코드를 등록하여 language 를 얻어온 후 실행될 동작을 정의했다.

{
    console.log(language);
    if (language == " invalid_language_code")
      language = "???";
    chrome.browserAction.setBadgeText({"text": language, tabId: selectedId});
  }

 chrome.browserAction.setBadgeText 함수를 사용하면 browser action 아이콘을 별도로 생성하지 않고 text를 입력할 수 있다.

// Copyright (c) 2009 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 selectedId = -1;
function refreshLanguage() {
  chrome.tabs.detectLanguage(null, function(language) {
    console.log(language);
    if (language == " invalid_language_code")
      language = "???";
    chrome.browserAction.setBadgeText({"text": language, tabId: selectedId});
  });
}

chrome.tabs.onUpdated.addListener(function(tabId, props) {
  if (props.status == "complete" && tabId == selectedId)
    refreshLanguage();
});

chrome.tabs.onSelectionChanged.addListener(function(tabId, props) {
  selectedId = tabId;
  refreshLanguage();
});

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  selectedId = tabs[0].id;
  refreshLanguage();
});