활성 탭에 스크립트 삽입

확장 프로그램 툴바 아이콘을 클릭하여 현재 페이지의 스타일을 단순화합니다.

개요

이 튜토리얼에서는 Chrome 확장 프로그램 및 Chrome 웹 앱의 스타일을 단순화하는 확장 프로그램을 Chrome 웹 스토어 문서 페이지를 개편했습니다.

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

  • 확장 프로그램 서비스 워커를 이벤트 코디네이터로 사용합니다.
  • "activeTab" 권한을 통해 사용자 개인 정보 보호
  • 사용자가 확장 프로그램 툴바 아이콘을 클릭하면 코드를 실행합니다.
  • Scripting API를 사용하여 스타일 시트를 삽입 및 제거합니다.
  • 단축키를 사용하여 코드를 실행합니다.

시작하기 전에

이 가이드에서는 기본적인 웹 개발 경험이 있다고 가정합니다. 먼저 Hello World: 확장 프로그램 개발 워크플로 소개

확장 프로그램 빌드

시작하려면 확장 프로그램의 파일을 저장할 focus-mode이라는 새 디렉터리를 만듭니다. 만약 GitHub에서 전체 소스 코드를 다운로드할 수 있습니다.

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

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

{
  "manifest_version": 3,
  "name": "Focus Mode",
  "description": "Enable focus 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"
  }
}

이러한 매니페스트 키에 대해 자세히 알아보려면 '모든 탭에서 스크립트 실행'을 확인하세요. 이 튜토리얼에서 확장 프로그램의 메타데이터아이콘을 자세히 설명합니다.

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

2단계: 확장 프로그램 초기화

확장 프로그램은 확장 프로그램의 서비스를 사용하여 백그라운드에서 브라우저 이벤트를 모니터링할 수 있습니다. worker와 같은 메서드를 지원합니다. 서비스 워커는 작업을 처리하는 특수 JavaScript 환경으로 이벤트가 종료되고 필요하지 않을 때 종료됩니다.

먼저 manifest.json 파일에 서비스 워커를 등록합니다.

{
  ...
  "background": {
    "service_worker": "background.js"
  },
  ...
}

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

chrome.runtime.onInstalled.addListener(() => {
  chrome.action.setBadgeText({
    text: "OFF",
  });
});

서비스 워커가 수신하는 첫 번째 이벤트는 runtime.onInstalled() 이 메서드를 사용하면 확장 프로그램이 설치 시 일부 작업을 완료할 수 있습니다. 확장 프로그램은 Storage API 및 애플리케이션 상태를 저장하는 IndexedDB. 하지만 이 경우에는 두 가지 상태만 처리하고 있으므로 작업 배지 텍스트 자체를 사용하여 확장 프로그램이 '사용' 상태인지 여부를 추적합니다. 또는 'OFF'.

3단계: 확장 프로그램 작업 사용 설정

확장 프로그램 작업은 확장 프로그램의 툴바 아이콘을 제어합니다. 따라서 사용자가 확장 프로그램 아이콘을 클릭하면 이 예시와 같은 코드를 실행하거나 팝업을 표시합니다. 다음 코드를 사용하여 manifest.json 파일에서 확장 프로그램 작업을 선언합니다.

{
  ...
  "action": {
    "default_icon": {
      "16": "images/icon-16.png",
      "32": "images/icon-32.png",
      "48": "images/icon-48.png",
      "128": "images/icon-128.png"
    }
  },
  ...
}

ActiveTab 권한을 사용하여 사용자 개인 정보 보호

activeTab 권한은 확장 프로그램에 코드를 일시적으로 실행할 수 있는 권한을 부여합니다. 표시됩니다. 또한 Google Cloud 프로젝트의 민감한 속성에 현재 탭으로 이동합니다

이 권한은 사용자가 확장 프로그램을 호출할 때 사용 설정됩니다. 이 경우 사용자가 확장 프로그램을 추가할 수 있습니다.

💡 내 확장 프로그램에서 ActiveTab 권한을 사용 설정하는 다른 사용자 상호작용은 무엇인가요?

  • 단축키 조합 누르기
  • 컨텍스트 메뉴 항목 선택
  • 검색주소창에서 추천 검색어 수락
  • 확장 프로그램 팝업 열기

"activeTab" 권한을 사용하면 사용자가 고의로 다음 컴퓨터에서 확장 프로그램을 실행하도록 선택할 수 있습니다. 포커스가 설정된 탭 사용자의 개인 정보를 보호합니다. 또 다른 이점은 권한 경고를 트리거합니다.

"activeTab" 권한을 사용하려면 매니페스트의 권한 배열에 추가합니다.

