Print this page

[크롬 익스텐션 개발하기]

Chrome Extension Sample page 소스분석

https://developer.chrome.com/extensions/samples

Print this page

Adds a print button to the browser.

CALLS:

• browserAction.onClicked
• tabs.update

SOURCE FILES:

• background.js
• manifest.json
• print_16x16.png

1. 프로그램 설명 

프린트 모양의 아이콘 클릭 시 현재 Active 상태인 탭의 print 화면이 생성된다.

프린트 화면에서 '인쇄' 버튼을 누르면 출력되는 간단한 소스

현재로서는 큰 활용 용도가 없어 보인다.

응용적 측면에서는 Active Tab 전체 페이지 인쇄가 아닌 일부 영역 선택 후 그 부분만 출력할 수 있는 기능이 있다면 좋을 것 같다.

Extension을 활용하여 프로그램 실행 시 웹 페이지 일부를 추출하고 print 함수를 사용하면 될 것 같다.

2. 소스설명

manifest.json

해당 소스는 특별한 manifest 설정이 없다.
background 소스로 background.js 파일을 링크했으며, 실행 권한을 tag과 특정 웹사이트로 한정했다.

{

  "name": "Print this page",

  "description": "Adds a print button to the browser.",

  "version": "1.1",

  "background": {

    "scripts": ["background.js"]

  },

  "permissions": [

    "tabs", "http://*/*", "https://*/*"

  ],

  "browser_action": {

      "default_title": "Print this page",

      "default_icon": "print_16x16.png"

  },

  "manifest_version": 2

}

background.js

오른쪽 상단의 프린트 버튼을 클릭했을 시 실행되야할 함수를 Listener에 추가했다.

함수 실행 시 javascript의 print 함수를 호출한다.

chrome.tabs.update함수를 사용하여 현재 active 상태인 tab 윈도우에 url로 print() 자바스크립트 함수를 실행한다.

실제 웹 주소창에 javascript:window.print(); 를 입력하면 print 페이지로 이동한다.

// Called when the user clicks on the browser action.

chrome.browserAction.onClicked.addListener(function(tab) {

  var action_url = "javascript:window.print();";

  chrome.tabs.update(tab.id, {url: action_url});

});

해당 소스 코드를 응용하여 아래와 같이 url을 변경하면

프린트 버튼을 클릭할 시 현재 active 탭에서 google.com으로 이동가능하다.

chrome.browserAction.onClicked.addListener(function(tab) {

  var action_url = "http://google.com";

  chrome.tabs.update(tab.id, {url: action_url});

});