ChatGPT에게 크롬익스텐션 만드는 방법 배워보기

크롬익스텐션 만들어보려해

크롬 익스텐션을 만들어보는 것은 재미있는 경험일 것입니다! 크롬 익스텐션은 HTML, CSS, JavaScript 등과 같은 웹 기술을 사용하여 만들 수 있으며, 크롬 브라우저에서 실행되는 프로그램입니다.

익스텐션을 만드는 데 필요한 기술적 지식과 능력은 다양하며, 경험이 있는 개발자라면 상대적으로 쉽게 만들 수 있을 것입니다. 하지만 처음 개발을 시도하는 분들이라면, 크롬 익스텐션을 만드는 데 도움이 되는 다양한 자료와 튜토리얼이 많이 있으니, 이를 참고하시면 됩니다.

익스텐션을 만들기 위해서는 크게 세 가지 요소가 필요합니다.

매니페스트 파일: 익스텐션의 이름, 버전, 아이콘, 권한 등의 정보가 포함되어 있습니다.
백그라운드 페이지: 익스텐션이 실행될 때 항상 실행되는 페이지입니다. 백그라운드 페이지에서는 익스텐션의 주요 기능을 구현합니다.
팝업 페이지 (선택 사항): 익스텐션 아이콘을 클릭하면 팝업 페이지가 나타납니다. 이 페이지에서는 추가적인 기능을 제공할 수 있습니다.

익스텐션을 만들기 위해서는 이러한 요소들을 만들고, 크롬 웹 스토어에 익스텐션을 등록해야 합니다. 익스텐션을 등록하면 크롬 사용자들이 이를 설치할 수 있게 됩니다.

