자니노트

[Plugin] Chrome Plugin 개발 방법 및 배포 본문

자바스크립트

[Plugin] Chrome Plugin 개발 방법 및 배포

zaninote 2023. 8. 28. 13:32

사용자가 확장 프로그램 아이콘을 클릭하면 현재 페이지의 배경색을 변경하는 확장 프로그램을 만들어 보겠습니다.

 

manifest.json: 이 파일은 확장 프로그램의 메타데이터를 포함합니다.

{
  "manifest_version": 2,
  "name": "Background Changer",
  "version": "1.0",
  "description": "Change the background color of the current page.",
  "permissions": ["activeTab"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/icon16.png",
      "48": "images/icon48.png",
      "128": "images/icon128.png"
    }
  },
  "icons": {
    "16": "images/icon16.png",
    "48": "images/icon48.png",
    "128": "images/icon128.png"
  }
}

popup.html: 이 파일은 팝업 UI의 HTML 코드를 포함합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Background Changer</title>
  <style>
    button {
      margin: 10px;
    }
  </style>
</head>
<body>
  <button id="changeColor">Change Background Color</button>
  <script src="popup.js"></script>
</body>
</html>

popup.js: 이 파일은 팝업 UI의 JavaScript 코드를 포함합니다.

document.getElementById('changeColor').addEventListener('click', function() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var currentTab = tabs[0];
    chrome.tabs.executeScript(currentTab.id, {code: 'document.body.style.backgroundColor = "red";'});
  });
});

이 예제에서는 manifest.json 파일에 확장 프로그램의 이름, 버전, 권한, 팝업 UI 등을 정의하였습니다. 

popup.html 파일에는 'Change Background Color' 버튼이 있고, 이 버튼을 클릭하면 popup.js 파일의 코드가 실행됩니다. 

popup.js 파일에서는 현재 탭의 배경색을 변경하는 코드를 실행합니다.

chrome.tabs.executeScript 외에도 몇 가지 다른 방법으로 스크립트를 실행할 수 있습니다.

 

Content Scripts: manifest.json 파일에 content_scripts를 정의하여 특정 웹페이지에 자동으로 스크립트를 삽입할 수 있습니다. 
예를 들어:

"content_scripts": [
  {
    "matches": ["http://*/*", "https://*/*"],
    "js": ["content.js"]
  }
]

위의 설정은 모든 http와 https 웹페이지에 content.js를 삽입합니다.

 

Message Passing: chrome.runtime.sendMessage와 chrome.runtime.onMessage.addListener를 사용하여 팝업, 백그라운드 스크립트, 콘텐츠 스크립트 간에 메시지를 전달할 수 있습니다. 이를 통해 다른 스크립트에서 코드를 실행할 수 있습니다.

예를 들어, 팝업 스크립트에서는 다음과 같이 메시지를 보낼 수 있습니다.

chrome.runtime.sendMessage({action: "changeBackground", color: "red"});

그리고 content.js에서는 다음과 같이 메시지를 받을 수 있습니다.

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "changeBackground") {
    document.body.style.backgroundColor = request.color;
  }
});

Programmatic Injection: chrome.tabs.executeScript와 비슷하지만, 다른 API 메서드를 사용하여 스크립트나 스타일시트를 삽입할 수 있습니다. 예를 들어, chrome.tabs.insertCSS를 사용하여 CSS를 삽입할 수 있습니다.

Web Accessible Resources: manifest.json에 web_accessible_resources를 선언하여 확장 프로그램의 리소스를 웹 페이지에서 직접 액세스할 수 있게 할 수 있습니다. 

이를 통해 <script> 태그나 AJAX 호출로 스크립트를 로드할 수 있습니다.

Bookmarklets: 이는 Chrome 확장 프로그램이 아니지만, 브라우저의 북마크를 사용하여 자바스크립트 코드를 실행할 수 있는 간단한 방법입니다.

Eval and Function Constructors: 이러한 JavaScript 기능을 사용하여 동적으로 코드를 실행할 수 있지만, 이 방법은 보안 위험이 있을 수 있으므로 권장되지 않습니다.

각 방법은 사용 사례에 따라 장단점이 있으므로, 필요에 따라 적절한 방법을 선택하면 됩니다.

 

 

배포 방법은 아래와 같습니다.

 

확장 프로그램 준비: 확장 프로그램의 코드를 완성하고, 테스트를 완료하였다면, 확장 프로그램을 배포할 준비가 되었습니다. 배포 전에 manifest.json 파일에 확장 프로그램의 이름, 버전, 설명, 권한 등이 올바르게 설정되어 있는지 확인하세요.

패키징: 확장 프로그램의 파일들을 ZIP 형식으로 압축합니다. manifest.json 파일, 아이콘, 스크립트, HTML, CSS, 이미지 등 모든 파일을 포함해야 합니다.

Chrome 웹 스토어 개발자 계정 생성: Chrome 웹 스토어에 확장 프로그램을 배포하려면 개발자 계정이 필요합니다. 

이미 계정이 없다면, Chrome 웹 스토어 개발자 대시보드에서 계정을 생성하세요. 

계정을 생성하려면 일회성 등록비를 지불해야 합니다.

확장 프로그램 업로드: Chrome 웹 스토어 개발자 대시보드에서 '새 항목 추가' 버튼을 클릭하고, 압축한 ZIP 파일을 업로드합니다.

상세 정보 입력: 확장 프로그램의 상세 정보를 입력합니다. 이에는 확장 프로그램의 이름, 설명, 아이콘, 스크린샷, 카테고리, 웹사이트, 고객 지원 이메일 등이 포함됩니다.

지역 및 언어 설정: 확장 프로그램이 사용 가능한 지역과 언어를 선택합니다.

가격 및 결제 설정: 확장 프로그램이 유료인 경우, 가격과 결제 설정을 완료합니다.

게시: 모든 설정을 완료하였다면, 확장 프로그램을 게시합니다. 게시하려면 '게시 변경 내용' 버튼을 클릭하세요.

게시가 완료되면, 확장 프로그램이 Chrome 웹 스토어에 등록됩니다. 사용자는 웹 스토어에서 확장 프로그램을 찾아 설치할 수 있습니다.

참고로, 확장 프로그램을 업데이트하려면, 새로운 버전의 코드를 패키징하고, 개발자 대시보드에서 해당 항목을 선택하고, '새 패키지 업로드' 버튼을 클릭하여 업데이트된 패키지를 업로드하면 됩니다. 

업데이트된 패키지를 업로드하면, 사용자의 브라우저는 자동으로 업데이트를 수행합니다.

'자바스크립트' 카테고리의 다른 글

Javascript Template Engine - Handlebars.js 개념 및 사용 방법  (0) 2022.08.02
Wappalyzer -웹페이지 구성 파악, 프레임워크, 라이브러리  (0) 2022.07.22
'자바스크립트' Related Articles more
Comments