이 페이지는 Cloud Translation API를 통해 번역되었습니다.

탭 관리

첫 번째 탭 관리자를 빌드합니다.

개요

이 튜토리얼에서는 Chrome 확장 프로그램 및 Chrome 웹 스토어 문서 탭을 정리하는 탭 관리자를 만듭니다.

이 가이드에서는 다음 작업을 수행하는 방법을 설명합니다.

Action API를 사용하여 확장 프로그램 팝업을 만듭니다.
Tabs API를 사용하여 특정 탭을 쿼리합니다.
좁은 호스트 권한을 통해 사용자 개인 정보를 보호합니다.
탭의 포커스를 변경합니다.
탭을 동일한 창으로 이동하고 그룹화합니다.
TabGroups API를 사용하여 탭 그룹의 이름을 바꿉니다.

시작하기 전에

이 가이드에서는 개발자에게 기본적인 웹 개발 경험이 있다고 가정합니다. 확장 프로그램 개발 워크플로에 대한 소개는 Hello World를 확인하는 것이 좋습니다.

확장 프로그램 빌드

시작하려면 확장 프로그램의 파일을 보관할 tabs-manager라는 새 디렉터리를 만듭니다. 원하는 경우 GitHub에서 전체 소스 코드를 다운로드할 수 있습니다.

1단계: 확장 프로그램 데이터 및 아이콘 추가

manifest.json라는 파일을 만들고 다음 코드를 추가합니다.

{
  "manifest_version": 3,
  "name": "Tab Manager for Chrome Dev Docs",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  }
}

이러한 매니페스트 키에 관한 자세한 내용은 확장 프로그램의 메타데이터 및 아이콘을 자세히 설명하는 읽기 시간 튜토리얼을 확인하세요.

images 폴더를 만든 다음 그 안에 아이콘을 다운로드합니다.

2단계: 팝업 만들기 및 스타일 지정

Action API는 확장 프로그램 작업 (툴바 아이콘)을 제어합니다. 사용자가 확장 프로그램 작업을 클릭하면 이 경우와 같이 일부 코드가 실행되거나 팝업이 열립니다. 먼저 manifest.json에서 팝업을 선언합니다.

{
  "action": {
    "default_popup": "popup.html"
  }
}

팝업은 웹페이지와 비슷하지만 인라인 JavaScript를 실행할 수 없다는 한 가지 예외가 있습니다. popup.html 파일을 만들고 다음 코드를 추가합니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./popup.css" />
  </head>
  <body>
    <template id="li_template">
      <li>
        <a>
          <h3 class="title">Tab Title</h3>
          <p class="pathname">Tab Pathname</p>
        </a>
      </li>
    </template>

    <h1>Google Dev Docs</h1>
    <button>Group Tabs</button>
    <ul></ul>

    <script src="./popup.js" type="module"></script>
  </body>
</html>

팁: type="module"를 스크립트 태그에 추가하여 최상위 수준 대기를 사용할 수 있습니다.

다음으로, 팝업의 스타일을 지정합니다. popup.css 파일을 만들고 다음 코드를 추가합니다.

body {
  width: 20rem;
}

ul {
  list-style-type: none;
  padding-inline-start: 0;
  margin: 1rem 0;
}

li {
  padding: 0.25rem;
}
li:nth-child(odd) {
  background: #80808030;
}
li:nth-child(even) {
  background: #ffffff;
}

h3,
p {
  margin: 0;
}

3단계: 탭 관리하기

Tabs API를 사용하면 확장 프로그램이 브라우저에서 탭을 생성, 쿼리, 수정, 재정렬할 수 있습니다.

권한 요청

Tabs API의 많은 메서드는 권한을 요청하지 않고도 사용할 수 있습니다. 그러나 탭의 title 및 URL에 액세스해야 하는데 이러한 민감한 속성에는 권한이 필요합니다. "tabs" 권한을 요청할 수 있지만 이 경우 모든 탭의 민감한 속성에 액세스할 수 있습니다. Google에서는 특정 사이트의 탭만 관리하므로 좁은 호스트 권한을 요청합니다.

호스트 권한을 좁히면 특정 사이트에 승격된 권한을 부여하여 사용자 개인 정보를 보호할 수 있습니다. 이렇게 하면 title 및 URL 속성에 대한 액세스 권한과 추가 기능이 부여됩니다. 강조표시된 코드를 manifest.json 파일에 추가합니다.

{
  "host_permissions": [
    "https://developer.chrome.com/*"
  ]
}

💡 탭 권한과 호스트 권한의 주요 차이점은 무엇인가요?

"tabs" 권한과 호스트 권한 모두 단점이 있습니다.

"tabs" 권한은 확장 프로그램이 모든 탭에서 민감한 정보를 읽을 수 있는 권한을 부여합니다. 시간이 지남에 따라 이 정보는 사용자의 방문 기록을 수집하는 데 사용될 수 있습니다. 따라서 이 권한을 요청하면 Chrome 설치 시 다음과 같은 경고 메시지가 표시됩니다.

탭 권한 경고 대화상자

호스트 권한을 사용하면 확장 프로그램이 일치하는 탭의 민감한 속성을 읽고 쿼리하고 이러한 탭에 스크립트를 삽입할 수 있습니다. 설치 시 사용자에게 다음과 같은 경고 메시지가 표시됩니다.