익스텐션을 만드는 과정은 다소 복잡할 수 있으므로, 관련 자료와 튜토리얼을 참고하시면 좋을 것입니다. 익스텐션 개발을 위한 공식 문서와 예제 코드는 크롬 개발자 센터(https://developer.chrome.com/docs/extensions/)에서 확인하실 수 있습니다.

파일구조가 어떻게돼?

크롬 익스텐션의 파일 구조는 다음과 같습니다.

my-extension/
  ├── manifest.json
  ├── background.js
  ├── content_script.js
  ├── popup.html
  ├── popup.js
  ├── icon.png
  └── ...

manifest.json: 크롬 익스텐션의 메타데이터가 포함된 파일로, 익스텐션의 이름, 버전, 아이콘, 권한 등의 정보를 정의합니다.
background.js: 익스텐션이 실행될 때 항상 실행되는 백그라운드 페이지의 스크립트 파일입니다. 익스텐션의 주요 기능을 구현합니다.
content_script.js: 웹 페이지에서 실행되는 스크립트 파일입니다. 해당 웹 페이지에서 추가적인 기능을 제공하는데 사용됩니다.
popup.html: 익스텐션 아이콘을 클릭하면 나타나는 팝업 페이지의 HTML 파일입니다.
popup.js: 팝업 페이지에서 사용되는 자바스크립트 파일입니다.
icon.png: 익스텐션의 아이콘 이미지 파일입니다.

위 파일들 외에도 필요에 따라 다른 파일들을 추가로 포함시킬 수 있습니다. 이러한 파일들은 익스텐션의 기능에 따라 달라질 수 있습니다.

파일 구조는 크롬 익스텐션의 기능과 구조를 이해하는 데 중요합니다. 이 파일 구조를 기반으로 익스텐션을 개발하고, 크롬 웹 스토어에 등록하여 다른 사용자들이 사용할 수 있게 됩니다.

manifest.json 내용 보여줘

manifest.json 파일은 크롬 익스텐션의 메타데이터를 포함하는 파일입니다. 다음은 manifest.json 파일의 예시 내용입니다.

{
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "manifest_version": 2,
  "permissions": ["tabs", "activeTab", "storage"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["content_script.js"],
      "run_at": "document_end"
    }
  ],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon16.png",
      "32": "icon32.png",
      "48": "icon48.png",
      "128": "icon128.png"
    }
  },
  "icons": {
    "16": "icon16.png",
    "32": "icon32.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

위 예시에서는 다음과 같은 메타데이터 정보를 포함하고 있습니다.

name: 익스텐션의 이름
version: 익스텐션의 버전
description: 익스텐션의 간단한 설명
manifest_version: 사용하는 메타데이터 형식 버전. 대부분의 익스텐션에서는 2를 사용합니다.
permissions: 익스텐션에서 필요로 하는 권한들을 배열로 지정합니다. 위 예시에서는 탭 열기 및 접근, 활성 탭에 대한 접근, 로컬 스토리지에 대한 접근 권한을 요청하고 있습니다.
background: 백그라운드 페이지 설정을 지정합니다. 이 예시에서는 background.js 파일을 실행하고, persistent 속성을 false로 지정하여 비지속적인 백그라운드 페이지를 생성하도록 설정하고 있습니다.
content_scripts: 웹 페이지에서 실행되는 스크립트 파일 정보를 지정합니다. 이 예시에서는 http와 https로 시작하는 모든 웹 페이지에서 content_script.js를 실행하고 있습니다.
browser_action: 익스텐션 아이콘을 클릭할 때 나타나는 팝업 페이지 설정을 지정합니다. 이 예시에서는 popup.html 파일을 기본 팝업으로 설정하고, 아이콘 크기별 이미지 파일을 지정하고 있습니다.
icons: 익스텐션 아이콘 이미지 파일을 지정합니다. 이 예시에서는 아이콘 크기별 이미지 파일을 지정하고 있습니다.

이 외에도 manifest.json 파일에서는 다양한 메타데이터 설정을 지정할 수 있습니다. 이를

background.js 내용

background.js는 크롬 익스텐션에서 항상 실행되는 백그라운드 페이지의 자바스크립트 파일입니다. 이 파일에서는 익스텐션의 주요 기능을 구현하고, 이벤트 처리 등을 담당합니다.

다음은 background.js의 간단한 예시 코드입니다.

// 탭이 변경될 때 실행되는 이벤트 핸들러
chrome.tabs.onActivated.addListener(tab => {
  // 활성화된 탭 정보 가져오기
  chrome.tabs.get(tab.tabId, current_tab_info => {
    // 탭 정보를 출력
    console.log(current_tab_info);
  });
});

// 새로운 탭이 생성될 때 실행되는 이벤트 핸들러
chrome.tabs.onCreated.addListener(tab => {
  // 새로 생성된 탭 정보 출력
  console.log(tab);
});

// 익스텐션 아이콘을 클릭할 때 실행되는 이벤트 핸들러
chrome.browserAction.onClicked.addListener(tab => {
  // 현재 탭의 URL 가져오기
  chrome.tabs.query({active: true, currentWindow: true}, tabs => {
    let current_tab = tabs[0];
    let current_url = current_tab.url;
    // URL 출력
    console.log(current_url);
  });
});

위 예시에서는 chrome.tabs.onActivated, chrome.tabs.onCreated, chrome.browserAction.onClicked 등의 이벤트 핸들러를 등록하여, 탭 변경, 새로운 탭 생성, 익스텐션 아이콘 클릭 등의 이벤트가 발생할 때마다 이벤트 핸들러가 실행됩니다.

이벤트 핸들러에서는 chrome.tabs API를 사용하여 탭 정보를 가져오거나, chrome.browserAction API를 사용하여 익스텐션 아이콘의 클릭 이벤트에서 현재 탭의 URL을 가져오는 등의 작업을 수행합니다. 이러한 기능을 활용하여 익스텐션의 다양한 기능을 구현할 수 있습니다.

그 다음이 뭔 파일이지?

크롬 익스텐션에서 background.js 파일 다음에는 주로 content_script.js 파일이 옵니다.

content_script.js는 웹 페이지에서 실행되는 자바스크립트 파일입니다. 이 파일은 웹 페이지의 DOM에 접근하여 변경을 가할 수 있습니다. 이를 통해 웹 페이지의 내용을 수정하거나, 사용자와 상호작용하는 인터페이스를 만들 수 있습니다.

content_script.js는 manifest.json 파일에서 content_scripts 항목에 지정되어야 합니다. content_scripts 항목에는 matches 속성을 사용하여 실행될 URL 패턴을 정의하고, js 속성을 사용하여 content_script.js 파일의 경로를 지정합니다.

다음은 content_script.js의 간단한 예시 코드입니다.

// 현재 웹 페이지의 제목 변경하기
document.title = "새로운 제목";

위 예시에서는 document.title 속성을 사용하여 현재 웹 페이지의 제목을 변경하는 코드를 작성하였습니다. 이 코드는 content_script.js 파일이 실행되는 모든 웹 페이지에서 실행됩니다.

content_script.js에서는 이 외에도 다양한 작업을 수행할 수 있습니다. 예를 들어, document 객체를 사용하여 웹 페이지의 HTML을 수정하거나, 이벤트 핸들러를 등록하여 사용자의 입력에 반응하는 인터페이스를 만들 수도 있습니다.

다음꺼

다음으로는 익스텐션 아이콘을 클릭했을 때 나타나는 팝업 페이지를 위한 HTML과 자바스크립트 파일이 있습니다.

팝업 페이지는 사용자와 상호작용하는 인터페이스를 제공하는 역할을 합니다. 팝업 페이지에서는 사용자가 입력한 데이터를 저장하거나, 웹 페이지의 정보를 가져오는 등의 작업을 수행할 수 있습니다.

팝업 페이지는 manifest.json 파일에서 browser_action 항목에 지정된 default_popup 속성에 해당하는 HTML 파일입니다. 이 HTML 파일에서는 자바스크립트 파일과 함께 사용자와 상호작용할 수 있는 인터페이스를 제공합니다.

다음은 팝업 페이지를 위한 HTML 파일과 자바스크립트 파일의 간단한 예시 코드입니다.

popup.html:

<!DOCTYPE html>
<html>
  <head>
    <title>팝업 페이지</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>팝업 페이지</h1>
    <input type="text" id="input-text">
    <button id="save-button">저장</button>
    <p id="message"></p>
  </body>
</html>

위 예시에서는 input-text라는 ID를 가진 텍스트 입력 요소와, save-button이라는 ID를 가진 버튼 요소, 그리고 message라는 ID를 가진 메시지 출력 요소를 가지는 간단한 HTML 파일을 작성하였습니다.

popup.js:

// 저장 버튼 클릭 이벤트 핸들러
document.getElementById("save-button").addEventListener("click", function() {
  // 입력한 텍스트 가져오기
  let text = document.getElementById("input-text").value;
  // 로컬 스토리지에 저장
  chrome.storage.local.set({"text": text}, function() {
    // 메시지 출력
    document.getElementById("message").textContent = "저장되었습니다.";
  });
});

// 페이지 로드 시 실행되는 함수
window.onload = function() {
  // 로컬 스토리지에서 데이터 가져오기
  chrome.storage.local.get("text", function(result) {
    // 가져온 데이터 출력
    document.getElementById("input-text").value = result.text;
  });
};

위 예시에서는 save-button 버튼을 클릭하면 입력한 텍스트를 로컬 스토리지에 저장하고, message 요소에 메시지를 출력하도록 이벤트 핸들러를 등록하였습니다. 또한, window.onload 함수에서는 로컬 스토리지에서 데이터를 가져와 input-text 요소의 값을 설정하도록 작성하였습니다.

이렇게 작성된 HTML과 자바스크립트 파일을 사용하여 팝업 페이지에서 데이터를 저장하고, 익스텐션 아이콘을 클릭했을

이렇게 작성된 HTML과 자바스크립트 파일을 사용하여 팝업 페이지에서 데이터를 저장하고, 익스텐션 아이콘을 클릭했을 때 나타나는 팝업 페이지에서 데이터를 가져올 수 있습니다. 이를 통해 익스텐션에서 사용자가 입력한 데이터를 저장하고, 필요한 경우 다시 사용할 수 있습니다.

위 예시에서는 chrome.storage API를 사용하여 로컬 스토리지에 데이터를 저장하고 가져오는 방법을 보여주고 있습니다. 이 외에도 chrome.tabs API, chrome.windows API, chrome.runtime API 등의 다양한 API를 사용하여 익스텐션의 기능을 구현할 수 있습니다.

익스텐션의 파일 구조와 각 파일의 역할을 이해하고, 필요한 기능을 구현하는데 필요한 API를 학습하면, 자신이 원하는 익스텐션을 만들 수 있습니다.

이렇게 파일을 모두 준비한 다음에 뭐 하면 될까?

파일을 모두 준비한 다음에는 크롬 익스텐션을 빌드하고, 크롬 웹 스토어에 업로드하여 다른 사용자들이 사용할 수 있도록 배포해야 합니다.

크롬 익스텐션을 빌드하려면, manifest.json, background.js, content_script.js, popup.html, popup.js 등의 파일을 하나의 압축 파일로 묶어야 합니다. 이 압축 파일은 .crx 확장자를 가지며, 크롬 익스텐션 설치 파일과 같은 역할을 합니다.

크롬 웹 스토어에 익스텐션을 업로드하려면, 크롬 웹 스토어 개발자 계정을 생성하고, 익스텐션의 메타데이터 정보와 스크린샷, 프로모션 동영상 등의 정보를 제공해야 합니다. 이후, 익스텐션을 검토하고, 승인이 완료되면 크롬 웹 스토어에서 다운로드 및 설치가 가능해집니다.

크롬 웹 스토어에 익스텐션을 업로드하려면 일정한 요건을 충족해야 하므로, 먼저 해당 요건을 확인하고 준비하는 것이 중요합니다. 또한, 익스텐션의 기능이나 UI 디자인 등도 사용자들이 쉽게 사용하고 이해할 수 있는 방식으로 제공되어야 합니다.

따라서, 익스텐션을 배포하기 전에 충분한 테스트와 사용자 경험 개선을 수행하는 것이 좋습니다.

나 혼자만 사용하기 위한 용도로 하려 해도 개발자 계정 있어야하고 검토받고 승인받아야 돼?

크롬 웹 스토어에 익스텐션을 업로드하고 다른 사용자들이 사용할 수 있도록 배포하기 위해서는 개발자 계정이 필요하며, 업로드한 익스텐션은 검토를 거쳐 승인을 받아야 합니다.

하지만, 개인적인 용도로만 사용하는 경우에는 크롬 웹 스토어에 업로드하지 않고, 로컬에서 직접 크롬 브라우저에 익스텐션을 설치하여 사용할 수 있습니다. 이 경우에는 개발자 계정이 필요하지 않으며, 검토와 승인도 필요하지 않습니다.

로컬에서 익스텐션을 설치하는 방법은 다음과 같습니다.

크롬 브라우저를 열고, 주소 표시줄에 chrome://extensions를 입력합니다.
화면 상단에 있는 개발자 모드를 활성화합니다.
압축해제된 확장 프로그램을 로드합니다.를 선택하고, 익스텐션 폴더를 선택합니다.
익스텐션이 설치되었습니다. 이제 익스텐션을 사용할 수 있습니다.

위 방법을 사용하여 익스텐션을 설치하면, 개발자 계정 없이도 크롬 브라우저에서 익스텐션을 사용할 수 있습니다. 단, 로컬에서 사용하는 경우에는 보안상의 이유로, 알려진 소스가 아닌 익스텐션을 설치하는 것을 지양하는 것이 좋습니다.

압축 어떻게 해야하고 어떤 것을 압축해야해?

크롬 익스텐션을 압축하기 위해서는 압축 파일을 생성할 필요가 있습니다. 압축 파일은 .zip 확장자를 가지며, 다음과 같은 파일들을 포함해야 합니다.

manifest.json: 익스텐션의 메타데이터 정보와 기능을 정의한 JSON 파일입니다.
background.js: 백그라운드 페이지에서 실행되는 자바스크립트 파일입니다.
content_script.js: 웹 페이지에서 실행되는 자바스크립트 파일입니다. 필요한 경우에만 포함합니다.
popup.html: 익스텐션 아이콘을 클릭했을 때 나타나는 팝업 페이지를 위한 HTML 파일입니다. 필요한 경우에만 포함합니다.
popup.js: 팝업 페이지에서 실행되는 자바스크립트 파일입니다. 필요한 경우에만 포함합니다.
이미지 파일, 스타일시트 파일 등의 추가적인 파일: 익스텐션에 필요한 이미지 파일이나 스타일시트 파일 등이 필요한 경우에 포함합니다.

위 파일들을 포함하는 디렉토리를 생성하고, 해당 디렉토리를 .zip 파일로 압축하면, 압축 파일이 생성됩니다. 이후, .crx 확장자로 파일 확장자를 변경하면, 크롬 익스텐션 설치 파일이 완성됩니다.

압축 파일을 생성하는 방법은 다음과 같습니다.

익스텐션 파일들을 포함하는 디렉토리를 생성합니다.
생성한 디렉토리에서, 익스텐션 파일들을 모두 선택합니다.
선택한 파일들을 우클릭하고, 압축을 선택합니다.
생성된 압축 파일의 확장자를 .zip으로 변경합니다.
익스텐션 설치 파일이 준비되었습니다.

위 방법을 사용하여 익스텐션 압축 파일을 생성할 수 있습니다.

압축을 macos 터미널에서 zip 커맨드를 이용해서 하고자 할때에는 어떻게 하면 될까?

macOS 터미널에서 zip 명령어를 사용하여 익스텐션 압축 파일을 생성할 수 있습니다. 다음은 압축 방법의 간단한 예시 코드입니다.

압축하려는 파일들이 들어있는 디렉토리로 이동합니다.

cd /Users/username/Documents/my_extension

zip 명령어를 사용하여 압축 파일을 생성합니다. 아래 명령어에서 my_extension.zip은 생성될 압축 파일의 이름이며, *는 현재 디렉토리에 있는 모든 파일과 디렉토리를 압축하는 것을 의미합니다.

zip -r my_extension.zip *

압축 파일이 생성된 것을 확인합니다. 생성된 압축 파일의 이름과 위치는 위 예시에서는 /Users/username/Documents/my_extension/my_extension.zip 입니다.

위 예시 코드에서는 zip 명령어를 사용하여 현재 디렉토리에 있는 모든 파일과 디렉토리를 압축하였습니다. 필요한 파일만을 압축하려면, zip 명령어의 인자로 압축 대상 파일들을 지정하면 됩니다.

더 자세한 사용 방법과 옵션 등에 대해서는 zip 명령어의 매뉴얼 페이지를 참고하시면 도움이 됩니다.

그러면 이렇게 해서 만들어진 my_extension.zip 파일의 이름의 확장자를 crx로 바꾸기만 하면 돼?

크롬 익스텐션 설치 파일은 압축 파일을 .zip에서 .crx로 변경한 것이지만, 단순히 확장자만 바꾸는 것으로는 설치 파일을 만들 수 없습니다.

.zip에서 .crx로 변경하는 것 외에도, 크롬 익스텐션 설치 파일을 만들기 위해서는 추가적인 작업이 필요합니다. 이 작업은 크롬 웹 스토어 개발자 센터에서 진행할 수 있습니다.

개발자 센터에서 익스텐션을 등록하고, 익스텐션을 검토한 후에 승인을 받으면, 크롬 웹 스토어에서 사용자들이 설치할 수 있는 설치 파일이 생성됩니다. 이 파일은 .crx 확장자를 가지며, 크롬 웹 스토어에 업로드된 익스텐션을 다운로드하여 설치하면 됩니다.

따라서, 크롬 익스텐션을 만들기 위해서는 개발자 센터에서의 등록과 승인 과정이 필요합니다. 이후, 생성된 설치 파일을 사용하여 크롬 익스텐션을 설치하면 됩니다.

터미널에서 zip -r my_extension.zip * && mv my_extension.zip my_extension.crx 이렇게 실행하면 크롬 익스텐션 설치파일을 완성했다고 볼 수 있어?

아쉽게도, 단순히 zip 명령어를 사용하여 압축 파일을 생성하고, 확장자를 .crx로 변경하는 것만으로는 크롬 익스텐션 설치 파일을 완성할 수 없습니다.

크롬 익스텐션 설치 파일을 만들기 위해서는, 크롬 웹 스토어 개발자 센터에서 익스텐션을 등록하고, 익스텐션을 검토한 후에 승인을 받아야 합니다. 이 과정에서 익스텐션의 메타데이터 정보와 스크린샷, 프로모션 동영상 등을 제공하고, 익스텐션의 기능과 UI 디자인이 사용자들이 쉽게 사용하고 이해할 수 있는 방식으로 제공되는지 확인됩니다.

개발자 센터에서 승인을 받은 후에는, 크롬 웹 스토어에서 사용자들이 설치할 수 있는 설치 파일이 생성됩니다. 이 파일은 .crx 확장자를 가지며, 크롬 웹 스토어에 업로드된 익스텐션을 다운로드하여 설치하면 됩니다.

나는 크롬 웹 스토어에 배포해서 다른 사람들도 나의 익스텐션을 쓸수있게 하려는게 아니야. 나의 목적은 나만 사용하는거야.

만약 크롬 웹 스토어에 배포하지 않고, 개인적으로만 사용할 목적으로 크롬 익스텐션을 만드는 경우라면, .crx 파일을 직접 만들어서 설치할 수 있습니다.

위에서 언급했듯이, 크롬 익스텐션을 만들기 위해서는 manifest.json, background.js, content_script.js, popup.html, popup.js 등의 파일을 준비하고, 이를 압축 파일로 묶은 뒤 .crx 확장자로 변경해야 합니다. 이후, 크롬 브라우저에서 확장 프로그램 페이지를 열고, 압축해제된 확장 프로그램을 로드합니다.를 선택하여, 해당 디렉토리를 선택하면 익스텐션이 설치됩니다.

따라서, 크롬 익스텐션을 개인적으로 사용하는 경우에는 크롬 웹 스토어에 등록하거나 승인을 받을 필요는 없으며, 직접 만든 .crx 파일을 로컬에서 설치하여 사용할 수 있습니다.

그러니까 내 목적을 위한 준비를 위해서라면 터미널에서 zip -r my_extension.zip * && mv my_extension.zip my_extension.crx 이렇게 실행하면 크롬 익스텐션 설치파일을 완성했다고 볼 수 있어?

네, zip 명령어로 파일을 압축하고, 확장자를 .crx로 변경하는 것으로는 개인적인 용도로 사용할 수 있는 크롬 익스텐션 설치 파일을 만들 수 있습니다.

하지만, 압축 파일이 생성된 후에 .crx 확장자로 변경하더라도 크롬 웹 스토어에서 승인을 받지 않은 익스텐션은 크롬에서 경고를 띄우고 설치가 차단될 수 있습니다. 이 경우에는 크롬 브라우저의 확장 프로그램 페이지에서 압축해제된 확장 프로그램을 로드합니다.를 선택하여, 해당 디렉토리를 선택하여 로컬에서 익스텐션을 설치해야 합니다.

또한, 만약 익스텐션에서 개인정보와 같은 중요한 정보를 다루는 경우, 보안 이슈에 대한 고려가 필요합니다. 크롬 웹 스토어에 배포하지 않고 개인적으로 사용하는 경우에도, 익스텐션에 보안 이슈가 있을 수 있으므로, 익스텐션을 만들기 전에 보안에 대해 충분히 고려하고, 코드를 검증하는 것이 좋습니다.

나는 영문판 크롬을 사용해. 영문판에서는 "압축해제된 확장 프로그램을 로드합니다." 가 뭐로 표시돼?

영문판 크롬 브라우저에서 압축해제된 확장 프로그램을 로드합니다. 옵션은 Load unpacked로 표시됩니다. 다음은 해당 옵션을 사용하는 방법입니다.

크롬 브라우저에서 확장 프로그램 페이지를 엽니다.
페이지 상단에 위치한 Developer mode 스위치를 켭니다.
Load unpacked 버튼을 클릭합니다.
압축해제된 확장 프로그램이 들어있는 디렉토리를 선택합니다.

위와 같이 Load unpacked 버튼을 클릭하여 압축해제된 확장 프로그램을 로드할 수 있습니다.

그러면 "Load unpacked" 버튼을 클릭해서 선택할 것은 crx 파일이 아니라 폴더야?

네, Load unpacked 버튼을 클릭하여 로드할 수 있는 것은 폴더입니다. crx 파일은 압축된 확장 프로그램 파일로, 로컬에서 직접 설치할 수 없습니다. 따라서, crx 파일을 만든 후에는 이 파일을 크롬 브라우저에 직접 설치할 수 없고, 대신 압축을 해제한 디렉토리를 Load unpacked 버튼으로 로드해야 합니다.

압축 해제된 디렉토리에서는, manifest.json, background.js, content_script.js, popup.html, popup.js 등의 파일들이 포함되어 있어야 합니다. 이후, Load unpacked 버튼을 클릭하여 해당 디렉토리를 선택하면, 크롬 익스텐션이 로드되어 설치됩니다.

따라서, 크롬 익스텐션을 만들 때는, zip 명령어로 압축된 파일을 만들기보다는, 직접 압축 해제된 폴더를 로드하는 방식을 사용하는 것이 좋습니다.

그러면 내 목적 달성을 위해서라면 crx 만들 필요가 없어?

네, 개인적인 용도로 크롬 익스텐션을 만들 경우, 크롬 웹 스토어에 등록하거나 승인을 받을 필요가 없습니다. 따라서, crx 파일을 만들 필요도 없습니다.

대신, 개인적인 용도로 사용하기 위해서는, 크롬 브라우저에서 Load unpacked 버튼을 사용하여 압축해제된 디렉토리를 로드하여, 익스텐션을 설치하면 됩니다.

따라서, 개인적인 용도로 크롬 익스텐션을 만들 때는, 크롬 웹 스토어에 등록하거나 승인을 받을 필요가 없으므로, crx 파일을 만들 필요가 없습니다. 대신, 압축 해제된 디렉토리를 Load unpacked 버튼으로 로드하여 개인적으로 사용할 수 있습니다.

myext 라는 폴더를 만들고 이 폴더 안에 background.js manifest.json popup.js content_script.js popup.html 이렇게 총 5개의 파일을 준비했어. 빠진게 있을까?

크롬 익스텐션을 만들기 위해서는 manifest.json 파일이 필수적으로 필요하며, 나머지 파일들은 익스텐션에 추가할 기능에 따라 선택적으로 사용됩니다.

5개의 파일 중, background.js, content_script.js, popup.html, popup.js는 각각의 파일에서 다른 부분을 담당하고 있으며, manifest.json 파일에서 이 파일들을 호출하고 익스텐션의 동작 방식을 설정합니다.

따라서, 크롬 익스텐션을 만들기 위해 준비해야 하는 파일은, manifest.json, background.js, content_script.js, popup.html, popup.js 총 5개이며, 이 파일들은 크롬 익스텐션에 추가할 기능에 따라 선택적으로 사용될 수 있습니다. 만약, manifest.json 파일과 이 외의 4개의 파일을 모두 준비했다면, 크롬 익스텐션을 만들기 위해 필요한 파일을 모두 준비한 것입니다.

아이콘 파일은 선택사항이야?

크롬 익스텐션을 만들 때, 아이콘 파일은 선택 사항입니다. 하지만, 익스텐션에 아이콘을 추가하면, 익스텐션을 쉽게 식별하고, 사용자가 쉽게 접근할 수 있습니다. 따라서, 사용자 친화적인 디자인을 위해, 익스텐션에 아이콘을 추가하는 것이 좋습니다.

아이콘 파일은 16x16, 32x32, 48x48, 128x128 등의 크기를 지원합니다. manifest.json 파일에서 아이콘 파일의 경로를 지정하면, 크롬 브라우저에서 익스텐션을 설치할 때, 이 아이콘을 사용하게 됩니다.

따라서, 크롬 익스텐션을 만들 때는, 아이콘 파일을 사용하는 것이 좋습니다. 아이콘 파일을 사용하면, 익스텐션을 쉽게 식별하고, 사용자가 쉽게 접근할 수 있습니다.

아이콘은 안만들거야. 아이콘정보를 뺀 모습으로 manifest.json 내용을 다시 알려줘.

아이콘 정보를 빼고 다시 manifest.json 파일의 내용을 알려드리겠습니다. 다음은 manifest.json 파일의 내용입니다.

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content_script.js"]
    }
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

