관련 지식
#javascript #chrome-extension

크롬 브라우저의 확장 프로그램을 만들어보겠습니다. 만들어 볼 기능은 보고 있는 웹페이지의 모든 이미지를 모아서 보는 기능입니다.

뽐뿌

제가 자주가는 뽐뿌 사이트입니다. 여기서 만든 크롬 플러그인을 실행시키면 아래와 같이 보이게 됩니다.

모아보기

너무 작아서 제대로 보이진 않겠네요. 왜 이렇게 보는지는 중요하지 않습니다. 그냥 한번 해보는거니까요.

manifest.json 작성

먼저 manifest.json 파일을 만들어야 합니다. 해당 파일에는 프로그램의 이름, 버전정보 같은것이 들어갑니다.

  1. {
  2. "name": "sample-imagemoa",
  3. "version": "0.0.1",
  4. "manifest_version": 2,
  5. "description": "이미지 추출기",
  6. "background": {
  7. "scripts": [
  8. "background.js"
  9. ],
  10. "persistent": false
  11. },
  12. "browser_action": {
  13. "default_title": "sample-imagemoa"
  14. },
  15. "permissions": [
  16. "https://*/*",
  17. "http://*/*"
  18. ]
  19. }

background 항목에는 실행할 js가 정의 됩니다. browser_action 에는 이름만 지정하였습니다. permissions 에는 모든 url에 대한 권한을 부여했습니다. 매우 간단한 기능을 만들것이므로 아이콘도 권한도 별로 필요하지 않습니다. manifest.json의 필수항목과 옵션 항목은 아래 URL을 참고하시면 좋습니다.

manifest 참고 : https://developer.chrome.com/extensions/manifest

background.js 작성

이번엔 이벤트 관리하는 백그라운드 스크립트를 만들어야 합니다. 여러 이벤트가 있을 수 있습니다. 확장 프로그램이 설치된 시점에 환경설정 화면을 보여주고 싶을수도 있고 웹사이트가 열렸을때 어떤 기능을 동자하고 싶을수도 있을 것입니다. 여기서는 설치된 확장프로그램 버튼을 클릭했을때 기능이 동작하도록 만들 것입니다.

  1. chrome.browserAction.onClicked.addListener(function(tab) {
  2. chrome.tabs.executeScript(tab.id, {
  3. file: 'getimage.js'
  4. });
  5. });

굉장히 간단한 소스입니다. chrome.browserAction 과 같은 객체는 지금까지 본적 없으시겠지만 onClickedaddListener 같은 이름은 꽤 친숙할 것입니다. 버튼을 클릭했을때 브라우저 탭에서 getimage.js 스크립트가 실행된다는 내용입니다.

getimage.js 작성

이 파일에서는 실제 기능에 해당하는 내용을 작성할 것입니다. 만들어야 할 기능을 순서대로 정리해보면 아래와 같습니다.

  1. 모든 div 영역 숨기기
  2. 모든 img 태그 찾기
  3. 찾은 img 태그의 url로 새로운 이미지 태그 만들기
  4. 이미지 태그를 추가하기

하나씩 해보겠습니다.

div 영역 숨기기)

  1. //웹페이지 내 모든 div 숨기기
  2. let divDoms = document.getElementsByTagName("div");
  3. for(let i = 0; i < divDoms.length; i++) {
  4. let dom = divDoms[i];
  5. dom.style.display = "none";
  6. }

바닐라JS로 만들어야 하다보니 스타일 적용하는게 매우 번거롭습니다. 이 내용은 함수의 사용법을 설명하는게 아니기 때문에 일반적인 함수의 이름에 대한 설명은 생략하겠습니다.

그 다음에 수행해야 할 2,3,4 항목은 한 세트로 동작하게 됩니다. 절차에는 없지만 찾은 이미지는 모두 하나의 div에 추가될 것입니다. 아래 예제에서 root 변수가 그 div 입니다.