호스트 권한 경고 대화상자

이러한 경고는 사용자에게 불안감을 줄 수 있습니다. 온보딩 환경을 개선하려면 선택적 권한을 구현하는 것이 좋습니다.

탭 쿼리

tabs.query() 메서드를 사용하여 특정 URL에서 탭을 가져올 수 있습니다. popup.js 파일을 만들고 다음 코드를 추가합니다.

const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ]
});

💡 팝업에서 Chrome API를 직접 사용할 수 있나요?

팝업 및 기타 확장 프로그램 페이지는 Chrome 스키마에서 제공되므로 모든 Chrome API를 호출할 수 있습니다. 예: chrome-extension://EXTENSION_ID/popup.html

탭에 포커스

먼저 확장 프로그램은 탭 이름 (포함된 HTML 페이지의 제목)을 알파벳순으로 정렬합니다. 그런 다음 목록 항목을 클릭하면 tabs.update()를 사용하여 탭에 포커스를 맞추고 windows.update()를 사용하여 창을 앞으로 가져옵니다. 다음 코드를 popup.js 파일에 추가합니다.

...
const collator = new Intl.Collator();
tabs.sort((a, b) => collator.compare(a.title, b.title));

const template = document.getElementById("li_template");
const elements = new Set();
for (const tab of tabs) {
  const element = template.content.firstElementChild.cloneNode(true);

  const title = tab.title.split("-")[0].trim();
  const pathname = new URL(tab.url).pathname.slice("/docs".length);

  element.querySelector(".title").textContent = title;
  element.querySelector(".pathname").textContent = pathname;
  element.querySelector("a").addEventListener("click", async () => {
    // need to focus window as well as the active tab
    await chrome.tabs.update(tab.id, { active: true });
    await chrome.windows.update(tab.windowId, { focused: true });
  });

  elements.add(element);
}
document.querySelector("ul").append(...elements);
...

💡 이 코드에 사용된 흥미로운 자바스크립트

사용자의 기본 언어별로 탭 배열을 정렬하는 데 사용되는 Collator입니다.
document.createElement()를 사용하여 각 항목을 만드는 대신 클론할 수 있는 HTML 요소를 정의하는 데 사용되는 템플릿 태그
URL을 만들고 파싱하는 데 사용되는 URL 생성자입니다.
요소 집합을 append() 호출의 인수로 변환하는 데 사용되는 분산 문법입니다.

탭 그룹화

TabGroups API를 사용하면 확장 프로그램에서 그룹 이름을 지정하고 배경 색상을 선택할 수 있습니다. 강조표시된 코드를 추가하여 "tabGroups" 권한을 매니페스트에 추가합니다.

{
  "permissions": [
    "tabGroups"
  ]
}

popup.js에서 다음 코드를 추가하여 tabs.group()를 사용하여 모든 탭을 그룹화하고 현재 창으로 이동하는 버튼을 만듭니다.

const button = document.querySelector("button");
button.addEventListener("click", async () => {
  const tabIds = tabs.map(({ id }) => id);
  if (tabIds.length) {
    const group = await chrome.tabs.group({ tabIds });
    await chrome.tabGroups.update(group, { title: "DOCS" });
  }
});

작동 테스트

프로젝트의 파일 구조가 다음 디렉터리 트리와 일치하는지 확인합니다.

탭 관리자 폴더의 콘텐츠(manifest.json, pop.js, pop.css, pop.html, images)

로컬에서 확장 프로그램 로드

개발자 모드에서 압축해제된 확장 프로그램을 로드하려면 Hello World의 단계를 따릅니다.

몇몇 문서 페이지 열기

다른 창에서 다음 문서 열기:

팝업을 클릭합니다. 다음과 같이 표시됩니다.

'탭 그룹화' 버튼을 클릭합니다. 다음과 같이 표시됩니다.

📊 잠재적 향상

오늘 배운 내용을 바탕으로 다음 중 하나를 구현해 보세요.

팝업 스타일 시트를 맞춤설정합니다.
탭 그룹의 색상과 제목을 변경합니다.
다른 문서 사이트의 탭을 관리합니다.
그룹화된 탭의 그룹화 해제 지원을 추가합니다.

계속 만들어 보세요!

이 튜토리얼을 완료했습니다 🎉. 이 시리즈의 다른 튜토리얼을 완료하여 기술을 계속 개발하세요.

확장	학습할 내용
읽기 시간	모든 페이지에 엘리먼트 자동 삽입하기
집중 모드	확장 프로그램 작업을 클릭한 후 현재 페이지에서 코드를 실행합니다.

계속 둘러보기

이 Chrome 확장 프로그램 빌드가 도움이 되었기를 바라며 앞으로도 Chrome 개발 학습 여정을 계속해 주시기 바랍니다. 다음 학습 과정을 따르는 것이 좋습니다.

개발자 가이드에는 고급 확장 프로그램 만들기와 관련된 문서로 연결되는 수십 개의 추가 링크가 있습니다.
확장 프로그램을 통해 공개 웹에서 사용할 수 있는 것 이상의 강력한 API에 액세스할 수 있습니다. Chrome API 문서에서 각 API를 설명합니다.