위 코드에서는 다음과 같은 설정이 포함되어 있습니다.

manifest_version: 매니페스트 파일의 버전을 나타냅니다. 일반적으로 2를 사용합니다.
name: 익스텐션의 이름을 나타냅니다.
version: 익스텐션의 버전을 나타냅니다.
description: 익스텐션에 대한 설명을 나타냅니다.
permissions: 익스텐션에서 사용할 권한을 나타냅니다. 이 예제에서는 activeTab 권한을 사용합니다.
background: 익스텐션의 백그라운드 페이지에 대한 설정을 나타냅니다. background.js 파일을 사용하며, persistent 속성은 false로 설정합니다.
content_scripts: 콘텐트 스크립트에 대한 설정을 나타냅니다. content_script.js 파일을 모든 URL에 대해 실행합니다.
browser_action: 브라우저 액션에 대한 설정을 나타냅니다. popup.html 파일을 사용합니다.

이렇게 설정된 manifest.json 파일은, 백그라운드 스크립트와 콘텐트 스크립트, 그리고 팝업 창을 갖는 기본적인 크롬 익스텐션을 만들 수 있습니다.

익스텐션이 https://kstblog.aww.kr 웹사이트에서만 작동하도록 하려면 어떻게 해야해?

크롬 익스텐션에서는 manifest.json 파일의 permissions 항목을 사용하여 익스텐션이 접근할 수 있는 도메인을 제한할 수 있습니다.

