크롬 익스텐션 튜토리얼 (2) reading-time

목표 : 현재 페이지의 컨텐츠를 읽는 데 걸리는 시간 Reading Time 계산하고 알려주기   

 

 

결과물 미리보기

 

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

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

1.  manifest.json

{
  "manifest_version": 3,
  "name": "Reading time",
  "version": "1.0",
  "description": "Add the reading time to Chrome Extension documentation articles",

  "icons": {
    "16": "images/icon-16.png",
    "32": "images/icon-32.png",
    "48": "images/icon-48.png",
    "128": "images/icon-128.png"
  },
  "content_scripts": [
    {
      "js": [
        "scripts/content.js"
      ],
      "matches": [
        "https://developer.chrome.com/docs/extensions/*",
        "https://developer.chrome.com/docs/webstore/*"
      ]
    }
  ]
}

아이콘이 4개 필요한 이유는 다음과 같다.

참조 : https://developer.chrome.com/docs/extensions/mv3/getstarted/tut-reading-time/

• 16x16 : 익스텐션 페이지의 favicon과 컨텍스트 메뉴 아이콘에 들어감
• 32x32 : 윈도우 컴퓨터에서 주로 사용
• 48x48 : 익스텐션 페이지에서 사용됨
• 128x128 : 설치나 크롬 웹 스토어에서 사용됨

 

content_scripts : 익스텐션은 페이지의 컨텐츠를 읽고 수정할 수 있다. 호스트 페이지나 다른 익스텐션과의 충돌 없이 수정이 가능하다. 이를 컨텐츠 스크립트라 한다.

• js : 페이지에 삽입할 js파일의 위치와 파일명을 지정
• matches : 컨텐츠 스크립트가 삽입될 사이트를 지정. 브라우저가 컨텐츠 변경을 미리 식별하기 위함
  • 형식은 <scheme>://<host><path> 
    • * (아스테리스크) 사용 가능

 

 

2. content.js

const article = document.querySelector("article");

// `document.querySelector`는 selector가 매칭이 안될 경우 null을 리턴
if (article) {
  const text = article.textContent;
  // 단어를 추출하는 정규식
  const wordMatchRegExp = /[^\s]+/g;
  const words = text.matchAll(wordMatchRegExp);
  // matchAll 는 iterator를 리턴함. 단어 개수를 얻기 위해 배열로 변경
  const wordCount = [...words].length;
  const readingTime = Math.round(wordCount / 200);
  const badge = document.createElement("p");
  
  // article's header와 동일하게 스타일링
  badge.classList.add("color-secondary-text", "type--caption");
  badge.textContent = `⏱️ ${readingTime} min read`;

  const heading = article.querySelector("h1");
  const date = article.querySelector("time")?.parentNode;

  // date가 있으면 date, 없으면 heading의 다음 element로 badge 삽입
  (date ?? heading).insertAdjacentElement("afterend", badge);
}

단어를 추출하여 200단어당 1분으로 측정하고, element를 만들어서 원하는 위치에 삽입하는 코드

 

디버깅 방법

 

1. 코드를 수정한다.
2. chrome://extensions 에서 새로고침을 누른다.
3. 익스텐션이 적용되는 페이지에서 F12버튼을 누르고 새로고침 한다.

 

 

참조 : https://developer.chrome.com/docs/extensions/mv3/getstarted/tut-reading-time/