이미지를 찾아서 하나의 div에 추가하기)

  1. let root = makeRoot(); //이미지를 담을 div 생성
  2. let imgDoms = document.getElementsByTagName("img"); //모든 이미지 찾기
  3. for(let i = 0; i < imgDoms.length; i++) {
  4. let dom = imgDoms[i];
  5. let url = dom.getAttribute("src");
  6. let divDom = makeDiv(url); //이미지가 담긴 div를 만든다
  7. root.appendChild(divDom);
  8. }

DOM 요소에 접근할때 JQuery를 사용하고 싶은 분도 계실듯 한데 웹페이지 안에서 JQuery를 사용하고 있어도 이 소스에서 바라보는 window 객체에는 JQuery 객체가 없습니다. 따라서 바닐라JS로만 접근 하셔야 합니다.

위 소스에서 사용된 makeRoot()makeDiv() 함수는 div 객체를 만드는 함수입니다. 이에 대한 내용은 전체 소스에서 보실수 있습니다.

확장 프로그램 추가하기

여기까지 진행하면 manifest.json, background.js, getimage.js 세 개의 파일이 있을 것입니다. 세 개의 파일을 하나의 디렉토리에 저장합니다.

추가버튼

크롬 메뉴에서 ‘도구 더보기 - 확장 프로그램’ 메뉴로 이동한 후 ‘압축해제된 확장 프로그램을 로드합니다.’ 버튼을 클릭하고 파일이 저장된 디렉토리를 선택하면 아래와 같이 추가가 됩니다.

확장

이제 아무 웹페이지에 접속하여 버튼 을 클릭하면 이미지를 결과화면 같이 보이실 겁니다.

정리

이번에 만든 기능은 정말 아무데서도 쓸모가 없는 기능이지만 크롬 확장 프로그램을 어떻게 만드는지 맛은 볼수 있었다고 생각됩니다. 아래 참고 URL을 가시면 버튼 넣는법, 이벤트 등 더욱 많은 예제가 있으니 한번 봐보시기 바랍니다.

참고 tutorial

최종 샘플

manifest.json)

  1. {
  2. "name": "sample-imagemoa",
  3. "version": "0.0.1",
  4. "manifest_version": 2,
  5. "description": "이미지 추출기",
  6. "background": {
  7. "scripts": [
  8. "background.js"
  9. ],
  10. "persistent": false
  11. },
  12. "browser_action": {
  13. "default_title": "sample-imagemoa"
  14. },
  15. "permissions": [
  16. "https://*/*",
  17. "http://*/*"
  18. ]
  19. }

background.js)

  1. chrome.browserAction.onClicked.addListener(function(tab) {
  2. chrome.tabs.executeScript(tab.id, {
  3. file: 'getimage.js'
  4. });
  5. });

getimage.js)

  1. (function() {
  2. function makeRoot() {
  3. let div = document.createElement('div');
  4. div.id = "asdfgh";
  5. div.style.width = "100%";
  6. return div;
  7. }
  8. function makeDiv(url) {
  9. let div = document.createElement('div');
  10. div.style.width = "7%";
  11. div.style.float = "left";
  12. div.style.padding = "5px";
  13. let imgTag = document.createElement('img');
  14. imgTag.src = url;
  15. imgTag.style.width = "100%";
  16. imgTag.style.height = "100%";
  17. div.appendChild(imgTag);
  18. return div;
  19. }
  20. //웹페이지 내 모든 div 숨기기
  21. let divDoms = document.getElementsByTagName("div");
  22. for(let i = 0; i < divDoms.length; i++) {
  23. let dom = divDoms[i];
  24. dom.style.display = "none";
  25. }
  26. let root = makeRoot(); //이미지를 담을 div 생성
  27. let imgDoms = document.getElementsByTagName("img"); //모든 이미지 찾기
  28. for(let i = 0; i < imgDoms.length; i++) {
  29. let dom = imgDoms[i];
  30. let url = dom.getAttribute("src");
  31. let divDom = makeDiv(url); //이미지가 담긴 div를 만든다
  32. root.appendChild(divDom);
  33. }
  34. document.body.append(root); //body에 추가한다
  35. })();