예를 들어, https://kstblog.aww.kr 웹사이트에서만 작동하도록 하려면, permissions 항목에 해당 도메인을 추가하면 됩니다. 다음은 manifest.json 파일에서 permissions 항목을 수정하여 https://kstblog.aww.kr 웹사이트에서만 작동하도록 설정한 예시입니다.

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "permissions": [
    "https://kstblog.aww.kr/*"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["https://kstblog.aww.kr/*"],
      "js": ["content_script.js"]
    }
  ],
  "browser_action": {
    "default_popup": "popup.html"
  }
}

위 예제에서는 permissions 항목에 https://kstblog.aww.kr/*을 추가하여, 이 도메인에서만 익스텐션이 작동하도록 설정했습니다. 또한, content_scripts 항목의 matches 항목에도 동일한 도메인을 추가하여, 해당 도메인에서만 콘텐트 스크립트가 실행되도록 설정했습니다. 이렇게 설정하면, https://kstblog.aww.kr 도메인에서만 익스텐션이 작동하도록 할 수 있습니다.

Errors 버튼은 뭐야?

크롬 웹 스토어 개발자 대시보드에서 Errors 버튼은, 크롬 익스텐션에서 발생한 오류 정보를 보여주는 기능입니다. 이 버튼을 클릭하면, 해당 익스텐션에서 발생한 오류 로그를 확인할 수 있습니다.

Errors 버튼은 익스텐션의 개발과정에서 유용하게 사용될 수 있습니다. 크롬 웹 스토어에 익스텐션을 등록하기 전에, 이 버튼을 사용하여 익스텐션에서 발생한 오류를 확인하고 수정할 수 있습니다. 또한, 익스텐션을 배포한 후에도, 이 버튼을 사용하여 사용자들이 익스텐션을 사용하는 도중에 발생한 오류를 파악하고, 수정할 수 있습니다.

따라서, 크롬 익스텐션 개발자들은 Errors 버튼을 활용하여, 익스텐션의 오류를 파악하고, 수정하여 보다 안정적인 익스텐션을 제공할 수 있습니다.

manifest_version 2는 deprecated 됐고 2023년에 지워질거라는데 이 사실에 대해 알아?

네, 맞습니다. Google은 2021년 6월부터 manifest_version 2를 사용하는 새로운 확장 프로그램의 등록을 중지하고, 2023년에는 manifest_version 2를 사용하는 모든 확장 프로그램을 Chrome 웹 스토어에서 삭제할 계획입니다. 이에 대한 공지는 Google 개발자 블로그에서 발표되었습니다.

