크롬 익스텐션 튜토리얼 (4) Tabs Manager

목표 : 탭을 그룹화하기

결과물 미리보기

소스코드 : https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/tutorials/tabs-manager

위 익스텐션 개발에는 총 3개의 파일이 필요하다. (icon,css 제외)

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"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "host_permissions": [
    "https://developer.chrome.com/*"
  ],
  "permissions": [
    "tabGroups"
  ]
}

host_permissions : 지정한 호스트 주소에만 익스텐션이 접근할 권한을 주어 사용자의 개인정보를 보호할 수 있다.

permission

tabGroups : tabGroups API를 이용하여 탭그룹의 이름과 color를 지정 가능함

2. 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>

3. popup.js

//url 배열에 해당하는 tabs가 있는지
const tabs = await chrome.tabs.query({
  url: [
    "https://developer.chrome.com/docs/webstore/*",
    "https://developer.chrome.com/docs/extensions/*",
  ],
});

//tabs를 title에 맞춰 정렬
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();
//tabs를 popup.html li_template의 형식에 맞게 element 생성
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 () => {
    //클릭한 탭으로 포커싱 변경
    await chrome.tabs.update(tab.id, { active: true });
    //클릭한 창으로 포커싱 변경 (창이 다를 수 있음)
    await chrome.windows.update(tab.windowId, { focused: true });
  });

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

const button = document.querySelector("button");
//버튼 클릭 시 tabGroups으로 그룹핑
button.addEventListener("click", async () => {
  const tabIds = tabs.map(({ id }) => id);
  const group = await chrome.tabs.group({ tabIds });
  await chrome.tabGroups.update(group, { title: "DOCS" });
});

popup.html에 그룹화 가능한 url 리스트 뿌려주기 & 버튼 클릭 시 리스트에 대한 탭 그룹핑 진행

발전시킬만한 요소

해당 익스텐션은 developer.chrome.com 에 대해서만 그룹핑을 진행하기에 실 사용하기에 기능이 빈약합니다.

같은 origin을 같는 host에 대해 그룹핑을 자동으로 해줬으면 좋겠다는 생각이 듭니다.

다음 포스팅에서 이를 진행해보도록 하겠습니다.

저작자표시 비영리 변경금지

'Extension 튜토리얼' 카테고리의 다른 글

크롬 익스텐션 튜토리얼 (6) Tabs Manager - 그룹화 해제 기능 (0)	2022.12.31
크롬 익스텐션 튜토리얼 (5) Tabs Manager - hostname별 그룹화 (0)	2022.12.31
크롬 익스텐션 튜토리얼 (3) Focus Mode (0)	2022.12.30
크롬 익스텐션 튜토리얼 (2) reading-time (0)	2022.12.30
크롬 익스텐션 튜토리얼 (1) hello-world (0)	2022.12.30