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);
})();