현재 수강 중인 기계 학습 심화 수업에서 프로젝트를 진행 중인데, 우리 팀의 주제는 문자 captcha solver 만들기다,,, 나는 그 중 captcha solver 모델을 주입한 크롬 확장 프로그램 만들기를 맡았다,,,,, 확장 프로그램 개발에 관심 있었지만, 한 번도 해본 적 없었어서 바로 내가 하겠다고 했다! 어차피 확장 프로그램 개발 경험이 있는 사람이 없어서 누군가 나서야 하는 상황이었다

오늘은 그 과정을 정리해보겠다. 크롬 확장 프로그램 만드는 게 처음이라 살짝 쫄았는데 그냥 웹 페이지 만드는 작업이랑 거의 똑같다. 어렵지 않다. 다만, ai 모델을 주입하는 게 살짝 어려울 것 같지만 이는 내일 마무리 작업할 것 같다!

본론

가장 먼저 내가 작업중인 리포지토리다!

Chrome-Extension

Captcha-Recognition-Team

1. 정의

확장 프로그램을 개발할 때 보통은 프론트 로직으로만 구현하기도 하고, db 저장이 필요하거나 하면 백엔드쪽도 붙는 거 같다. 웹 개발을 해본 사람들이라면 분명 쉽게 적응할 수 있다. 도전해보자!

2. 과정

•

manifest.json ← 확장 프로그램 만드는 데 꼭 필요한 녀석이다. 이 녀석을 통해 만든 웹페이지를 확장 프로그램 형식으로 올릴 수 있다.

{
  "manifest_version": 3,
  "name": "Capture Extension",
  "version": "1.0",
  "permissions": ["activeTab"],
  "action": {
    "default_popup": "popup.html"
  },
  "background": {
    "service_worker": "background.js"
  }
}
JSON
복사

•

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Capture Extension</title>
    <script src="popup.js"></script>
    <style>
      body {
        width: 300px;
        height: 150px;
      }
    </style>
  </head>
  <body>
    <button id="captureButton">Capture</button>
    <div id="imageContainer"></div>
  </body>
</html>
HTML
복사

•

popup.js

◦

따로 만드는 이유 : 크롬확장프로그램은 보안상 html에 inline방식으로 js 코드를 넣을 수 없다!! 실제로 inline으로 js코드를 넣어보면 동작하지 않는 걸 확인할 수 있다. 하지만, 이렇게 js 파일을 분리해 넣어주면 넣어진다!

◦

아래 코드는 나는 캡처 기능을 만들어 보고 싶어 넣은 코드인데, 간단한 확장 프로그램 만들기 테스트만 해보고 싶은 사람은 그냥 popup.js 파일 자체를 만들지 말자!

document.addEventListener("DOMContentLoaded", function () {
  const captureButton = document.getElementById("captureButton");
  const imageContainer = document.getElementById("imageContainer");
  let isCapturing = false;
  let startX, startY;

  captureButton.addEventListener("click", function () {
    if (!isCapturing) {
      isCapturing = true;
      captureButton.textContent = "Stop Capture";
      document.body.style.cursor = "crosshair";
    } else {
      isCapturing = false;
      captureButton.textContent = "Capture";
      document.body.style.cursor = "default";
    }
  });

  document.addEventListener("mousedown", function (event) {
    if (isCapturing) {
      startX = event.clientX;
      startY = event.clientY;
    }
  });

  document.addEventListener("mouseup", function (event) {
    if (isCapturing) {
      const endX = event.clientX;
      const endY = event.clientY;

      const left = Math.min(startX, endX);
      const top = Math.min(startY, endY);
      const width = Math.abs(endX - startX);
      const height = Math.abs(endY - startY);

      chrome.tabs.captureVisibleTab(function (screenshotUrl) {
        const canvas = document.createElement("canvas");
        const context = canvas.getContext("2d");

        const image = new Image();
        image.onload = function () {
          canvas.width = width;
          canvas.height = height;
          context.drawImage(image, left, top, width, height, 0, 0, width, height);

          const capturedImageUrl = canvas.toDataURL("image/png");
          const capturedImage = new Image();
          capturedImage.src = capturedImageUrl;

          imageContainer.innerHTML = "";
          imageContainer.appendChild(capturedImage);
        };
        image.src = screenshotUrl;
      });

      isCapturing = false;
      captureButton.textContent = "Capture";
      document.body.style.cursor = "default";
    }
  });
});
JavaScript
복사

•

background.js

◦

이 부분도 나는 추가적인 작업을 위해 만들어둔 것인데, 간단한 테스트만 원하는 사람은 만들지 말자!

chrome.action.onClicked.addListener(function (tab) {
  chrome.tabs.captureVisibleTab(function (screenshotUrl) {
    // 캡처된 이미지를 사용하여 원하는 작업 수행
    // 예: 이미지 저장, API 전송 등
    console.log(screenshotUrl);
  });
});
JavaScript
복사