이 페이지는 Cloud Translation API를 통해 번역되었습니다.

모든 페이지에서 스크립트 실행

페이지에 새 요소를 삽입하는 첫 번째 확장 프로그램을 만듭니다.

개요

이 가이드에서는 모든 Chrome 확장 프로그램에 예상 읽기 시간을 추가하는 확장 프로그램을 빌드하고 Chrome 웹 스토어 문서 페이지

확장 프로그램의 시작 페이지의 읽기 시간 확장 — </ph> 확장 프로그램의 시작 페이지에 있는 읽기 시간 확장

이 가이드에서는 다음 개념을 설명합니다.

확장 프로그램 매니페스트
확장 프로그램에서 사용하는 아이콘 크기
콘텐츠 스크립트를 사용하여 페이지에 코드를 삽입하는 방법
일치 패턴 사용 방법
확장 프로그램 권한

시작하기 전에

이 가이드에서는 기본적인 웹 개발 경험이 있다고 가정합니다. 자세한 내용은 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> 읽기 시간 권한 경고입니다.

확장 프로그램 권한에 관해 자세히 알아보려면 권한 선언 및 사용자에게 경고하기를 참고하세요.

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>를 반환합니다.

작동 테스트

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

읽기 시간 폴더의 콘텐츠: manifest.json, 스크립트 폴더의 content.js, 이미지 폴더

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

개발자 모드에서 압축해제된 확장 프로그램을 로드하려면 개발 기본사항을 참고하세요.

확장 프로그램 또는 Chrome 웹 스토어 문서 열기

다음 페이지를 열면 각 기사를 읽는 데 걸리는 시간을 확인할 수 있습니다.

예를 들면 다음과 같습니다.

시작 페이지에서 실행되는 읽기 시간 — </ph> 읽기 시간 확장 프로그램이 포함된 확장 프로그램 시작 페이지

🎊 개선 가능성

오늘 학습한 내용을 바탕으로 다음 중 하나를 구현해 보세요.

다른 Chrome 개발자를 지원하기 위해 manifest.json에 다른 일치 패턴을 추가합니다. 페이지(예: Chrome DevTools 또는 Workbox)에서 작동합니다.
즐겨찾는 블로그의 읽기 시간을 계산하는 새 콘텐츠 스크립트를 추가하거나 문서 사이트를 참조하세요.

를 통해 개인정보처리방침을 정의할 수 있습니다.

계속 빌드하세요

이 튜토리얼을 완료하신 것을 축하합니다 🎉. 계속해서 다른 전문 지식을 다음 튜토리얼을 확인하세요.

확장	학습할 내용
집중 모드	확장 프로그램 작업을 클릭한 후 현재 페이지에서 코드를 실행하려는 경우
탭 관리자	브라우저 탭을 관리하는 팝업을 만들기 위해

계속 탐색하기

이 Chrome 확장 프로그램을 즐겁게 빌드하셨기를 바라며, 계속해서 Chrome을 살펴봤습니다 다음 학습 과정을 따르는 것이 좋습니다.

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