크롬 익스텐션 튜토리얼 (3) Focus Mode

목표 : 현재 페이지의 CSS를 수정하여 집중모드 만들기

 

 

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

 

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

1.  manifest.json

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable reading mode on Chrome's official Extensions and Chrome Web Store documentation.",
  "version": "1.0",
  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  "permissions": ["scripting", "activeTab"],
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+U",
        "mac": "Command+U"
      }
    }
  }
}

background

• service_worker : 익스텐션이 브라우저의 이벤트를 리스닝하기 위해서는 service_worker를 사용하면 된다.

 

permissions : 익스텐션이 특정 정보에 접근해야 할 때 미리 사용자 및 브라우저에게 사용 허용을 받기 위함. 

• activeTab : 현재 활성화된 탭에 대한 접근 권한을 얻는다.
  • scripting.insertCSS 사용가능
  •  tabs.Tab 객체를 통해 URL, 타이틀, 파비콘에 접근가능
• scripting : 스타일시트에 대한 삽입/삭제 권한을 얻는다.

 

commands 

• _execute_action
  • suggested_key
    • default : shortcut (바로가기 조합키) 지정 
    • mac : 맥 OS에서 shortcut 지정

 

2. background.js

// extension이 설치되면 badge 초기값 설정
// badge는 favicon에 간단한 정보를 표시함
// 참조 : https://developer.chrome.com/docs/extensions/reference/action/#badge
chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

const extensions = 'https://developer.chrome.com/docs/extensions'
const webstore = 'https://developer.chrome.com/docs/webstore'

// 유저가 익스텐션을 클릭 시
chrome.action.onClicked.addListener(async (tab) => {
  if (tab.url.startsWith(extensions) || tab.url.startsWith(webstore)) {
    // 현재 탭의 badge 텍스트를 가져옴
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // badge 텍스트를 반대로 변경.
    const nextState = prevState === 'ON' ? 'OFF' : 'ON'

    // 바꾼 badge 텍스트를 현재 tab에 적용
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });

    if (nextState === "ON") {
      // 현재 페이지에 focus-mode.css를 삽입함.
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // 현재 페이지에 focus-mode.css를 삭제함
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

현재 탭의 badge 상태 (on,off) 에 따라 focus-mode.css를 삽입/삭제 하는 코드

background.js는 익스텐션이 브라우저의 이벤트를 listen하기 위해 service worker로 실행된다.

TIP : chrome.action.onClicked.addListener(익스텐션 클릭)과 manifest.json의 action.default_popup을 둘 다 사용한다면 manifest.json의 default_popup이 우선되며 chrome.action.onClicked.addListener는 작동하지 않음.

 

3. focus-mode.css

body > .scaffold > :is(top-nav, navigation-rail, side-nav, footer),
main > :not(:last-child),
main > :last-child > navigation-tree,
main .toc-container {
  display: none;
}

main > :last-child {
  margin-top: min(10vmax, 10rem);
  margin-bottom: min(10vmax, 10rem);
}

main > :last-child만 남겨두고 숨김처리(display: none)하는 CSS 

 

background.js 디버깅 방법

 

 

참조 : https://developer.chrome.com/docs/extensions/mv3/getstarted/tut-focus-mode/