새로운 확장 프로그램은 manifest_version 3을 사용해야 하며, manifest_version 3은 보안과 성능을 향상시키기 위한 목적으로 도입되었습니다. manifest_version 3에서는 background script가 service worker로 변경되었으며, API 사용 방법에 대한 일부 변경 사항이 있습니다.

따라서, 새로운 크롬 익스텐션을 개발할 때는, manifest_version 2를 사용하지 않고, manifest_version 3를 사용해야 합니다. 또한, 이미 개발된 manifest_version 2를 사용하는 확장 프로그램을 업데이트하려면, manifest_version 3으로 마이그레이션해야 합니다. 이를 통해 보안과 성능을 개선하고, Chrome 웹 스토어에서 삭제될 가능성을 방지할 수 있습니다.

마이그레이션 방법 알려줘

확장 프로그램을 manifest_version 2에서 manifest_version 3으로 마이그레이션하는 방법은 다음과 같습니다.

manifest.json 파일의 manifest_version 항목을 3으로 변경합니다.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  ...
}

background 항목의 scripts 항목을 service_worker로 변경합니다.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  ...
}

chrome.extension API를 chrome.runtime API로 변경합니다. 예를 들어, chrome.extension.getBackgroundPage()를 chrome.runtime.getBackgroundPage()로 변경합니다.
필요한 경우, webRequest API를 사용할 때 blocking 옵션을 onBeforeRequest 이벤트에서만 사용할 수 있도록 수정해야 합니다.
마지막으로, 크롬 개발자 도구에서 새로운 manifest_version 3으로 업데이트된 익스텐션을 테스트하고, 발견된 오류를 수정합니다.

이와 같은 과정을 통해, manifest_version 3을 사용하는 새로운 익스텐션을 만들거나, 기존의 manifest_version 2를 사용하는 익스텐션을 manifest_version 3으로 업그레이드할 수 있습니다.

background 의 persistent 는 어떻게 할까

background 항목의 persistent 속성은 백그라운드 페이지가 유지되는 시간을 설정하는 속성입니다. 이 속성의 값에 따라, 백그라운드 페이지가 종료되는 시점이 달라집니다.

persistent 속성의 기본값은 true이며, 이 경우 백그라운드 페이지가 브라우저가 실행 중일 동안 계속 유지됩니다. 반면, false로 설정할 경우, 백그라운드 페이지는 이벤트가 발생할 때만 실행되며, 이벤트 처리가 끝나면 자동으로 종료됩니다.

만약 백그라운드 페이지에서 지속적으로 특정 작업을 처리해야 한다면, persistent 속성을 true로 설정해야 합니다. 하지만, 만약 백그라운드 페이지가 필요 없는 경우에는 persistent 속성을 false로 설정하는 것이 좋습니다. 이렇게 설정하면, 브라우저의 자원을 절약할 수 있으며, 익스텐션의 성능을 개선할 수 있습니다.

따라서, 백그라운드 페이지에서 지속적으로 작업을 처리해야 하는 경우에는 persistent 속성을 true로 설정하고, 작업을 처리하지 않아도 되는 경우에는 persistent 속성을 false로 설정하는 것이 좋습니다.

manifest_version 3 에서도 유효한 설명이야?

persistent 속성은 manifest_version 3에서도 유효한 속성입니다. 그러나 manifest_version 3에서는 백그라운드 페이지가 service worker로 대체되었습니다. 이에 따라 background 항목에서 persistent 속성 대신 service_worker 항목을 사용하여 백그라운드 스크립트를 지정합니다.

service_worker 항목의 값으로는 백그라운드 스크립트 파일의 경로를 지정하면 됩니다. 예를 들어, 다음과 같이 service_worker 항목을 사용하여 background.js 파일을 지정할 수 있습니다.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "permissions": [
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  ...
}

service_worker 항목을 사용하여 백그라운드 스크립트를 지정하면, 해당 스크립트는 service worker로 실행되며, 이벤트 기반으로 동작합니다. 이 때, persistent 속성 대신 event 항목을 사용하여 이벤트를 등록하고, 필요한 이벤트를 처리할 수 있습니다.

따라서, manifest_version 3에서도 background 항목에서 백그라운드 스크립트를 지정할 때, service_worker 항목을 사용하고, 필요한 이벤트를 등록하고 처리할 수 있도록 코드를 작성해야 합니다.

Permission 'https://kstblog.aww.kr/*' is unknown or URL pattern is malformed. 라고 하는데 어떻게 할까?

이 오류는 https://kstblog.aww.kr/*가 잘못된 URL 패턴이거나, 알 수 없는 권한으로 인해 발생할 수 있습니다. 이 경우, 다음과 같은 점들을 확인해볼 수 있습니다.

URL 패턴이 잘못되었는지 확인해보세요. https://kstblog.aww.kr/*는 https://로 시작하는 URL이며, *는 모든 경로를 나타냅니다. 패턴이 올바르게 작성되었는지 다시 확인해보세요.
URL 패턴에 http: 또는 https:이 포함되어 있는지 확인해보세요. manifest 파일에서 URL 패턴은 http: 또는 https:으로 시작해야 합니다.
이 권한이 Chrome에서 지원되는 권한인지 확인해보세요. 만약 이 권한이 지원되지 않는다면, 다른 권한을 사용해보세요.
만약 여러 개의 권한을 사용하는 경우, permissions 항목에서 각 권한을 쉼표로 구분했는지 확인해보세요.

만약 위의 모든 조건을 확인했음에도 여전히 오류가 발생한다면, 이 권한을 사용하지 않도록 manifest 파일에서 삭제해보세요. 권한이 없으면 일부 기능이 작동하지 않을 수 있지만, 오류가 발생하지 않으며, 익스텐션을 더욱 안정적으로 사용할 수 있습니다.

맞게 고쳐줘

알려주신 https://kstblog.aww.kr/* URL 패턴은 정상적인 패턴이므로 문제가 되는 부분은 아닙니다. 그러나, manifest 파일에서 이 권한을 사용하려면 webRequest 권한을 지정해야 합니다.

따라서, permissions 항목에서 webRequest 권한을 지정하고, https://kstblog.aww.kr/* URL 패턴을 추가해주세요.

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "permissions": [
    "webRequest",
    "https://kstblog.aww.kr/*"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

이렇게 permissions 항목을 수정하면, https://kstblog.aww.kr/* URL 패턴을 사용하는 웹 페이지에서 익스텐션의 webRequest 기능을 사용할 수 있습니다.

manifest_version 3버전으로 해서 다시 고쳐줘

manifest_version 3에서는 webRequest 권한을 사용할 수 없습니다. 대신, declarativeNetRequest 권한을 사용하여 네트워크 요청을 필터링할 수 있습니다.

따라서, manifest 파일에서 declarativeNetRequest 권한을 지정하고, https://kstblog.aww.kr/* URL 패턴을 추가해주세요.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "host_permissions": [
    "https://kstblog.aww.kr/*"
  ],
  "permissions": [
    "declarativeNetRequest"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/icon16.png",
      "32": "/icon32.png",
      "48": "/icon48.png",
      "128": "/icon128.png"
    }
  },
  "declarative_net_request": {
    "rulesets": [{
      "id": "1",
      "priority": 1,
      "action": {
        "type": "block"
      },
      "condition": {
        "urlFilter": "https://kstblog.aww.kr/*"
      }
    }]
  }
}

이렇게 host_permissions 항목에서 https://kstblog.aww.kr/* URL 패턴을 지정하고, declarativeNetRequest 권한을 사용하여 네트워크 요청을 필터링할 수 있습니다. 또한, declarative_net_request 항목에서 필터링 규칙을 지정할 수 있습니다.

아이콘 안만들거야 빼줘

알겠습니다. icon 항목을 삭제하면 됩니다. 다음은 아이콘 정보를 빼고 수정한 manifest.json 파일의 내용입니다.

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "permissions": [
    "activeTab",
    "https://kstblog.aww.kr/*"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_popup": "popup.html"
  }
}

이렇게 수정한 manifest.json 파일에서는 icon 항목이 삭제되었습니다. 이제, icon.png 파일을 사용하지 않아도 됩니다.

친구야.. manifest_version 는 3으로 해줘 2 안할거야. 앞으로도 2이야기는 다시는 꺼내지도 말아. 알겠니?

