[Chrome Extension] 웹 크롤링 익스텐션 2

 이번 포스팅에서는 익스텐션 주요 파일들에 대해 알아보겠습니다.

 

Manifest.json

이 파일은 익스텐션의 메타데이터들을 담고 있습니다. 익스텐션의 이름, 버전, 권한 스크립트 파일 등을 정의합니다.

{
  "manifest_version": 3,
  "name": "세종이-세종대학교 과제알리미",
  "description": "세종대학교 과제알리미입니다.",
  "options_ui": {
    "page": "src/pages/options/index.html"
  },
  "background": {
    "service_worker": "src/pages/background/index.ts",
    "type": "module"
  },
  "action": {
    "default_popup": "src/pages/popup/index.html",
    "default_icon": {
      "32": "main.png"
    }
  },
  "icons": {
    "128": "img.png"
  },
  "permissions": [
    "storage",
    "notifications"
  ],
  "content_scripts": [
    {
      "matches": [
        "https://ecampus.sejong.ac.kr/*"
      ],
      "exclude_matches":["https://ecampus.sejong.ac.kr/mod/vod/viewer.php*",
      "https://ecampus.sejong.ac.kr/login.php*",
      "https://ecampus.sejong.ac.kr/mod/upfile/viewer.php*",
      "https://ecampus.sejong.ac.kr/"
    ],
      "js": [
        "src/pages/content/index.tsx"
      ],
      "css":["src/assets/styles/font.css"]
    }
  ],
  "web_accessible_resources": [
    {
      "resources": [
        "src/assets/styles/font.css",
        "src/assets/fonts/*",
        "src/assets/img/main.png",
        "src/assets/img/file.png",
        "src/assets/img/file2.png"
      ],
      "matches": ["*://*/*"]
    }
  ]
}

 제 실제 Manifast.json 을 가져왔습니다. 버젼과 이름 설명을 적을 수 있고, option,background,popup,content_scripts 파일의 경로, 브라우저에서 접근 가능한 익스텐션 자원도 넣을 수 있습니다. 버젼을 업데이트할 때마다 수동으로 일일이 manifast 도 수정해야하는 번거로움이 있었습니다.

 

 popup.js

팝업 파일은 익스텐션 아이콘을 클릭했을 때 나타나는 작은 창입니다. html 파일과 js파일을 사용할 수 있습니다.

제 익스텐션 Popup에는 자주 사용하는 링크의 바로가기를 추가해 두었습니다.

Background.js

백그라운드 파일은 익스텐션의 백그라운드에서 실행되는 스크립트입니다. 익스텐션의 수명 주기 동안 실행되고, 알림, 메시지처리, 주기적인 작업이 필요하다면 사용합니다.

  chrome.runtime.onUpdateAvailable.addListener(() => {
    chrome.runtime.reload()
  });

 

만약 익스텐션의 새로운 버전이 있다면 reload 메소드로 익스텐션을 업데이트 가능하게 합니다. 사용자가 최신 버전을 자동으로 사용할 수 있게 합니다.

 const logo = chrome.runtime.getURL('/src/assets/img/main.png');
  chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {
    if (message.action === "createNotification") {
      chrome.notifications.create({
        type: "basic",
        iconUrl: logo,
        title: message.title,
        message: message.message,
      });
    }
  });

이 코드는 content로부터 메시지를 전달 받는 역할을 합니다. 메시지의 action 파트가 createNotification 인 경우 알림을 생성하여 브라우저 우측하단에 띄울 수 있습니다. 

실제 제가 작성한 마감일자 알림 코드인데 벌써 코드가 구려보이네요. 다시 리팩토링을 해야겠습니다. 

우선 과목정보와 과제들을 불러와서 마감일자가 48시간보다 적게 남은 과목을 필터링합니다. 후에 알람 기능이 켜져있다면 chrome.runtime.sendMessage로 Background.js 에게 문자열을 보낼 수 있습니다. 

 

Content Script

콘텐트스크립트는 웹페이지에 직접 주입되어 실행되며, 페이지의 DOM을 직접 조작할 수 있습니다. 따라서 웹스토어에 있는 번역 익스텐션이나, 이미지 서치 익스텐션 등의 주요 로직은 content script에 작성이 되어야 합니다. 또한 content Script 는 웹페이지와는 별도의 독립적인 공간에서 동작하는데, 이 때문에 background와의 통신에서 메시지를 주고받는 식의 데이터 전송만 가능합니다. 

 저의 경우 크롤링 로직이 여기에 포함되어 실행됩니다.