확장 프로그램 툴바 아이콘을 클릭하여 현재 페이지의 스타일을 단순화합니다.
개요
이 튜토리얼에서는 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() 이벤트와 동일한 코드를 실행하므로
필요합니다
작동 테스트
프로젝트의 파일 구조가 다음과 같은지 확인합니다.
로컬에서 확장 프로그램 로드
개발자 모드에서 압축해제된 확장 프로그램을 로드하려면 Hello World의 단계를 따르세요.
문서 페이지에서 확장 프로그램 테스트
먼저 다음 페이지 중 하나를 엽니다.
그런 다음 확장 프로그램 작업을 클릭합니다. 단축키를 설정한 경우 Ctrl + B 또는 Cmd + B를 눌러 테스트할 수 있습니다.
다음과 같은 형태여야 합니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">위의 예시를 다음과 같이 업데이트합니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">🎊 개선 가능성
오늘 학습한 내용을 기반으로 다음 중 하나를 수행해 보세요.
- CSS 스타일 시트를 개선합니다.
- 다른 단축키를 지정합니다.
- 즐겨찾는 블로그 또는 문서 사이트의 레이아웃을 변경하세요.
계속 커뮤니티를 키워나가세요.
이 튜토리얼을 완료하신 것을 축하합니다 🎉. 계속해서 다른 스킬을 완료해 스킬을 레벨업하세요 다음 튜토리얼을 확인하세요.
| 확장 | 학습할 내용 |
|---|---|
| 읽기 시간 | 특정 페이지 집합에 요소를 자동으로 삽입하려는 경우 |
| 탭 관리자 | 브라우저 탭을 관리하는 팝업을 만들기 위해 |
계속 탐색하기
이 Chrome 확장 프로그램을 즐겁게 빌드하셨기를 바라며 계속해서 확장 프로그램을 이용하실 수 있습니다. 살펴봤습니다 다음 학습 과정을 추천해 드립니다.
- 개발자 가이드에는 문서로 연결되는 수십 개의 추가 링크가 있습니다. 고급 확장 프로그램 생성과 관련이 있습니다.
- 확장 프로그램은 오픈 웹에서 제공하는 것 이상의 강력한 API에 액세스할 수 있습니다. Chrome API 문서에서는 각 API를 자세히 안내합니다.