페이지에 새 요소를 삽입하는 첫 번째 확장 프로그램을 만듭니다.
개요
이 가이드에서는 모든 Chrome 확장 프로그램에 예상 읽기 시간을 추가하는 확장 프로그램을 빌드하고 Chrome 웹 스토어 문서 페이지
<ph type="x-smartling-placeholder">![확장 프로그램의 시작 페이지의 읽기 시간 확장](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/reading-extension-the-e-0070620f12665.png?authuser=19&hl=ko)
이 가이드에서는 다음 개념을 설명합니다.
- 확장 프로그램 매니페스트
- 확장 프로그램에서 사용하는 아이콘 크기
- 콘텐츠 스크립트를 사용하여 페이지에 코드를 삽입하는 방법
- 일치 패턴 사용 방법
- 확장 프로그램 권한
시작하기 전에
이 가이드에서는 기본적인 웹 개발 경험이 있다고 가정합니다. 자세한 내용은 Hello world 튜토리얼: 확장 프로그램 개발 워크플로 소개
확장 프로그램 빌드
시작하려면 확장 프로그램의 파일을 보관할 reading-time
이라는 새 디렉터리를 만듭니다. 만약
GitHub에서 전체 소스 코드를 다운로드할 수 있습니다.
1단계: 확장 프로그램에 대한 정보 추가
매니페스트 JSON 파일이 유일한 필수 파일입니다. 여기에는 시스템에 대한
확장자가 포함됩니다. 프로젝트의 루트에 manifest.json
파일을 만들고 다음 코드를 추가합니다.
{
"manifest_version": 3,
"name": "Reading time",
"version": "1.0",
"description": "Add the reading time to Chrome Extension documentation articles"
}
이러한 키에는 확장 프로그램의 기본 메타데이터가 포함됩니다. 확장 프로그램이 확장 프로그램 페이지 및 Chrome 웹 스토어에 게시될 때 표시되는 방식을 관리합니다. 자세한 내용은
"name"
, "version"
, "description"
키
매니페스트 개요 페이지
💡 확장 프로그램 매니페스트에 관한 기타 사실
- 이 파일은 프로젝트의 루트에 있어야 합니다.
- 필요한 키는
"manifest_version"
,"name"
,"version"
뿐입니다. - 개발 중에는 주석 (
//
)을 지원하지만 Chrome 웹 스토어에 코드를 업로드하기 전에 댓글을 삭제해야 합니다.
2단계: 아이콘 제공
그렇다면 아이콘이 필요한 이유는 무엇일까요? 아이콘은 개발 중에는 선택사항이지만 해야 합니다. 이 동영상은 확장 프로그램 관리 페이지 등 여러 위치에서 추가할 수 있습니다
images
폴더를 만들고 그 안에 아이콘을 배치합니다. Google Cloud 콘솔에서 아이콘을
GitHub 다음으로, 매니페스트에 강조표시된 코드를 추가하여 아이콘을 선언합니다.
{
"icons": {
"16": "images/icon-16.png",
"32": "images/icon-32.png",
"48": "images/icon-48.png",
"128": "images/icon-128.png"
}
}
PNG 파일을 사용하는 것이 좋지만 SVG 파일을 제외한 다른 파일 형식은 허용됩니다.
💡 크기가 다른 아이콘은 어디에 표시되나요?
아이콘 크기 | 아이콘 사용 |
---|---|
16x16 | 확장 프로그램 페이지 및 컨텍스트 메뉴의 파비콘 |
32x32 | Windows 컴퓨터에는 이 크기가 필요한 경우가 많습니다. |
48x48 | 확장 프로그램 페이지에 표시됩니다. |
128x128 | 설치 시 및 Chrome 웹 스토어에 표시됩니다. |
3단계: 콘텐츠 스크립트 선언
확장 프로그램은 페이지의 콘텐츠를 읽고 수정하는 스크립트를 실행할 수 있습니다. 이를 콘텐츠라고 함 스크립트와 동일합니다. 고립된 환경에 거주합니다. 즉, 호스트 페이지나 다른 확장 프로그램과 충돌하지 않고 JavaScript 환경을 변경할 수 있습니다. 있습니다.
다음 코드를 manifest.json
에 추가하여 콘텐츠 스크립트를 등록합니다.
content.js
입니다.
{
"content_scripts": [
{
"js": ["scripts/content.js"],
"matches": [
"https://developer.chrome.com/docs/extensions/*",
"https://developer.chrome.com/docs/webstore/*"
]
}
]
}
"matches"
필드에는 하나 이상의 일치 패턴이 있을 수 있습니다. 이를 통해 브라우저에서
콘텐츠 스크립트를 삽입할 사이트를 식별합니다. 일치 패턴은 다음 세 부분으로 구성됩니다.
<scheme>://<host><path>
'*
'을(를) 포함할 수 있습니다. 있습니다.
💡 이 확장 프로그램에 권한 경고가 표시되나요?
사용자가 확장 프로그램을 설치하면 브라우저에서 확장 프로그램으로 무엇을 할 수 있는지 알려줍니다. 콘텐츠 스크립트는 일치 패턴 기준을 충족하는 사이트에서 실행할 수 있는 권한을 요청합니다.
이 예에서는 사용자에게 다음과 같은 권한 경고가 표시됩니다.
<ph type="x-smartling-placeholder">![읽기 시간 확장 프로그램을 설치할 때 사용자에게 표시되는 권한 경고](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/permission-warning-user-af0cb023a0128.png?authuser=19&hl=ko)
확장 프로그램 권한에 관해 자세히 알아보려면 권한 선언 및 사용자에게 경고하기를 참고하세요.
4단계: 읽기 시간 계산 및 삽입하기
콘텐츠 스크립트에서는 표준 DOM(Document Object Model)(DOM)을 사용하여
지정할 수 있습니다. 확장 프로그램은 먼저 페이지에 <article>
요소가 포함되어 있는지 확인합니다.
그런 다음 이 요소 내의 모든 단어를 계산하고 총합을 표시하는 단락을 만듭니다.
확인할 수 있습니다.
scripts
폴더 안에 content.js
라는 파일을 만들고 다음 코드를 추가합니다.
const article = document.querySelector("article");
// `document.querySelector` may return null if the selector doesn't match anything.
if (article) {
const text = article.textContent;
const wordMatchRegExp = /[^\s]+/g; // Regular expression
const words = text.matchAll(wordMatchRegExp);
// matchAll returns an iterator, convert to array to get word count
const wordCount = [...words].length;
const readingTime = Math.round(wordCount / 200);
const badge = document.createElement("p");
// Use the same styling as the publish information in an article's header
badge.classList.add("color-secondary-text", "type--caption");
badge.textContent = `⏱️ ${readingTime} min read`;
// Support for API reference docs
const heading = article.querySelector("h1");
// Support for article docs with date
const date = article.querySelector("time")?.parentNode;
(date ?? heading).insertAdjacentElement("afterend", badge);
}
💡 이 코드에 사용된 흥미로운 JavaScript
- 일반
표현식을 사용하여
<article>
요소 내의 단어만 계산하는 데 사용합니다. insertAdjacentElement()
: 요소 뒤에 읽기 시간 노드를 삽입하는 데 사용됩니다.- 요소 클래스 속성에 CSS 클래스 이름을 추가하는 데 사용되는 classList 속성입니다.
- 정의되지 않았거나 null일 수 있는 객체 속성에 액세스하는 데 사용되는 선택적 체이닝
- Nullish 병합은
<date>
가 null이거나 정의되지 않은 경우<heading>
를 반환합니다.
작동 테스트
프로젝트의 파일 구조가 다음과 같은지 확인합니다.
로컬에서 확장 프로그램 로드
개발자 모드에서 압축해제된 확장 프로그램을 로드하려면 개발 기본사항을 참고하세요.
확장 프로그램 또는 Chrome 웹 스토어 문서 열기
다음 페이지를 열면 각 기사를 읽는 데 걸리는 시간을 확인할 수 있습니다.
예를 들면 다음과 같습니다.
<ph type="x-smartling-placeholder">![시작 페이지에서 실행되는 읽기 시간](https://developer.chrome.com/static/docs/extensions/get-started/tutorial/scripts-on-every-tab/image/reading-running-the-wel-1d750346edcea.png?authuser=19&hl=ko)
🎊 개선 가능성
오늘 학습한 내용을 바탕으로 다음 중 하나를 구현해 보세요.
- 다른 Chrome 개발자를 지원하기 위해 manifest.json에 다른 일치 패턴을 추가합니다. 페이지(예: Chrome DevTools 또는 Workbox)에서 작동합니다.
- 즐겨찾는 블로그의 읽기 시간을 계산하는 새 콘텐츠 스크립트를 추가하거나 문서 사이트를 참조하세요.
계속 빌드하세요
이 튜토리얼을 완료하신 것을 축하합니다 🎉. 계속해서 다른 전문 지식을 다음 튜토리얼을 확인하세요.
확장 | 학습할 내용 |
---|---|
집중 모드 | 확장 프로그램 작업을 클릭한 후 현재 페이지에서 코드를 실행하려는 경우 |
탭 관리자 | 브라우저 탭을 관리하는 팝업을 만들기 위해 |
계속 탐색하기
이 Chrome 확장 프로그램을 즐겁게 빌드하셨기를 바라며, 계속해서 Chrome을 살펴봤습니다 다음 학습 과정을 따르는 것이 좋습니다.
- 개발자 가이드에는 문서로 연결되는 수십 개의 추가 링크가 있습니다. 고급 확장 프로그램 생성과 관련이 있습니다.
- 확장 프로그램은 오픈 웹에서 제공하는 것 이상의 강력한 API에 액세스할 수 있습니다. Chrome API 문서에서는 각 API를 자세히 안내합니다.