A browser action with a popup that changes the page color

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

Chrome Extension Sample page 소스분석

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

Change the current page color

CALLS:

tabs.executeScript

SOURCE FILES:

1. 프로그램 설명

이번 코드는 page redder의 응용 버전이다.

browser action 클릭 후 popup에서 색상을 입력받아 현재 활성화된 페이지의 background color로 설정한다.

2. 소스코드 설명

manifest에서는 현재 활성화된 tab에 대한 수정이 이루어 지기 때문에 tab에 대한 permission을 추가해야한다.

추가로 popup.html 을 browser action 에 대한 이벤트로 추가한다.

관련 javascript가 저장된 js 파일은 popup.html에서 로드한다.

manifest.json

{

"name": "A browser action with a popup that changes the page color",

"description": "Change the current page color",

"version": "1.0",

"permissions": [

"tabs", "http://*/*", "https://*/*"

"browser_action": {

"default_title": "Set this page's color.",

"default_icon": "icon.png",

"default_popup": "popup.html"

"manifest_version": 2

}

popup.html

popup.html 은 코드가 긴 듯 하지만 실제 ui 코드는 div 로 버튼의 이름이 적힌 사각형 네 줄이 전부다.

이외에는 css설정이 직접 들어가 있다.

popup.js.를 호출한다.

<!doctype html>

<html>

<head>

<title>Set Page Color Popup</title>

<style>

body {

overflow: hidden;

margin: 0px;

padding: 0px;

background: white;

}

div:first-child {

margin-top: 0px;

}

div {

cursor: pointer;

text-align: center;

padding: 1px 3px;

font-family: sans-serif;

font-size: 0.8em;

width: 100px;

margin-top: 1px;

background: #cccccc;

}

div:hover {

background: #aaaaaa;

}

#red {

border: 1px solid red;

color: red;

}

#blue {

border: 1px solid blue;

color: blue;

}

#green {

border: 1px solid green;

color: green;

}

#yellow {

border: 1px solid yellow;

color: yellow;

}

</style>

</head>

<body>

<div id="green">green</div>

<div id="yellow">yellow</div>

</body>

</html>

popup.js

document.addEventListener에서 버튼 색상 div들에 대해서 array화 한 후 각 div에 대한 event listener를 등록한다.

이후 div를 클릭할때마다 각자 등록된 click함후가 호출된다.

tab의 background 색상 변경은 page redder와 마찬가지도 executeScript 함수를 사용한다.

변경될 색상은 이전 popup.html 의 div의 id로 지정해놓은 값을 참조한다.

// Copyright (c) 2012 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.
function click(e) {
chrome.tabs.executeScript(null,
{code:"document.body.style.backgroundColor='" + e.target.id + "'"});
window.close();
}

document.addEventListener('DOMContentLoaded', function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', click);
}
});

'Chrome Extension' 카테고리의 다른 글

Event Page Example (0)	2015.05.02
A browser action which changes its icon when clicked (0)	2015.05.02
Print this page (0)	2015.04.29
Page Redder (0)	2015.04.21
My Bookmarks (1)	2015.04.20

Mr.november11