2.2 크롬 익스텐션 만들어 보기 Part I - 웹 페이지 삽입 스크립트

 

이전 포스팅에서 브라우저 익스텐션(크롬 기준)의 기본적인 구성 파일들을 살펴보고 간단한 익스텐션도 만들어 보았다. 그리고 코딩한 익스텐션을 웹 브라우저에 설치하는 방법도 살펴보았다.

2024.01.30 - [웹 프로그래밍 고급 주제들] - 2.1 크롬 익스텐션 만들어 보기 Part I - Hello, extension!

2.1 크롬 익스텐션 만들어 보기 Part I - Hello, extension!

 

브라우저 익스텐션은 크게 4가지 요소들로 구성된다.

 

- 익스텐션 UI: 익스텐션의 UI 스크립트.

- 페이지 삽입 스크립트: 웹 페이지에 삽입되어 동작하는 부분.

- 서비스 워커: 익스텐션 UI와 페이지 삽입 스크립트 사이를 연결하거나 외부 서버에 데이터를 요청하는 부분.

- manifest 파일: 익스텐션의 구성요소들과 필요한 권한을 기술한 JSON 파일.

 

각 요소들의 자세한 역할은 이전 포스팅 2.1. 크롬 익스텐션 만들어보기 PartI - Hello, extension!에 설명했으므로 해당 포스팅 참고를 부탁드린다.

 

이전 포스팅의 Hello, extension 예제에서는 위의 구성 요소들 중 익스텐션 UI와 manifest 파일 두 요소를 사용한다. 이번 포스팅에서 살펴볼 reading time 예제(구글에서 제공하는 익스텐션 예제)를 통해 페이지 삽입 스크립트 작성 방법과 동작에 대해 살펴보도록 하겠다. 이번 포스팅의 목적은 아래와 같다.

 

· 페이지 삽입 스크립트(content 스크립트) 작성 방법
· 페이지 삽입 스크립트의 동작

 

참고로 reading time 예제는 웹 페이지의 읽는 시간을 기준으로 양이 얼마나 되는지 알려주는 익스텐션이다.

 

---

 

페이지 삽입 스크립트는 자바스크립트로 작성된다. 그리고 웹 브라우저는 manifest 파일의 내용을 참고하여 이 스크립트를 타겟 페이지에서 실행시킨다. 익스텐션의 페이지 삽입 스크립트는 타겟 페이지의 HTML 요소들과 상호작용할 수 있으므로 기능 측면에서는 타겟 페이지의 일부가 되는 것이라고 볼 수 있다.

 

새 익스텐션 코딩을 위해 익스텐션의 코드들을 저장할 디렉토리를 만들고, 먼저 익스텐션의 전체 모습을 기술한 manifest 파일을 아래와 같이 작성하자. 디렉토리 이름을 reading_time으로 그리고 에디터로 VS Code를 사용하였다.

{
    "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/*"
            ]
        }
    ]
}

<reading_time/manifest.json>

 

 

mainfest 파일의 각 항목들을 정리해보면 아래와 같다.

항목	내용	필수 여부
manifest_version	manifest 파일의 버전을 표시한다. 현재 사용되는 manifest 버전은 3이다.	Y
name	익스텐션의 이름	Y
version	익스텐션의 버전. 웹 스토어를 통해 배포한다면 배포할 때 마다 버전이 올라가야한다. 따라서 처음부터 너무 큰 숫자로 시작하지 않는 것을 추천한다. 0.0 이상의 숫자를 사용하면 된다.	Y
description	익스텐션 설명. 브라우저 익스텐션 관리자 화면에 표시된다.	N
icons	익스텐션의 아이콘들. 기기의 화면 크기에 대응하기 위해 여러 해상도의 이미지를 사용하는 것을 추천한다.	Y
content_scripts	타겟 페이지에 삽입되는 스크립트와 어떤 페이지들을 타겟으로 삼을지 기술한다.	Y (삽입 스크립트 있을 때)

 

manifest 파일의 content_scripts 항목의 내용을 보면 "js" 부분에 삽입될 스크립트가 지정되고, "matches" 부분에는 해당 스크립트가 실행될 웹 주소(URL)가 지정된다.

 