알겠습니다. 그렇다면 manifest_version 항목을 3으로 수정하고, 그에 맞게 다른 항목들도 수정해보겠습니다.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "host_permissions": [
    "https://kstblog.aww.kr/*"
  ],
  "permissions": [
    "declarativeNetRequest"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "declarativeNetRequest": {
    "ruleResources": [{
      "id": "1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

이렇게 manifest_version 항목을 3으로 수정하면서, permissions 항목에서 webRequest 권한 대신 declarativeNetRequest 권한을 사용하도록 변경했습니다. 또한, host_permissions 항목에서 https://kstblog.aww.kr/* URL 패턴을 지정하고, declarativeNetRequest 항목에서 필터링 규칙 파일(rules.json)을 지정하도록 했습니다. 마지막으로, action 항목에서는 icon 대신 default_popup 항목만 사용하도록 변경했습니다.

Unrecognized manifest key 'declarativeNetRequest'. 이런다.. 고쳐줘...

Unrecognized manifest key 'declarativeNetRequest' 에러는 manifest_version 3에서 새로 도입된 declarativeNetRequest 권한을 인식하지 못해서 발생하는 오류입니다.

이 오류를 해결하려면, permissions 대신 host_permissions 항목을 사용하여 https://kstblog.aww.kr/* URL 패턴을 지정하고, declarativeContent 항목을 사용하여 네트워크 요청을 필터링해야 합니다.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "host_permissions": [
    "https://kstblog.aww.kr/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [],
  "declarativeContent": {
    "pageState": {
      "pageUrl": {
        "hostEquals": "kstblog.aww.kr"
      }
    },
    "requestContent": {
      "urls": [
        "https://kstblog.aww.kr/*"
      ]
    },
    "actions": [
      "blockRequest"
    ]
  }
}

이렇게 host_permissions 항목에서 https://kstblog.aww.kr/* URL 패턴을 지정하고, declarativeContent 항목에서 필터링 규칙을 지정하도록 수정했습니다. declarativeContent 항목은 페이지 상태(pageState), 요청 콘텐츠(requestContent), 액션(actions)을 지정하여 네트워크 요청을 필터링합니다. 위 예제에서는 https://kstblog.aww.kr/* URL 패턴을 가진 페이지에서 네트워크 요청을 차단하는 규칙을 설정하도록 했습니다.

Unrecognized manifest key 'declarativeContent'. 이런다.. 고쳐줘..

Unrecognized manifest key 'declarativeContent' 에러는 manifest_version 2에서는 지원하지 않는 declarativeContent 항목을 사용하여 발생한 오류입니다.

이 경우, webRequest 권한을 사용하여 네트워크 요청을 필터링하는 방법을 사용해야 합니다. 다음은 webRequest 권한을 사용하여 https://kstblog.aww.kr/* URL 패턴을 가진 페이지에서 네트워크 요청을 차단하는 예시입니다.

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://kstblog.aww.kr/*"
  ],
  "background": {
    "scripts": ["background.js"]
  },
  "browser_action": {
    "default_popup": "popup.html"
  }
}

이렇게 webRequest 권한과 webRequestBlocking 권한을 사용하여 네트워크 요청을 필터링할 수 있습니다. 이 예시에서는 https://kstblog.aww.kr/* URL 패턴을 가진 페이지에서 모든 네트워크 요청을 차단하도록 설정하였습니다. background.js 파일에서는 webRequest API를 사용하여 네트워크 요청을 필터링하고, 차단 여부를 결정하도록 작성해야 합니다.

친구야 manifest_version 2 아니라고 3이라고

죄송합니다. 이전에 제가 말씀드린 것이 잘못된 정보였습니다. 말씀하신 대로 manifest_version 항목은 3으로 설정해야 합니다.

따라서 이전에 말씀드렸던 declarativeNetRequest 항목과 host_permissions 항목 등은 더 이상 사용되지 않습니다. 대신 declarativeContent 항목을 사용하여 네트워크 요청을 필터링할 수 있습니다. 이 경우 webRequest 권한 대신 declarativeNetRequest 권한이 필요하며, background 항목 대신 service_worker 항목을 사용해야 합니다.

다시 한번, 이전의 내용이 잘못된 정보였음을 사과드립니다. 다음은 수정된 manifest.json 파일의 예시입니다.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "permissions": [
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "https://kstblog.aww.kr/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "declarativeContent": {
    "pageState": {
      "pageUrl": {
        "hostEquals": "kstblog.aww.kr"
      }
    },
    "requestContent": {
      "urls": [
        "https://kstblog.aww.kr/*"
      ]
    },
    "actions": [
      "blockRequest"
    ]
  }
}

위 예시에서는 manifest_version 항목을 3으로 설정하고, declarativeNetRequest 대신 declarativeContent 항목을 사용하여 네트워크 요청을 필터링하도록 설정하였습니다. 또한, background 항목 대신 service_worker 항목을 사용하도록 변경하였습니다.

{ "manifest_version": 3, "name": "My Extension", "version": "1.0", "description": "This is my first Chrome extension.", "permissions": [ "declarativeNetRequest" ], "host_permissions": [ "https://kstblog.aww.kr/*" ], "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "declarativeContent": { "pageState": { "pageUrl": { "hostEquals": "kstblog.aww.kr" } }, "requestContent": { "urls": [ "https://kstblog.aww.kr/*" ] }, "actions": [ "blockRequest" ] } } 이렇게 했을때 Errors 를 눌러서 확인해보니 Unrecognized manifest key 'declarativeContent'. Service worker registration failed. Status code: 15 나온다. manifest_version 3에 맞게 고쳐줘.

Unrecognized manifest key 'declarativeContent' 에러는 manifest_version 2에서는 지원하지 않는 declarativeContent 항목을 사용하여 발생한 오류입니다.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "permissions": [
    "webRequest",
    "webRequestBlocking",
    "https://kstblog.aww.kr/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

{ "manifest_version": 3, "name": "My Extension", "version": "1.0", "description": "This is my first Chrome extension.", "permissions": [ "webRequest", "https://kstblog.aww.kr/*" ], "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" } } 이렇게 했을때 Errors 를 눌러서 확인해보니 Permission 'https://kstblog.aww.kr/*' is unknown or URL pattern is malformed. Service worker registration failed. Status code: 15 나온다. manifest_version 3에 맞게 고쳐줘.

Permission 'https://kstblog.aww.kr/*' is unknown or URL pattern is malformed. 에러는 webRequest 권한에 URL 패턴을 설정할 때, 패턴이 잘못되어 발생하는 오류입니다.

webRequest 권한에 URL 패턴을 설정할 때에는 * 문자를 사용하여 와일드카드 패턴을 사용할 수 있습니다. 예를 들어, https://kstblog.aww.kr/*와 같이 설정할 수 있습니다.

하지만 manifest_version 3에서는 webRequest API가 제거되어 declarativeNetRequest API로 대체되었으므로, URL 패턴 설정 방법이 다릅니다. declarativeNetRequest API를 사용하여 네트워크 요청을 필터링할 때에는 https://kstblog.aww.kr/*와 같은 와일드카드 패턴 대신, https://kstblog.aww.kr/와 같이 패턴 끝에 슬래시(/) 문자를 반드시 포함해야 합니다.

따라서 다음과 같이 declarativeNetRequest API를 사용하여 https://kstblog.aww.kr/ URL에서 네트워크 요청을 필터링하는 방법을 사용할 수 있습니다.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "permissions": [
    "declarativeNetRequest",
    "https://kstblog.aww.kr/"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "declarativeNetRequest": {
    "ruleResources": [{
      "id": "block_kstblog_aww_kr",
      "enabled": true,
      "priority": 1,
      "action": {
        "type": "block"
      },
      "rule": {
        "domains": ["kstblog.aww.kr"]
      }
    }]
  }
}

위 예시에서는 declarativeNetRequest 권한을 사용하여 https://kstblog.aww.kr/ URL에서 네트워크 요청을 필터링하도록 설정하였습니다. declarativeNetRequest 항목에서는 ruleResources 배열 안에 필터링 규칙을 설정할 수 있습니다. ruleResources 배열 안에 있는 객체에서 rule 항목에서는 필터링 규칙을, action 항목에서는 필터링된 요청에 대한 액션을 설정할 수 있습니다. 위 예시에서는 domains 항목에서 kstblog.aww.kr 도메인을 필터링하고, action 항목에서는 필터링된 요청을 차단하도록 설정하였습니다.

