이 페이지는 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"
  }
}

팝업은 웹페이지와 비슷하지만 인라인 자바스크립트를 실행할 수 없다는 한 가지 예외가 있습니다. 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-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);
...

💡 이 코드에 사용된 흥미로운 JavaScript

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

탭 그룹화

TabGroups API를 사용하면 확장 프로그램에서 그룹 이름을 지정하고 배경을 선택할 수 있습니다. color[색상] 강조표시된 코드를 추가하여 매니페스트에 "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를 자세히 안내합니다.