[크롬확장프로그램] 툴바 팝업 만들기

2019. 7. 31.

관련 지식
chrome, extension

크롬 확장플러그인의 툴바 버튼을 클릭했을때 팝업 메뉴가 나오는 기능을 만들어보겠습니다. 디자인을 예쁘게 입히면 PushBullet 같이 채팅 기능도 만들수 있지만, 저는 불가능하므로 간단하게 버튼만 추가하도록 하겠습니다.

manifest.json 작성

먼저 manifest.json 을 만들거나 또는 수정해야 합니다.

{
  "name": "yjh-tools",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "내꺼",
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_title": "내꺼",
    "default_popup" : "popup/popup.html"
  },
  "permissions": [
    "background",
    "tabs",
    "https://*/*",
    "http://*/*"
  ]
}

여러 값이 있지만 툴바 팝업을 위해 가장 중요한건은 browser_action의 default_popup 항목입니다. 버튼을 클릭하면 해당 속성에 정의된 HTML을 화면에 보여주게 됩니다.

팝업 HTML 생성

HTML은 웹 개발자라면 누구나 만드실수 있을것입니다. 따라서 별다른 설명이 필요없지만 한가지 주의점이 있습니다.

<!DOCTYPE html>
<html lang="ko" xml:lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
    .menu { width:130px;}
    .menu button { width:100%; }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
    <div class="menu">
      <button id="getimage">이미지추출</button>
      <button id="youtube">유튜브 다운로드</button>
    </div>
    <script>
    // 인라인 스크립트는 사용불가
    </script>
  </body>
</html>

짧은 javascript 코드의 경우 편의상 인라인 스크립트로 작성할수도 있는데, 크롬 확장프로그램에서 인라인 스크립트는 보안상의 이유로 사용할수 없습니다.

따라서 반드시 <script src="popup.js"></script> 와 같이 스크립트 파일을 로딩하는 형태로 만들어야 합니다.

버튼 클릭시 화면 컨트롤

팝업 HTML에서 버튼 이벤트를 추가하고 디자인을 컨트롤하는건 늘 개발하던 방법과 크게 다르지 않습니다. 그런데 팝업 화면에서 버튼을 클릭했을때, 크롬의 탭화면에서 실행중인 사이트의 화면을 조작하고 싶을때도 있습니다. 크롬에서 제공하는 executeScript() 함수를 사용하면 됩니다.

js 파일 실행
보통 manifest.json 파일에서 로딩하는 background.js 에서 사용하던 executeScript() 함수지만 이 함수는 팝업 HTML에서도 여전히 사용 가능합니다.
```
chrome.tabs.executeScript(null, {
 file : 'JS파일'
}, function() {
 window.close();
});
```
세번째 파라미터는 executeScript() 함수 종료후 호출되는 콜백함수 이므로 팝업창을 닫는 코드를 넣을수 있습니다.
js 코드 실행
매우 간단한 스크립트 한줄을 실행하기 위해 .js 파일을 만드는것은 상당히 비효율적입니다. 이럴땐 코드를 실행할수도 있습니다.
```
chrome.tabs.executeScript(null, {
 code:"console.log('run script');"
}, function() {
 window.close();
});
```
동일한 함수에서 두번째 파라미터만 다르게 설정하면 됩니다. 매우 간단하죠?

위 두가지 방식 모두, 현재 보고있는 탭화면의 HTML에서 자바스크립트가 실행됩니다.

최종 샘플

manifest.json)

{
  "name": "yjh-tools",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "내꺼",
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_title": "내꺼",
    "default_popup" : "popup/popup.html"
  },
  "permissions": [
    "background",
    "tabs",
    "https://*/*",
    "http://*/*"
  ]
}

popup.html)

<!DOCTYPE html>
<html lang="ko" xml:lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
    .menu { width:130px;}
    .menu button { width:100%; }
    </style>
    <script src="popup.js"></script>
  </head>
  <body>
    <div class="menu">
      <button id="getimage">이미지추출</button>
      <button id="youtube">유튜브 다운로드</button>
    </div>
  </body>
</html>

popup.js)

'use strict';
function getimage() {
  chrome.tabs.executeScript(null, {
    file : 'getimage.js'
  }, function() {
    window.close();
  });
}
function youtube() {
  chrome.tabs.executeScript(null, {
    file : 'youtube/response.js'
  }, function(obj) {
    chrome.tabs.executeScript(null, {
      code:"document.querySelector('#downloadstation a').click();"
    }, function() {
      window.close();
    });
  });
}
document.addEventListener('DOMContentLoaded', function () {
  var btns = document.querySelectorAll('button');
  for (var i = 0; i < btns.length; i++) {
    let btn = btns[i];
    if(btn.id == "getimage") {
      btn.addEventListener('click', getimage);
    }
    else if(btn.id == "youtube") {
      btn.addEventListener('click', youtube);
    }
  }
});

저작자표시 비영리 변경금지

'크롬' 카테고리의 다른 글

크롬 오프라인 설치파일 다운로드 경로 (0)	2019.09.27
[크롬확장프로그램] 웹스토어 게시하기 (2)	2019.08.16
[크롬확장프로그램] 뉴스 광고 차단하기(Request cancel 하기) (0)	2019.05.31
[크롬확장프로그램] 시놀로지 NAS를 이용한 유튜브 다운로드 2/2 (0)	2019.03.22
[크롬확장프로그램] 시놀로지 NAS를 이용한 유튜브 다운로드 1/2 (0)	2019.03.21

쓸데없는 코딩하기