Service worker registration failed. Status code: 15 이건 뭐야

Service worker registration failed. Status code: 15는 서비스 워커 등록에 실패했다는 것을 나타내는 오류 메시지입니다. 이 오류는 보통 다음과 같은 경우에 발생합니다.

서비스 워커 스크립트가 올바르게 로드되지 않았을 경우
서비스 워커 스크립트에서 오류가 발생한 경우
HTTPS 환경에서만 서비스 워커를 등록해야 하는데, HTTPS가 아닌 환경에서 등록한 경우

서비스 워커 등록에 실패한 경우에는 크롬 브라우저의 chrome://extensions/ 페이지에서 해당 확장 프로그램을 제거한 후, 다시 로드하는 방법을 시도해볼 수 있습니다. 또한, 서비스 워커를 디버깅할 때는 크롬 개발자 도구에서 Console 탭에서 오류 메시지를 확인할 수 있습니다.

// 탭이 변경될 때 실행되는 이벤트 핸들러 chrome.tabs.onActivated.addListener(tab => { // 활성화된 탭 정보 가져오기 chrome.tabs.get(tab.tabId, current_tab_info => { // 탭 정보를 출력 console.log(current_tab_info); }); }); // 새로운 탭이 생성될 때 실행되는 이벤트 핸들러 chrome.tabs.onCreated.addListener(tab => { // 새로 생성된 탭 정보 출력 console.log(tab); }); // 익스텐션 아이콘을 클릭할 때 실행되는 이벤트 핸들러 chrome.browserAction.onClicked.addListener(tab => { // 현재 탭의 URL 가져오기 chrome.tabs.query({ active: true, currentWindow: true }, tabs => { let current_tab = tabs[0]; let current_url = current_tab.url; // URL 출력 console.log(current_url); }); }); 이거 background.js 파일인데 17번라인에 문제 있대. 3버전에 맞게 고쳐줘.

chrome.browserAction API는 manifest_version 3에서도 사용 가능합니다. 하지만 chrome.tabs API는 declarativeNetRequest API로 대체되어 manifest_version 3에서는 사용할 수 없습니다.

chrome.tabs API를 사용하는 대신, declarativeNetRequest API를 사용하여 필요한 작업을 수행해야 합니다. 예를 들어, declarativeNetRequest API를 사용하여 특정 도메인에서 네트워크 요청을 차단하도록 설정하거나, contentScripts API를 사용하여 페이지 스크립트를 삽입하도록 설정할 수 있습니다.

따라서 chrome.tabs API를 사용하는 코드를 declarativeNetRequest API를 사용하는 방법으로 변경해야 합니다.

예를 들어, declarativeNetRequest API를 사용하여 kstblog.aww.kr 도메인에서 네트워크 요청을 차단하도록 설정하려면 다음과 같이 설정할 수 있습니다.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "permissions": [
    "declarativeNetRequest",
    "https://kstblog.aww.kr/"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "declarativeNetRequest": {
    "ruleResources": [{
      "id": "block_kstblog_aww_kr",
      "enabled": true,
      "priority": 1,
      "action": {
        "type": "block"
      },
      "rule": {
        "domains": ["kstblog.aww.kr"]
      }
    }]
  }
}

위 예시에서는 declarativeNetRequest 권한을 사용하여 kstblog.aww.kr 도메인에서 네트워크 요청을 필터링하도록 설정하였습니다. declarativeNetRequest 항목에서는 ruleResources 배열 안에 필터링 규칙을 설정할 수 있습니다. ruleResources 배열 안에 있는 객체에서 rule 항목에서는 필터링 규칙을, action 항목에서는 필터링된 요청에 대한 액션을 설정할 수 있습니다. 위 예시에서는 domains 항목에서 kstblog.aww.kr 도메인을 필터링하고, action 항목에서는 필터링된 요청을 차단하도록 설정하였습니다.

아니 background.js 파일 고쳐줘

죄송합니다. chrome.tabs API를 사용하는 부분을 고칠 필요가 있습니다.

chrome.tabs API 대신에 chrome.action.onClicked API를 사용하여 확장 아이콘을 클릭하였을 때 동작하도록 설정할 수 있습니다. 아래는 수정된 background.js 파일입니다.

// 익스텐션 아이콘을 클릭할 때 실행되는 이벤트 핸들러
chrome.action.onClicked.addListener(tab => {
    // 현재 탭의 URL 가져오기
    chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
        let current_tab = tabs[0];
        let current_url = current_tab.url;
        // URL 출력
        console.log(current_url);
    });
});

// 선언적 네트워크 요청 이벤트 핸들러
chrome.declarativeNetRequest.onRequest.addRules([
    {
        id: 'block_kstblog.aww.kr',
        priority: 1,
        action: {
            type: 'block'
        },
        condition: {
            domains: ['kstblog.aww.kr']
        }
    }
]);

chrome.declarativeNetRequest.onRequest.addRules() 메소드를 사용하여 필터링 규칙을 추가할 수 있습니다. 이 예시에서는 kstblog.aww.kr 도메인에서 발생하는 모든 요청을 차단하도록 설정하였습니다.

content_script.js 에 console.log(123) 찍어봤어 근데 안나와 이게 맞아?

content_script.js 파일에 console.log(123) 코드를 추가하면, 해당 코드는 웹 페이지의 개발자 도구 콘솔에 출력됩니다. 즉, 크롬 익스텐션의 백그라운드 페이지에서 console.log()으로 출력된 로그는 개발자 도구 콘솔이 아닌, 크롬 익스텐션 개발자 도구의 "백그라운드 페이지" 탭에서 확인할 수 있습니다.

따라서, 웹 페이지에서 content_script.js 파일에 작성한 코드를 확인하려면, 해당 웹 페이지를 열고 개발자 도구 콘솔을 열어야 합니다. 그리고 나서 content_script.js 파일에 작성한 코드가 제대로 실행되었는지 확인해보세요.

어떻게 확인해

크롬 브라우저에서 웹 페이지를 열고, 웹 페이지에서 마우스 오른쪽 버튼을 클릭한 후 "검사"를 선택하거나, 키보드에서 F12 키를 눌러 개발자 도구를 열 수 있습니다.

개발자 도구에서 "Console" 탭을 선택한 후, content_script.js 파일에서 console.log()로 출력한 내용이 콘솔에 출력되는지 확인하실 수 있습니다.

console.log 로 출력한거 안나와

content_script.js 파일에서 console.log()으로 출력한 내용이 개발자 도구 콘솔에 출력되지 않는다면, 다음과 같은 점들을 체크해보시면 됩니다.

content_script.js 파일이 웹 페이지에 잘 적용되었는지 확인하세요. 이를 위해서는 개발자 도구에서 "Sources" 탭을 선택하고, 왼쪽 창에서 "content_script.js" 파일을 찾아봅니다. 파일이 정상적으로 로딩되었다면, 파일 내용이 보이게 됩니다.
content_script.js 파일에서 console.log() 구문이 올바르게 작성되었는지 확인하세요. 구문 내용이 잘못되었다면, 콘솔에 출력되지 않을 수 있습니다.
웹 페이지가 https://kstblog.aww.kr와 같이 지정된 도메인을 가지는지 확인하세요. 지정된 도메인이 아니라면, content_script.js 파일이 적용되지 않아 console.log() 구문이 실행되지 않을 수 있습니다.

위 세 가지를 확인해보시고, 문제가 해결되지 않는다면 더 자세한 정보를 찾기 위해 검색을 진행하시거나 다른 방식으로 디버깅을 시도해보시면 좋을 것 같습니다.

1번에 문제가 있는거같네? 안보여

content_script.js 파일이 웹 페이지에 적용되었는지 확인하는 방법은 다음과 같습니다.

