design

간단한 Chrome 확장 프로그램 만들기(1)

조회 9 (작성일 2021.02.19 21:56)
- 음성
- 목록

최근에 저는 크롬 확장에 대해 배우기로 결정했고 문서를 읽고 몇 가지 샘플 확장을 빌드 한 후 매우 간단한 확장이 얼마나 빨리 빌드 되고 얼마나 재미 있는지 보고 놀랐습니다. 더 빨리 시도 했더라면 좋았을 텐데요.

이 기사에서는 단계별로 간단한 확장을 만드는 방법을 설명합니다.

확장 정보

이 기사에서 구축 할 확장은 제가 생각해 낸 간단한 예일뿐입니다 (내 개 Acho 🐶에서 영감을 얻음). 우리는 Acho에게 "우리는 어디에 있습니까?"라고 물을 것입니다. 브라우저 툴바의 확장 버튼을 클릭하면 Acho가 현재 탭에 로드 된 페이지의 이름을 알려줍니다.

다음은 작동하는 확장의 gif입니다.

A gif that demonstrates how the extension works. When you click on the icon a picture of a dog appears along with the title of the active tab

코딩하자!

1. 매니페스트 만들기

manifest.json 파일은 앱의 이름, 설명, 권한 등을 설명하는 곳입니다.

우리의 매니페스트는 다음과 같습니다.

{
    "manifest_version": 2,
    "name": "Acho, where are we?",
    "version": "0.1.0",
    "description": "Ask Acho where you are and he'll bark the page title at you."
}

그래서 이게 다 뭐야? 보자 :

manifest_version (필수) : 확장 프로그램에 필요한 매니페스트 파일 형식입니다. Chrome 최신 버전의 경우 버전 2를 사용해야 하지만 Manifest v3는 Chrome 88 용으로 곧 출시 될 예정입니다. 버전 1은 더 이상 사용되지 않습니다.
name (필수) : 확장 프로그램의 이름입니다.
version (필수) : 확장 프로그램의 현재 버전을 나타내는 문자열입니다.
설명 (선택 사항이지만 권장 됨) : 확장에 대한 간단한 설명입니다.

확장이 형성되면 나중에 매니페스트를 업데이트 할 것입니다.

2. Chrome에서 확장 프로그램로드

이제 유효한 Manifest가 있으므로 Chrome에서 확장 프로그램을 이미 로드 할 수 있습니다. 이를 수행하려면 다음 단계를 따르십시오.

Chrome 열기
chrome://extensions로 이동합니다.
"개발자 모드"스위치를 켭니다 (화면 오른쪽 상단에 있음).
왼쪽에 표시된 "Load unpacked"버튼을 클릭합니다.
확장 프로그램의 폴더를 선택하십시오

A gif representing the previously described steps

이제 목록에서 우리가 매니페스트에서 정의한 이름과 설명으로 확장을 볼 수 있습니다. 물론 아직 로직을 추가하지 않았으므로 확장 기능을 사용하여 할 수 있는 작업은 여기까지입니다. 계속 진행하겠습니다.

3. 팝업 생성

3.1 manifest.json 업데이트

먼저 팝업에 대한 참조를 포함하도록 매니페스트를 업데이트 해야 합니다. 다음과 같이 browser_action 및 permissions를 추가해야 합니다.

{
    "manifest_version": 2,
    ...

    "browser_action": {
        "default_popup": "popup.html",
        "default_icon": {
            "16": "images/icon16.png",
            "24": "images/icon24.png",
            "32": "images/icon32.png"
        },
    },
    "permissions": [
        "tabs"
    ]
}

browser_action : 브라우저 액션을 사용하면 브라우저의 툴바에 확장에 대한 버튼이 생성되고 버튼 아이콘과 클릭시 나타나는 팝업을 포함 할 수 있습니다.
-, default_popup : 여기에서 팝업의 파일 이름을 선언합니다.
-, default_icon (선택 사항) : 다양한 크기의 아이콘 목록 (Chrome에서 사용자 기기에 더 적합한 아이콘을 선택 함)
permissions : Chrome API를 사용하여 특정 작업을 수행하는 데 필요한 권한을 선언해야 합니다. 이 경우 현재 탭 제목을 가져와야 하므로 tabs 권한을 선언합니다.

3.2 popup.html 만들기

사용자가 확장 프로그램의 버튼을 클릭 할 때 나타나는 팝업을 디자인 할 popup.html이라는 새 파일을 만듭니다. 다음과 같이 표시되어야 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Acho, where are we?</title>
    <link href="popup.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <p id="dialog-box"></p>
    <img id="acho" src="images/acho-bark.png" alt="Acho the pup">

    <script src='popup.js'></script>
</body>
</html>

보시다시피 popup.html은 다음과 같은 주요 요소로 구성됩니다.

Acho의 답변을 쓸 단락 <p id = "dialog-box">.
Acho가 짖는 이미지 <img id = "acho"...>
<link href = "popup.css"...> 여기에서 팝업에 몇 가지 스타일을 추가하겠습니다.
<script src = 'popup.js'> 확장의 로직이 여기에 있습니다.

이제 popup.css에 약간의 CSS를 추가해 보겠습니다. 파일을 만들고 다음 코드를 추가합니다.

#acho {
    display: block;
    margin: auto;
}

#dialog-box {
    text-align: center;
    font-size: medium;
}

아직 논리를 추가하지 않았으므로 Acho는 우리가 어디에 있는지 말할 수 없습니다. 그것을 고치자!

4. 팝업에 로직 추가

팝업에 논리를 추가하려면 popup.js 파일을 만들고 다음 코드를 추가합니다.

document.addEventListener('DOMContentLoaded', () => {
    const dialogBox = document.getElementById('dialog-box');
    const query = { active: true, currentWindow: true };

    chrome.tabs.query(query, (tabs) => {
        dialogBox.innerHTML = getBarkedTitle(tabs[0].title);
    });
});

const getBarkedTitle = (tabTitle) => {
    const barkTitle = `${getRandomBark()} Ahem.. I mean, we are at: ${tabTitle}`
    return barkTitle;
}

const barks = [
    'Barf barf!',
    'Birf birf!',
    'Woof woof!',
    'Arf arf!',
    'Yip yip!',
    'Biiiirf!'
]

const getRandomBark = () => {
    const bark = barks[Math.floor(Math.random() * barks.length)];
    return bark;
}

이전 코드는 콘텐츠가 로드 될 때까지 기다렸다가 chrome.tabs.query 메소드를 사용하여 현재 활성 탭을 가져옵니다. 그런 다음 탭의 제목을 추출하고 재미를 위해 무작위로 선택한 나무 껍질 소리에 연결합니다. 마지막으로 전체 문자열이 팝업 단락 #dialog-box에 추가됩니다.

그게 다야! 이제 확장이 완료되었습니다 🙌

결론

이 기사에서는 HTML, CSS 및 JavaScript 만 사용하여 매우 간단한 확장 프로그램을 만들어 Chrome 확장 프로그램의 기본 사항을 배웠습니다. 도움이 되었기를 바랍니다.

이 프로젝트의 저장소를 확인하십시오.

이 확장 프로그램 Acho에 대한 내 뮤즈의 사진입니다.

A pic of my dog Acho