리액트 - 크롬 확장 프로그램 사이드 패널 만들기 (React Chrome Extension Side Panel Example)

리액트 전체 링크

 

참고

- 크롬 확장 프로그램에서 현재 페이지의 URL과 HTML 가져오기

 

다음과 같이 리액트 Application을 크롬 확장 프로그램의 사이드 패널로 만들어보자.

---

파일 추가

 

public 폴더에 manifest.json, background.js를 추가한다.

 

public/manifest.json

{
  "manifest_version": 3,
  "name": "React Side Panel Extension",
  "version": "1.0",
  "description": "React app in Chrome Side Panel",
  "permissions": ["storage", "scripting", "tabs", "sidePanel", "notifications"],
  "action": {
    "default_title": "Click to open panel"
  },
  "side_panel": {
    "default_path": "index.html"
  },
  "background": {
    "service_worker": "background.js"
  },
  "web_accessible_resources": [
    {
      "resources": [
        "index.html",
        "static/*"
      ],
      "matches": [
        "<all_urls>"
      ]
    }
  ]
}

 

public/background.js

// 확장 프로그램 클릭 시, 사이드 패널 Open
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

// 설치 시 알림 및 초기 설정
chrome.runtime.onInstalled.addListener(() => {
  console.log("Extension installed.");

  // 알림 생성
  chrome.notifications.create(
    "welcome-notification",
    {
      type: "basic",
      iconUrl: "icon.png",
      title: "Welcome!",
      message: "Click the extension icon to open the side panel.",
    },
    () => {
      if (chrome.runtime.lastError) {
        console.error("Notification error:", chrome.runtime.lastError.message);
      }
    }
  );
});

chrome.action.onClicked.addListener((info, tab) => {
  console.log("on click debug!");
});

 

public/icon.png (참고)

---

크롬 확장 프로그램 추가

 

리액트 App을 빌드한다.

$ npm run build

> react-extension@0.1.0 build
> react-scripts build

...

Find out more about deployment here:

  https://cra.link/deployment

 

chrome://extensions/으로 이동한 후,

개발자 모드로 변경하고, "압축해제된 확장 프로그램을 로드합니다." 를 클릭한다.

 

리액트 프로젝트의 bulid 폴더를 선택한다.

 

리액트 App이 확장 프로그램으로 추가되었다.

서비스 워커를 클릭하면 background.js에서 추가한 로그를 확인할 수 있다.

 

확장 프로그램 버튼을 클릭해서, 추가한 App을 실행하면 된다.

 

리액트 App이 크롬 확장 프로그램의 Side Panel에 정상적으로 추가되었다.

---

참고로, 확장 프로그램에 있는 EXTENSION_ID를 이용해서 디버깅도 가능하다.

 

chrome-extension://<EXTENSION_ID>/index.html 를 실행하면 App을 실행할 수 있다.