[크롬 익스텐션 Tutorial] 내부, 외부 링크
크롬 익스텐션 Tutorial 내부, 외부 링크
링크 설정할 때, 익스텐션 내부에서 움직이는 것과 브라우저의 페이지를 변경하는 것 2가지가 있는데, 파라미터 전달하는 부분이 약간 다르다.
html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Chrome Extension Test</title>
<style>
body {
min-width: 400px;
margin: 10px;
}
</style>
<script src="test.js"></script>
</head>
<body>
<div id="result"></div>
</body>
</html>
js
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('result').innerHTML="<span id='outlink' style='cursor:pointer;'>comixest.com</span><br><span id='inlink' style='cursor:pointer;'>다른 페이지</span>";
document.getElementById("outlink").addEventListener("click", myFunc, false);
document.getElementById("outlink").myParam = "http://www.comixest.com";
function myFunc(evt) {
goURL(evt.target.myParam);
}
document.getElementById("inlink").addEventListener("click", myFunc2, false);
document.getElementById("inlink").myParam = "page2.html";
function myFunc2(evt) {
goURLin(evt.target.myParam);
}
});
function goURL(key) {
chrome.tabs.getCurrent(function (tab) {
chrome.tabs.update({url: key});
});
}
function goURLin(key) {
document.location.href=key;
}
html은 그냥 div로 영역만 잡아 놓고, 나머지는 전부 js에서 했다.
브라우저의 URL을 변경하려면 permission 에서 tabs 를 설정해야 한다.
"permissions": [](#) "tabs" ],
Array
