Chrome 확장을 위한 기본 사항 작성

이 블로그에서 우리는 크롬 확장을 만드는 기초 지식을 배울 것이다.이 과정에서, 우리는 매우 기본적인 크롬 확장 프로그램인 단어 강화 프로그램을 만들 것이다.이 확장에서 우리는 단어'레인보우'를 강화하고 단어 뒤에 무지개 아이콘을 놓고 텍스트에 기본 애니메이션을 놓을 것이다.
우리 시작합시다!

요구 사항

Chrome 확장을 작성하려면 작업공간 설정이 간단합니다.텍스트 편집기 (예: VS 코드, 승화 텍스트 등) 와 브라우저 (구글 브라우저 사용) 가 두 가지만 필요합니다.

1. 목록 파일 만들기

크롬 파일의 확장자는 크롬 파일의 가장 중요한 확장자 중 하나입니다.그것은 확장자, 설명, 아이콘, 버전 및 기타 중요한 세부 사항을 정의했다.
따라서 크롬 확장자마다 목록이 포함되어 있습니다.json 파일.
다음은 명세서입니다.Google word Enhanced 응용 프로그램의 json 파일:

{
    "manifest_version": 2,
    "name": "Rainbow Glory",
    "version": "0.1.0",
    "description": "This extension glorifies the word 'Rainbow'",
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["script.js"],
            "css": ["styles.css"] 
        }
    ],
    "icons": {
        "128": "images/rainbow128.png",
        "48": "images/rainbow48.png" 
    },
    "browser_action": {
        "default_icon": "images/rainbow48.png"
    }
}

위의 코드에서 몇 가지를 정의했다.그 중 하나를 자세히 살펴보자.
a) manifest version: 패키지에 필요한 목록 파일의 버전을 정의합니다.현재 최신 버전은 '3' 이지만, 이 예에서 우리는 '2' 버전을 사용할 것이다.
b) 이름: Chrome 확장자입니다.
c) 버전: 현재 개발 중인 크롬 확장 버전입니다.
d) 설명: Chrome 확장에 대한 가시적인 텍스트입니다.
e) 컨텐트 스크립트: 웹 페이지 컨텍스트에서 실행되는 파일입니다.이것은 그들이 웹 페이지의 세부 사항을 읽고 변경할 수 있다는 것을 의미한다.
f) 아이콘: 이 아이콘은 응용 프로그램을 나타냅니다.128x128 아이콘은 설치 과정에서 사용되며 크롬 네트워크 상점에서 볼 수 있고 48x48 아이콘은 확장 관리 페이지에서 볼 수 있다.chrome://extensions).
g) 브라우저 작업: 구글 브라우저 도구 모음에 아이콘을 배치하는 데 사용됩니다.도구 설명, 배지 및 팝업 창을 배치할 수도 있습니다.

2. 코드 논리

우리 선적 명세서json 파일이 생성되었습니다. 코드 논리를 구축하기 시작합니다.우리는 스크립트를 정의했다.js는 '목록' 의 '내용' 스크립트의 'js' 파일입니다.json'.따라서, 우리는 DOM 조작을 실행하는 코드를 여기에 놓을 것이다.
우리는'무지개'라는 단어의 하나하나를 강화하고 일부 애니메이션에 무지개 아이콘을 넣고 싶다.이를 위해서는 먼저'무지개'라는 단어의 하나하나를 식별해야 한다.
DOM에서 n번째child에 도달하기 위해 귀속 함수를 실행하고, 대소문자를 구분하지 않고 regex로 단어를 검색하는 모드를 사용합니다.그 다음에 우리는 상응하는 단어로 새로운 요소를 만들고 무지개 아이콘을 놓을 것이다(🌈) 그 다음에 이 요소에 애니메이션을 적용할 수 있도록 클래스를 줍니다.전체 함수는 웹 페이지를 불러올 때 호출됩니다.
다음은 '스크립트' 코드입니다.js 파일:

replaceText(document.body);

function replaceText(element) {
    if (element.hasChildNodes()) {
        element.childNodes.forEach(replaceText);
    } else if (element.nodeType === Text.TEXT_NODE) {
        if (element.textContent.match(/rainbow/gi)){
            const newElement = document.createElement('span')
            newElement.innerHTML = element.textContent.replace(/(rainbow)/gi, '<span class="rainbow">$1 🌈</span>')
            element.replaceWith(newElement);
        }
    }
}

replaceText는 DOM을 사용하여 n번째 하위 항목을 검색한 다음 정규 표현식으로'Rainbow'라는 단어의 매번 출현을 검색하는 귀속 함수이다.일치하는 항목을 찾을 때마다 새 요소를 만들고, '레인보우' 클래스의 요소로 이 단어를 바꿉니다.

3. CSS(애니메이션용)

바뀐 요소에 애니메이션을 적용할 css를 추가할 때가 되었습니다.
우리는 800밀리초의 애니메이션 순환을 추가할 것입니다. 이 순환은 무한히 실행될 것입니다. 관건 프레임에서 순환의 매번 교체 기간에 텍스트 색을 무지개의 모든 색으로 변경할 것입니다.
다음은 스타일의 코드입니다.css 파일:

.rainbow {
    animation: rainbow 800ms;
    animation-iteration-count: infinite;
}

@keyframes rainbow {
    0% {
        color: red;
    }

    15% {
        color: orange;
    }
    30% {
        color: yellow;
    }
    45% {
        color: green;
    }
    60% {
        color: blue;
    }
    75% {
        color : indigo;
    }
    90% {
        color: purple;
    }
}

4. 디렉토리 트리

전체 프로젝트 디렉터리는 다음과 같은 파일로 구성되어 있습니다: manifest.json, 스크립트.스타일css, 무지개가 있는 이미지 폴더 48.파푸아뉴기니와 무지개 128.파푸아뉴기니.
다음은 현재 최종 디렉토리 트리입니다.

코드에 문제가 있으면 여기repository로 이동하십시오.

5. 확장 사용

크롬 확장을 사용하려면 크롬 웹 스토어에서 확장을 호스팅하거나 확장 관리 페이지에서 로컬로 확장을 업로드할 수 있습니다(chrome://extensions).
디플렉터를 호스팅하려면 Chrome Web Store Developer Dashboard
로컬에서 확장을 업로드하려면 다음 단계를 수행합니다.
a) 확장 관리 페이지로 이동(chrome://extensions).

b) 페이지에서 개발자 모드를 활성화합니다.이것은 Chrome 확장 개발자에게 추가 옵션을 제공합니다.
개발자 모드:

개발자 옵션:

c) 위에서 언급한 개발자 옵션에서 LoadUnpacket 버튼을 클릭합니다.만든 항목 폴더로 이동하여 선택합니다.확장은 확장 관리 페이지에 추가됩니다(chrome://extensions).

현재, 당신은 그것을 사용하고 단어 "Rainbow" 가 있는 웹 페이지에 들어가서, 이 아름다운 확장을 누릴 수 있습니다.
고급 개념은 공식 웹 사이트Chrome Extensions Developer Documentation를 참조하십시오.
이것이 바로 크롬 확장을 만드는 기본 안내서의 끝입니다.더 많은 탐색의 즐거움을 누리다.