Chrome Extension - CSS/JS 활용기초

Chrome Extension - css/js 활용기초

 - 링크 색 바꾸기 및 페이지 맨 위 / 맨 아래 이미지 버튼

manifest.json

{

"name" : "rainbow_rink",

"content_scripts": [{

"matches": ["http://*/*", "https://*/*"],

"css" : ["css/rainbow.css"], //링크에 레인보우 효과

"js": ["script/goto.js"] //페이지 이동 버튼

}],

"manifest_version": 2,

"version" : "1.0"

}

css/rainbow.css

@CHARSET "EUC-KR";

@-webkit-keyframes rainbow {

  0%   {color: #f00;}

  17%  {color: #f90;}

  33%  {color: #ff0;}

  50%  {color: #0f0;}

  67%  {color: #00f;}

  83%  {color: #60f;}

  100% {color: #90f;}

}

a:hover {

  -webkit-animation: rainbow infinite 1s;

}

script/goto.js

(function() {

//---------------

//top 이미지 생성

//---------------

var top    = document.createElement('a'),

topImg     = document.createElement('img');

topImg.src = chrome.extension.getURL('img/top.png');

//------------------------------

//이미지를 클릭하면 0,0으로 이동

//------------------------------

top.addEventListener('click', function() {

window.scrollTo(0, 0);

});

top.appendChild(topImg);

//------------------

//bottom 이미지 생성

//------------------

var bottom    = document.createElement('a'),

bottomImg     = document.createElement('img');

bottomImg.src = chrome.extension.getURL('img/bottom.png');

//------------------

//bottom 이미지 동작

//------------------

bottom.addEventListener('click', function() {

window.scrollTo(0, document.body.scrollHeight);

});

bottom.appendChild(bottomImg);

//---------------

//division 만들기

//---------------

var wrap = document.createElement('div');

wrap.style.position = 'fixed';

wrap.style.left     = 0;

wrap.style.top      = 0;

wrap.style.zIndex   = 10000; //zindex는 z축의 겹침에 대한 순서를 결정

//--------

//끼워 넣기

//--------

wrap.appendChild(top);

wrap.appendChild(bottom);

document.body.appendChild(wrap);

})();