다음으로 익스텐션의 아이콘들을 제작하거나 공개적으로 사용 가능한 아이콘들을 다운로드받는다. 이번 예제에서는 아래 위치에서 구글에서 예제를 위해 제공하는 아이콘들을 다운로드 받아 사용하였다.

https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples/tutorial.reading-time/images

 

아이콘 파일이 여러개이므로 익스텐션 디렉토리 안에 images라는 이름으로 디렉토리를 하나 더 만들고 그 안에 저장하는 것을 추천한다.

 

마지막으로 익스텐션 디렉토리 안에 scripts라는 이름으로 디렉토리를 하나 만들고 그 안에 삽입 스크립트(보통 content 스크립트라고 부른다)를 자바스크립트를 이용하여 아래와 같이 작성한다.

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

if (article) {
    const text = article.textContent;
    const wordMatchRegExp = /[^\s]+/g;  //  words which do not starts with space characters
    const words = text.matchAll(wordMatchRegExp);   //  collect words
    const wordCount = [...words].length;
    const readingTime = Math.round(wordCount/200);  //  assume reading 200 words per minute
    const badge = document.createElement("p");
    badge.classList.add("color-secondary-text", "type--caption");
    badge.textContent = `이 글은 ⏱ ${readingTime} 분 정도면 읽을 수 있는 분량입니다.`;

    const heading = article.querySelector("h1");
    const date = article.querySelector("time")?.parentNode;     //  HTML 문서의 <time> 요소가 있다면 그 부모 요소를 얻는다.

    (date ?? heading).insertAdjacentElement("afterend", badge); //  if date is null, use heading as default
}

<scripts/content.js>

 

content 스크립트의 내용을 살펴보면 먼저 타겟 페이지에서 <article> 엘리먼트를 찾은 후, 이 <article> 엘리먼트의 내용의 글자 수를 센  다음, 분 당 몇 글자씩 읽는지 어림하여 페이지를 읽는데 필요한 예상 시간(readingTime 변수)을 계산하고 있다. 그리고 이 계산값을 내용으로 하는 문단 엘리먼트 <p> 를 만들고(bage 변수) 이를 페이지의 제목 요소(<h1>) 아래에 삽입한다.

 

익스텐션을 구성하는 파일들을 정리해 보면 아래와 같다. images 디렉토리(폴더) 안에는 익스텐션의 아이콘들이 들어있고(여러 기기의 해상도에 대응하기 위해 16x16 픽셀, 32x32 픽셀,  48x48 픽셀,  128x128 픽셀의 이미지들이 들어있다), 웹 페이지에 삽입되어 동작하는 content.js 스크립트, 그리고 익스텐션의 전체적인 설정을 기술한 manifest.json 파일들로 구성되어 있다.

익스텐션 구성 파일들

 

익스텐션을 웹 브라우저에 설치하고 크롬 익스텐션 문서 페이지(예, https://developer.chrome.com/docs/extensions/get-started/tutorial/scripts-on-every-tab)를 방문하면 익스텐션이 실행된다.

웹 브라우저에 익스텐션을 설치하는 방법(크롬 브라우저 기준)은 이전 포스팅에서 살펴보았다. 간단히 정리해 보면 아래와 같다.

 

브라우저 메뉴 버튼(크롬 기준 1시 방향에 3개 점으로 표시) > 확장 프로그램 > 확장 프로그램 관리 > 개발자 모드 활성화 > 압축 해제된 확장 프로그램을 로드합니다 선택 > 작성한 익스텐션 폴더 선택

작성한 익스텐션 설치

 

 

실행 결과를 살펴보면 아래와 같다.

reading time 익스텐션 - content.js 스크립트 실행 결과

 

---

 

이번 포스팅의 내용을 정리해보면 아래와 같다.

 

· 웹 페이지 삽입 스크립트(content 스크립트) 작성 방법

· content 스크립트의 동작: 웹 페이지에 삽입되어 마치 하나의 페이지 처럼 동작한다.

· content 스크립트가 있는 경우 manifest 파일 기술 방법

 

이어지는 포스팅에서는 브라우저 익스텐션의 구성요소 중 백그라운드 스크립트에 대해 예제를 작성하면서 살펴보도록 하겠다.

 

■