개발자 도구를 엽니다. 이를 위해서는 웹 페이지에서 마우스 오른쪽 버튼을 클릭한 후 "검사"를 선택하거나, 키보드에서 F12 키를 누르면 됩니다.
개발자 도구에서 "Sources" 탭을 선택합니다.
왼쪽 창에서 "content_script.js" 파일을 찾습니다. 만약 파일이 정상적으로 로딩되었다면, 해당 파일이 보여질 것입니다.
"content_script.js" 파일을 클릭하여 파일 내용을 확인합니다. 파일 내용을 확인하는 동시에, console.log()을 사용한 디버깅 코드가 포함되어 있는지도 확인해야 합니다.
만약 "content_script.js" 파일이 로딩되지 않았다면, 크롬 익스텐션의 manifest.json 파일에 content_scripts 필드를 추가하고, 해당 필드에서 content_script.js 파일을 지정해야 합니다.

만약 위 과정에서 content_script.js 파일이 보이지 않는다면, 파일 경로가 맞는지, 파일 이름이 맞는지 다시 한번 확인해보시고, 파일이 잘못 작성되었는지도 확인해보시기 바랍니다.

{ "manifest_version": 3, "name": "My Extension", "version": "1.0", "description": "This is my first Chrome extension.", "host_permissions": [ "https://kstblog.aww.kr/*" ], "background": { "service_worker": "background.js" }, "action": { "default_popup": "popup.html" }, "permissions": [] } manifest.json 이렇게 생겼는데 맞아?

네, manifest.json 파일의 내용이 모두 맞습니다. 해당 파일을 기반으로 익스텐션을 만들고, 크롬 웹 브라우저에 로드하면 background.js, popup.html, 그리고 content_script.js 파일이 로드되어 익스텐션의 기능이 동작합니다.

이제 content_script.js 파일에서 원하는 기능을 구현하고, 필요에 따라 background.js 파일과 popup.html 파일도 수정하여 익스텐션의 기능을 확장할 수 있습니다.

나의 manifest에 content_script 적용되있는거 맞아?

제가 알기로는, 직전에 보내주신 manifest.json 파일에서 content_scripts 필드는 지워졌기 때문에, content_script.js 파일이 적용되지 않은 상태입니다. 만약 content_script.js 파일을 웹 페이지에 적용하려면, manifest.json 파일에 content_scripts 필드를 추가하고 해당 필드에서 content_script.js 파일을 지정해야 합니다.

예를 들어, 아래와 같이 content_scripts 필드를 추가하면 됩니다.

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "This is my first Chrome extension.",
  "host_permissions": [
    "https://kstblog.aww.kr/*"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": [],
  "content_scripts": [
    {
      "matches": [
        "https://kstblog.aww.kr/*"
      ],
      "js": [
        "content_script.js"
      ]
    }
  ]
}

위와 같이 content_scripts 필드를 추가하면, https://kstblog.aww.kr 도메인에서 content_script.js 파일이 적용됩니다. matches 필드에서는 적용 대상 URL 패턴을, js 필드에서는 적용할 자바스크립트 파일을 지정합니다.

오.. 친구야.. 잘된다

잘 되어서 다행입니다. content_script.js 파일을 웹 페이지에 성공적으로 적용할 수 있었나 보군요!

이제 이 파일에서 원하는 기능을 구현하고, 필요에 따라 background.js 파일과 popup.html 파일도 수정하여 익스텐션의 기능을 확장할 수 있습니다.

추가로 궁금한 점이 있으면 언제든지 물어보세요!

popup이 필수인건 아니지?

네, popup 페이지는 크롬 익스텐션에서 필수가 아닌 선택적인 페이지입니다. popup 페이지는 사용자가 익스텐션 아이콘을 클릭했을 때 나타나는 작은 팝업 창으로, 사용자와 상호작용할 수 있는 UI를 제공할 수 있습니다. 하지만, popup 페이지가 없어도 크롬 익스텐션에서 원하는 기능을 구현할 수 있습니다.

popup 페이지를 만들지 않는다면, 대신 background 페이지나 content script 페이지에서 필요한 기능을 구현할 수 있습니다. background 페이지는 익스텐션이 백그라운드에서 실행되는 동안 유지해야 하는 상태나 데이터를 처리하고, content script 페이지는 웹 페이지의 DOM을 조작하거나 페이지에서 발생하는 이벤트를 감지하고 처리할 수 있습니다.

popup 사이즈는 어떻게 정해?

popup 페이지의 크기는 popup.html 파일에서 <body> 태그에 width와 height 속성을 사용하여 지정할 수 있습니다.

예를 들어, popup 페이지를 300x400 픽셀 크기로 지정하려면, popup.html 파일의 <body> 태그를 다음과 같이 수정할 수 있습니다.

<body style="width:300px;height:400px;">
  <!-- 페이지 내용 -->
</body>

또는, CSS 스타일 시트를 사용하여 popup 페이지의 스타일을 지정할 수도 있습니다. 예를 들어, popup.html 파일과 같은 디렉토리에 style.css 파일을 만들고, 다음과 같은 스타일을 지정할 수 있습니다.

body {
  width: 300px;
  height: 400px;
}

그런 다음, popup.html 파일의 <head> 태그 내에 다음과 같은 코드를 추가하여 스타일 시트를 로드할 수 있습니다.

<head>
  <link rel="stylesheet" href="style.css">
</head>

잘된다 친구야

좋아요, 잘 되서 다행입니다. 더 궁금한 점이 있으면 언제든지 물어봐주세요!

내가 background.js 의 용도를 아직도 잘 모르겠다

background.js 파일은 백그라운드 스크립트를 실행하는 파일입니다. 크롬 익스텐션에서 백그라운드 스크립트란, 브라우저가 실행 중이더라도 백그라운드에서 지속적으로 실행되는 JavaScript 파일을 말합니다.

익스텐션의 일부 기능은 백그라운드 스크립트를 사용하여 구현됩니다. 예를 들어, chrome.tabs API를 사용하여 탭 정보를 가져오거나 조작하려면 백그라운드 스크립트에서 API를 호출해야 합니다.

또한, 백그라운드 스크립트에서는 chrome.runtime API를 사용하여 익스텐션의 생명주기 이벤트를 수신하고, 이벤트 핸들러를 등록하여 익스텐션의 동작을 제어할 수 있습니다.

background.js 파일에서는 chrome.tabs, chrome.runtime API를 사용하여 탭 정보를 가져오거나 익스텐션의 생명주기 이벤트를 처리하는 코드를 작성할 수 있습니다.

content_script.js 에는 뭘하는 코드를 넣어?

content_script.js 파일은 웹 페이지에서 실행됩니다. 이 파일은 웹 페이지의 DOM 요소에 접근하여 동적으로 HTML, CSS, JavaScript 등을 수정할 수 있습니다.

예를 들어, content_script.js 파일에서는 chrome.tabs API를 사용할 수 없지만, 대신 chrome.runtime API를 사용하여 백그라운드 스크립트와 통신할 수 있습니다.

일반적으로 content_script.js에서 하는 작업은 다음과 같습니다.

웹 페이지의 HTML, CSS, JavaScript를 수정하여 콘텐츠를 추가하거나 변경합니다.
웹 페이지에서 특정 요소를 선택하고, 이벤트 핸들러를 등록하여 상호작용합니다.
백그라운드 스크립트와 통신하여 데이터를 주고받습니다.

예를 들어, content_script.js에서는 웹 페이지에서 특정 요소를 선택하고, 이벤트 핸들러를 등록하여 상호작용할 수 있습니다. 다음은 웹 페이지에서 클릭 이벤트를 처리하는 간단한 예제입니다.

// 웹 페이지에서 버튼 요소 선택하기
let button = document.getElementById('my-button');

// 버튼 요소에 클릭 이벤트 핸들러 등록하기
button.addEventListener('click', () => {
  // 백그라운드 스크립트로 메시지 보내기
  chrome.runtime.sendMessage({ greeting: 'hello' }, response => {
    console.log(response.farewell);
  });
});

이 코드에서는 웹 페이지에서 my-button ID를 가진 요소를 선택하고, 해당 요소에 클릭 이벤트 핸들러를 등록합니다. 클릭 이벤트가 발생하면 chrome.runtime API를 사용하여 백그라운드 스크립트로 메시지를 보내고, 백그라운드 스크립트에서는 해당 메시지를 수신하여 처리합니다.