브라우저 확장 프로그램 - 아이콘 동작

지금까지 팝업 확장에 대한 몇 가지 기사가 있었습니다. 이들은 일반적으로 아이콘 클릭 동작에서 번성합니다.

그러나 새로운 탭 경험은 어떻습니까? 해당 아이콘을 클릭해도 아무 일도 일어나지 않습니다.

문제를 해결해 보겠습니다.

Note: If you like to work along with this article, use the following GitHub branch as your starting point.

사용자가 도구 모음 아이콘을 클릭할 때 새 탭이 열리길 원합니다.

브라우저 확장 프로그램 아이콘 작업

충분히 재미있는 이 작업은 매니페스트에 정의되어 있지 않습니다. 대신 백그라운드 스크립트에 수동 작업을 기록해야 합니다.

새 탭에 하나를 사용하지 않으므로 background.js 폴더 안에 public 파일을 추가해 보겠습니다.

그런 다음 manifest.json를 열고 백그라운드 스크립트를 서비스 워커(버전 3)로 등록합니다.

여기에서는 비어 있는action 개체도 정의해야 합니다. 이렇게 하면 작업을 사용할 수 있습니다.

{
    "action": {},
  "background": {
    "service_worker": "background.js"
  }
}

이제 백그라운드 스크립트로 돌아가십시오. browserAction 에 대한 작업을 등록해야 합니다.

chrome.action.onClicked.addListener(() => {
  chrome.tabs.create({ url: './new-tab.html', active: true });
});

액션 속성(아이콘)에 온클릭 핸들러를 등록합니다. 사용자가 이 아이콘을 클릭하면 new-tab.html를 소스로 하여 새 탭으로 이동합니다.
이것은 상대 링크이므로 작동합니다.

사용자가 아이콘을 클릭하면 기본 페이지가 있는 새 탭으로 이동합니다.

완성된 코드 샘플은 다음GitHub branch에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나