Blog

[크롬 익스텐션 Tutorial] 내부, 외부 링크

August 20, 2015

[크롬 익스텐션 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"
],