탭 관리

첫 번째 탭 관리자를 만들어 봅니다.

개요

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

<ph type="x-smartling-placeholder">
</ph> 탭 관리자 확장 프로그램 팝업 <ph type="x-smartling-placeholder">
</ph> 탭 관리자 확장 프로그램

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

  • 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>
드림

다음으로 팝업의 스타일을 지정합니다. 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의 많은 메서드는 권한을 요청하지 않고도 사용할 수 있습니다. 하지만 탭의 titleURL에 액세스해야 합니다. 이러한 민감한 속성에는 권한이 필요합니다. "tabs" 권한을 요청할 수도 있지만 이렇게 하면 모든 탭의 민감한 속성에 액세스할 수 있습니다. Google에서는 특정 사이트의 탭만 관리하기 때문에 좁은 호스트 권한을 요청합니다.

좁은 호스트 권한을 사용하면 특정 사이트에 승격된 권한을 부여하여 사용자 개인 정보를 보호할 수 있습니다. 이렇게 하면 titleURL 속성에 대한 액세스 권한과 추가 기능이 부여됩니다. 강조표시된 코드를 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의 단계를 따르세요.

문서 페이지 몇 개 열기

다른 창에서 다음 문서를 엽니다.

팝업을 클릭합니다. 예를 들면 다음과 같습니다.

<ph type="x-smartling-placeholder">
</ph> 탭 관리자 확장 프로그램 팝업 <ph type="x-smartling-placeholder">
</ph> 탭 관리자 확장 프로그램 팝업

'탭 그룹화'를 클릭합니다. 버튼을 클릭합니다. 예를 들면 다음과 같습니다.

<ph type="x-smartling-placeholder">
</ph> 탭 관리자 그룹화된 탭 <ph type="x-smartling-placeholder">
</ph> 탭 관리자 확장 프로그램을 사용하여 탭 그룹화

🎊 개선 가능성

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

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

계속 빌드하세요!

이 튜토리얼을 완료하신 것을 축하합니다 🎉. 다른 동영상을 완료하여 기술을 계속 개발하세요. 다음 튜토리얼을 확인하세요.

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

계속 탐색하기

이 Chrome 확장 프로그램을 즐겁게 빌드하셨기를 바라며, 계속해서 Chrome을 살펴봤습니다 다음 학습 과정을 따르는 것이 좋습니다.

  • 개발자 가이드에는 문서로 연결되는 수십 개의 추가 링크가 있습니다. 고급 확장 프로그램 생성과 관련이 있습니다.
  • 확장 프로그램은 오픈 웹에서 제공하는 것 이상의 강력한 API에 액세스할 수 있습니다. Chrome API 문서에서는 각 API를 자세히 안내합니다.