{
  ...
  "permissions": ["activeTab"],
  ...
}

4단계: 현재 탭의 상태 추적하기

사용자가 확장 프로그램 작업을 클릭하면 확장 프로그램에서 URL이 문서 페이지를 참조하세요. 다음으로 현재 탭의 상태를 확인하고 다음 상태를 설정합니다. background.js에 다음 코드를 추가합니다.

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)) {
    // Retrieve the action badge to check if the extension is 'ON' or 'OFF'
    const prevState = await chrome.action.getBadgeText({ tabId: tab.id });
    // Next state will always be the opposite
    const nextState = prevState === 'ON' ? 'OFF' : 'ON';

    // Set the action badge to the next state
    await chrome.action.setBadgeText({
      tabId: tab.id,
      text: nextState,
    });
  }
});

5단계: 스타일 시트 추가 또는 삭제

이제 페이지의 레이아웃을 변경해 보겠습니다. focus-mode.css라는 파일을 만들고 다음을 포함합니다. 다음 코드를 참조하세요.

* {
  display: none !important;
}

html,
body,
*:has(article),
article,
article * {
  display: revert !important;
}

[role='navigation'] {
  display: none !important;
}

article {
  margin: auto;
  max-width: 700px;
}

Scripting API를 사용하여 스타일 시트를 삽입하거나 삭제합니다. 시작 시간 매니페스트에서 "scripting" 권한을 선언합니다.

{
  ...
  "permissions": ["activeTab", "scripting"],
  ...
}
드림

마지막으로 background.js에 다음 코드를 추가하여 페이지의 레이아웃을 변경합니다.

  ...
    if (nextState === "ON") {
      // Insert the CSS file when the user turns the extension on
      await chrome.scripting.insertCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    } else if (nextState === "OFF") {
      // Remove the CSS file when the user turns the extension off
      await chrome.scripting.removeCSS({
        files: ["focus-mode.css"],
        target: { tabId: tab.id },
      });
    }
  }
});

💡 스타일 시트 대신 Scripting API를 사용해 코드를 삽입할 수 있나요?

예. scripting.executeScript()를 사용하여 JavaScript를 삽입할 수 있습니다.

선택사항: 단축키 할당하기

재미로 집중 모드를 손쉽게 사용 설정 또는 중지할 수 있는 단축키를 추가해 보세요. "commands" 키를 추가합니다.

{
  ...
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+B",
        "mac": "Command+B"
      }
    }
  }
}

"_execute_action" 키는 action.onClicked() 이벤트와 동일한 코드를 실행하므로 필요합니다

작동 테스트

프로젝트의 파일 구조가 다음과 같은지 확인합니다.

포커스 모드 폴더의 콘텐츠: manifest.json, background.js, focus-mode.css, 이미지 폴더

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

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

문서 페이지에서 확장 프로그램 테스트

먼저 다음 페이지 중 하나를 엽니다.

그런 다음 확장 프로그램 작업을 클릭합니다. 단축키를 설정한 경우 Ctrl + B 또는 Cmd + B를 눌러 테스트할 수 있습니다.

다음과 같은 형태여야 합니다.

<ph type="x-smartling-placeholder">
</ph> 집중 모드 확장 프로그램 사용 안함 <ph type="x-smartling-placeholder">
</ph> 집중 모드 확장 프로그램 사용 안함

위의 예시를 다음과 같이 업데이트합니다.

<ph type="x-smartling-placeholder">
</ph> 집중 모드 확장 프로그램 사용 <ph type="x-smartling-placeholder">
</ph> 집중 모드 확장 프로그램 사용

🎊 개선 가능성

오늘 학습한 내용을 기반으로 다음 중 하나를 수행해 보세요.

  • CSS 스타일 시트를 개선합니다.
  • 다른 단축키를 지정합니다.
  • 즐겨찾는 블로그 또는 문서 사이트의 레이아웃을 변경하세요.

계속 커뮤니티를 키워나가세요.

이 튜토리얼을 완료하신 것을 축하합니다 🎉. 계속해서 다른 스킬을 완료해 스킬을 레벨업하세요 다음 튜토리얼을 확인하세요.

확장 학습할 내용
읽기 시간 특정 페이지 집합에 요소를 자동으로 삽입하려는 경우
탭 관리자 브라우저 탭을 관리하는 팝업을 만들기 위해

계속 탐색하기

이 Chrome 확장 프로그램을 즐겁게 빌드하셨기를 바라며 계속해서 확장 프로그램을 이용하실 수 있습니다. 살펴봤습니다 다음 학습 과정을 추천해 드립니다.

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