탭 룰렛 - 나의 첫 번째 확장

현재 목표는 확장 프레임워크의 백그라운드 기능을 활용하는 간단한 Chrome 확장 프로그램을 만드는 것입니다.

요약하자면, 백그라운드 스크립트는 주로 직접적인 사용자 상호 작용이 필요하지 않은 작업을 처리하도록 설계된 서비스 워커로 작동합니다.

핵심 역할 중 하나는 브라우저 확장 아키텍처에서 지속적이고 안정적인 유일한 구성 요소 역할을 하는 통신 허브 또는 이벤트 핸들러 역할을 하는 것입니다. 일시적인 콘텐츠 스크립트, 팝업 또는 옵션 페이지와 달리 백그라운드 서비스 워커는 들어오는 이벤트를 처리하기 위해 종료 시 자동으로 다시 시작하여 연속성을 보장합니다.

백그라운드 스크립트의 이 기능을 내 확장 프로그램의 중앙 컨트롤러로 활용할 계획입니다.

사용 사례

이 첫 번째 Chrome 확장 프로그램은 매우 간단합니다. 확장 프로그램의 작업 아이콘 클릭을 수신하고 룰렛과 같은 동작을 트리거하여 응답합니다. 룰렛은 하나의 탭이 무작위로 선택될 때까지 짧은 기간 동안 사용자 브라우저에 현재 열려 있는 탭을 순차적으로 활성화합니다.

보시다시피 이 확장 프로그램은 실용적인 목적으로 사용되지 않고 순전히 학습 연습을 위한 것입니다.

매니페스트

{
  "name": "TabRoulette",
  "version": "0.0.1",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon32.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_title": "Click to start",
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

Chrome 웹 스토어 및 확장 프로그램 관리 인터페이스에서 사용하기 위해 매니페스트에 지정된 아이콘 외에 가장 중요한 추가 사항은 작업 속성입니다. 이 속성은 도구 모음 아이콘을 클릭할 때 확장의 동작을 구성합니다. 우리의 경우에는 사용자 상호작용 시 탭 룰렛을 시작하도록 서비스 워커에게 지시합니다.

고려할 사항
내 코드는 ES 가져오기를 사용하지만 앞서 표시된 것처럼 service_worker가 모듈로 명시적으로 선언되지 않았습니다. 그래도 어떻게 됐나요?

"background": {
  "service_worker": "service-worker.js",
  "type": "module"
}

이러한 가져오기는 번들링 프로세스 중에 Vite에서 처리하고 해결합니다.

배경

앞서 언급한 것처럼 백그라운드 스크립트는 작업 아이콘 클릭을 수신하고 이에 대한 응답으로 탭 룰렛을 시작합니다.

chrome.action.onClicked.addListener(async () => {
 ...
})

강조할 리스너 로직의 주요 측면: 먼저 활성 창에 현재 열려 있는 모든 탭을 수집해야 합니다. 내 코드에서는 탭을 순차적으로 순환하기 위해 이러한 탭에 대한 참조가 필요하기 때문에 이는 필수적입니다.

const currentWindow = await chrome.windows.getCurrent();
const windowTabs = await chrome.tabs.query({
  windowId: currentWindow.id,
});

windowId를 지정하지 않고 chrome.tabs.query를 사용할 때 처음에 혼란스러웠습니다. 열려 있는 모든 브라우저 창에 걸쳐 모든 탭을 반환하는 반면 저는 활성 창의 탭만 원했기 때문입니다. 이로 인해 목록의 탭 수가 늘어나 예상치 못한 결과가 발생했습니다.

이 동작을 이해하고 나면 탭을 순차적으로 활성화하는 것이 간단해졌습니다. 임의의 탭이 최종적으로 선택될 때까지 탭 속성을 업데이트하여 각 탭을 순차적으로 활성화하는 작업만 포함됩니다.

{
  "name": "TabRoulette",
  "version": "0.0.1",
  "manifest_version": 3,
  "icons": {
    "16": "images/icon16.png",
    "32": "images/icon32.png",
    "48": "images/icon32.png",
    "128": "images/icon128.png"
  },
  "action": {
    "default_title": "Click to start",
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    }
  },
  "background": {
    "service_worker": "background.js"
  }
}

제가 달성하고 싶었던 또 다른 목표는 탭이 활성화되는 속도를 조정하는 것이었습니다(빠르게 시작하고 끝으로 갈수록 느려짐). 이를 달성하기 위해 초기 테스트에서 사용한 기본 setInterval 함수가 충분하지 않았습니다. 대신 조정 가능한 간격을 만들어 필요에 따라 타이밍을 동적으로 수정할 수 있는 작은 유틸리티를 구현했습니다.

"background": {
  "service_worker": "service-worker.js",
  "type": "module"
}

그것이 전부입니다. 브라우저 확장 프로그램의 세계를 더 깊이 탐구하기 위한 구실로 사용되는 재미있는 사용 사례를 갖춘 간단한 확장 프로그램입니다. 자세한 내용이 궁금하시다면 소스코드도 공유해드리겠습니다.

아, 그리고 저는 이 프로젝트를 사용하여 출판 과정을 탐구했는데, 매우 간단하다는 것을 알았습니다. 이제 리뷰와 최종 출간만을 기다리고 있습니다.

https://github.com/ivaneffable/tabRoulette

위 내용은 탭 룰렛 - 나의 첫 번째 확장의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!