Chrome 확장 프로그램을 빌드하는 방법

게시 됨: 2022-02-24

요즘에는 모든 것에 대한 확장 기능이 있는 것처럼 보이지만 특정 목적이나 필요에 맞는 브라우저 확장 프로그램을 찾는 데 어려움을 겪는 것은 불가능하지 않습니다. 하나를 만드는 것이 얼마나 복잡합니까? 아래에서 Chrome 확장 프로그램을 만드는 방법에 대한 단계별 가이드를 찾을 수 있습니다.

1단계: 요구 사항

시작하기 전에 두 가지 참고 사항:

  • 이것이 대부분의 사람들에게 명백해 보일 수 있지만 Google 크롬 자체 내에서 확장 프로그램을 빌드하는 것이 중요합니다.
  • 이 프로세스를 진행하면서 작업을 테스트하십시오. 코딩 실수는 작업을 마친 후에 되돌리는 것보다 진행하면서 수정하는 것이 더 쉽습니다.

시작하기 전에 확장 기능을 결정해야 합니다. 어떤 목적에 도움이 될까요? 청중의 관심사와 문제에 초점을 맞추면 어떤 종류의 솔루션을 제공할 수 있는지 명확하게 정의할 수 있습니다.

이것을 덮고 나면 디자인을 확인하십시오. Chrome 스토어에 업로드된 모든 확장 프로그램에는 아이콘이 필요합니다. 직접 만들거나 디자인을 아웃소싱할 수 있습니다. 아이콘이 있으면 확장 프로그램 구축을 시작할 수 있습니다.

2단계: 빌딩 블록

모든 소프트웨어와 마찬가지로 확장 프로그램은 여러 파일로 구성됩니다. 따라서 가장 먼저 해야 할 일은 모든 확장 파일을 호스팅할 디렉토리를 만드는 것입니다.

디렉토리 는 컴퓨터에 파일을 저장하는 위치입니다. MS-DOS, OS/2 또는 Linux와 같은 계층적 파일 구조를 가진 모든 운영 체제에는 파일 디렉토리가 있습니다.

디렉토리가 왜 필요한가요? 따라서 Chrome이 확장 프로그램을 로드할 때 올바른 폴더에서 파일을 가져올 수 있습니다.

매니페스트.json 파일

다음으로 확장의 매니페스트 파일을 생성해야 합니다.

매니페스트는 프로그램을 시작하는 방법을 OS에 알려주는 파일입니다 . 매니페스트 파일의 설정은 항상 XML 언어를 사용하여 지정됩니다. 매니페스트는 권한과 같은 설정을 포함하는 데 자주 사용되며 프로그램에서 사용할 DLL 버전을 OS에 알립니다.

확장 프로그램의 경우 매니페스트 파일은 Chrome에 확장 프로그램 로드 지침을 제공합니다.

매니페스트 파일 만들기

Chrome에서 manifest.json 이라는 파일을 만들고 디렉터리에 추가합니다. 매니페스트 파일에 필요한 코드를 추가합니다. 그런 다음 다음 코드를 추가합니다.

{

"이름": "시작하기 예",

"설명": "확장을 빌드하십시오!",

"버전": "1.0",

"manifest_version": 3

}

확장 권한은 확장 기능에 따라 다릅니다. Chrome 확장 프로그램 문서에서 모든 권한 목록과 의미를 찾을 수 있습니다.

팝업 페이지

사이트에 팝업이 필요한 경우 코드에 추가해야 합니다.

  1. 매니페스트 파일에서 browser_action 을 사용하여 파일 이름을 할당합니다.
  2. HTML 또는 CSS로 팝업 페이지를 구축합니다. SVG로 이미지를 추가할 수 있습니다.
  3. JavaScript를 사용하여 팝업에 기능을 추가하십시오. JavaScript 파일을 지정하고 팝업 파일에 링크합니다. 예를 들어:
  4. 기능을 만들고 팝업 DOM에 액세스할 수 있습니다. 다음은 이를 수행하는 방법의 예입니다.

document.addEventListener("DOMContentLoaded", () => {

var 버튼 = document.getElementById("제출")

button.addEventListener(“클릭”, (e) => {

console.log(e)

})

})

콘텐츠 스크립트

content_script 섹션은 확장이 작동해야 하는 위치를 정의합니다. 확장 기능이 모든 사이트에서 작동하도록 하려면 다음을 작성해야 합니다.

"content_scripts": [

{

"일치": ["<all_urls>"],

"css": ["background.css"],

"js": ["background.js"]

}

],

예를 들어 Facebook과 같은 단일 사이트에서 확장 프로그램이 작동하도록 하려면 [“https://facebook.com/*”]을 추가해야 합니다.

이벤트 페이지

Event는 흥미로운 일이 발생했을 때 알림을 받을 수 있도록 하는 객체입니다. 예를 들어 chrome.alarms.onAlarm 이벤트를 사용하여 알람이 만료될 때 알림을 받을 수 있습니다.

chrome.alarms.onAlarm.addListener(함수(알람) {

appendToLog('alarms.onAlarm –'

+ ' 이름: ' + 알람.이름

+ ' scheduledTime: ' + alarm.scheduledTime);

});

Chrome 문서에서 이벤트 페이지에 대해 자세히 알아볼 수 있습니다.

콘텐츠.js

콘텐츠 스크립트는 브라우저 확장의 일부인 JavaScript 파일입니다. 콘텐츠 스크립트는 일반 자바스크립트보다 더 많은 권한을 가지고 있습니다.

3단계: Chrome 확장 프로그램 팝업에서 팝업 HTML 파일 열기

기본 크롬 확장 프로그램에 버튼을 배치하면 이 버튼을 클릭할 때 다른 콘텐츠에서 다른 HTML 팝업을 만들 수 있습니다. 다음은 StackOverflow의 예입니다.

매니페스트.json:

{

"이름": "치트시트",

"설명": "치트시트 확장",

"버전": "1.0",

"매니페스트_버전": 3,

"배경": {

"service_worker": "background.js"

},

"권한": ["저장소", "액티브 탭", "스크립팅","탭"],

"행동": {

"default_popup": "popup.html",

"default_icon": {

"16": "/images/get_started16.png",

"32": "/images/get_started32.png",

"48": "/images/get_started48.png",

"128": "/images/get_started128.png"

}

},

"아이콘": {

"16": "/images/get_started16.png",

"32": "/images/get_started32.png",

"48": "/images/get_started48.png",

"128": "/images/get_started128.png"

}

}

popup.html:

<!DOCTYPE HTML>

<html>

<머리>

<link rel="stylesheet" href="style.css">

</head>

<본체>

<button id="git_Sheet">git 시트</button>

<스크립트 src="popup.js"></script>

</바디>

</html>

그리고 popup.js 파일:

let gitSheet = document.getElementById("git_Sheet"); gitSheet.addEventListener("클릭", async() => { 하자

= await chrome.tabs.query({ 활성: true, currentWindow: true }); chrome.scripting.executeScript({ target: { tabId: tab.id }, 함수: ShowGitSheet, }); }); function ShowGitSheet() { chrome.browserAction.openPopup({팝업: "git_popup.html"}); }

팁: Firefox 이외의 다른 브라우저에서 확장 프로그램을 실행하려면 chrome.browserAction.openPopup 대신 chrome.windows.create({url: '…', type: 'popup'})를 사용하세요.

4단계: Chrome에 확장 프로그램을 설치한 후 오류 확인

빌드 단계를 마치면 확장 프로그램을 테스트하여 Chrome에서 실행할 수 있는지 확인해야 합니다. 확장을 로드하고 디버깅을 시작하려면 다음 단계를 따르세요.

  • Google 크롬 브라우저에서 chrome://extensions를 엽니다.
  • 오른쪽 상단의 개발자 상자를 선택하여 개발자 모드를 설정합니다.
  • "압축 해제된 확장자 로드"를 클릭하면 파일을 선택할 수 있는 옵션이 표시됩니다.
  • 확장이 유효한 경우 선택하는 즉시 로드되어야 합니다.
  • 유효하지 않은 경우 오류 메시지가 표시됩니다.

코드를 작성할 때 가장 흔한 실수는 구문 오류입니다. 따라서 가장 먼저 모든 쉼표와 괄호가 올바른 위치와 형식에 있는지 다시 확인해야 합니다.

그런 다음 실행 중인 것을 볼 수 있도록 "활성화됨" 확인란을 선택합니다.

5단계: 행동에 논리를 추가하십시오.

경험상 API 호출을 백그라운드 스크립트에 배치하고 DOM 조작을 컨텐츠 스크립트에 배치하는 것이 좋습니다. 백그라운드 스크립트를 추가하는 예를 살펴보겠습니다.

  1. 확장 디렉토리 안에 background.js 라는 파일을 만듭니다.
  2. 매니페스트에 백그라운드 스크립트 등록

{

"이름": "시작하기 예",

"설명": "확장을 빌드하십시오!",

"버전": "1.0",

"매니페스트_버전": 3,

"배경": {

"service_worker": "background.js"

}

}

Chrome은 이벤트와 같은 확장 프로그램을 다시 로드할 때 파일에서 추가 지침을 검색할 수 있습니다.

  1. 스크립트를 추가합니다. 확장의 목적에 따라 다릅니다.

확장이 설치될 때 정보를 얻을 수 있도록 하려면 백그라운드 스크립트에 runtime.onInstalled에 대한 수신 이벤트를 포함해야 합니다. 그러면 onInstalled 리스너가 스토리지 API를 사용하여 값을 지정하므로 확장 구성 요소가 값에 액세스하여 업데이트할 수 있습니다.

// 배경.js

하자 색상 = '#3aa757';

chrome.runtime.onInstalled.addListener(() => {

chrome.storage.sync.set({색상});

console.log('기본 배경색은 %cgreen으로 설정됨', `color: ${color}`);

});

Google Chrome 개발자 사이트에서 다음 단계에 대해 자세히 알아보세요. 여기에는 사용자 인터페이스 와 아이콘 을 만드는 방법과 사용자 상호 작용을 향상시키기 위한 일부 계층 논리를 설정하는 방법이 포함됩니다.

평소와 같이 인터페이스 디자인을 시작하려면 매니페스트 파일에 브라우저 작업을 등록해야 합니다. 예를 들어 팝업을 사용하는 경우 코드는 다음과 같을 수 있습니다.

<!DOCTYPE HTML>

<html>

<머리>

<link rel="stylesheet" href="button.css">

</head>

<본체>

<button id="changeColor"></button>

</바디>

</html>

아이콘의 요구 사항은 무엇입니까? 이미지의 경우 16×16 및 32×32 픽셀. 모든 아이콘은 정사각형이어야 합니다.

확장 프로그램이 무엇을 해야 하는지 알 수 있도록 논리 스크립트 를 추가하는 것을 잊지 마십시오. 예를 들어, popup.js 스크립트 끝에 추가할 수 있습니다.

// 버튼을 클릭하면 현재 페이지에 setPageBackgroundColor를 삽입합니다.

changeColor.addEventListener(“클릭”, async() => {

허락하다

= await chrome.tabs.query({ 활성: true, currentWindow: true });

chrome.scripting.executeScript({

대상: { tabId: tab.id },

함수: setPageBackgroundColor,

});

});

// 이 함수의 본문은 내부 콘텐츠 스크립트로 실행됩니다.

// 현재 페이지

함수 setPageBackgroundColor() {

chrome.storage.sync.get("색상", ({색상}) => {

document.body.style.backgroundColor = 색상;

});

}

함수 setPageBackgroundColor() {

chrome.storage.sync.get("색상", ({색상}) => {

document.body.style.backgroundColor = 색상;

});

6단계: 확장 프로그램 사용해보기

다음 단계는 논리적이고 지속적으로 확장을 테스트하여 모든 것이 제대로 실행되고 있는지 확인하는 것입니다. 테스트를 아웃소싱하는 경우 인터페이스가 얼마나 직관적인지 확인하십시오. 테스트 결과에 따라 스크립트를 조정한 후 다시 테스트하십시오.

7단계: Chrome 웹 스토어에 확장 프로그램 제출

확장 프로그램에 만족하면 Chrome 웹 스토어로 이동하여 제출할 수 있습니다.

Chrome 개발자 스토어에서 새 항목 을 클릭한 다음 프로젝트 파일을 업로더에 드롭합니다.

Chrome은 권한과 권한이 필요한 이유에 대한 정보를 요청하기 위해 몇 가지 질문을 합니다.

Google 크롬 확장 프로그램의 예

모든 것에 대한 확장이 있는 것 같습니다. 다음은 가장 유용한 몇 가지입니다.

  • 드라이브에 저장
     이 확장 프로그램은 브라우저 상단에 작은 아이콘을 설치합니다. 나중에 볼 수 있도록 탐색하는 내용을 드라이브 계정으로 보냅니다. 스크린샷을 찍고 이미지, 오디오 또는 비디오를 저장하는 방식으로 작동합니다.
  • 정렬됨
     이 플러그인은 사용자에게 받은 편지함을 정리하고 가장 중요한 항목의 우선 순위를 지정할 수 있는 방법을 제공합니다. Gmail과 통합되어 메시지를 맞춤 열로 끌어다 놓을 수 있습니다.
  • 모든 곳에서 HTTPS
     이 확장 프로그램은 모든 웹사이트를 http에서 보안 HTTPS로 변경하여 브라우징 보안을 강화하므로 암호화되고 안전합니다.
  • 나는 쿠키에 관심이 없다
     모든 웹사이트에서 쿠키에 대한 동의를 요청하므로 이 확장 프로그램은 생명의 은인입니다. 별 것 아닌 것 같지만 쿠키 팝업에서 동의 버튼을 누릅니다. 시간을 절약하고 생산성을 높일 수 있습니다.
  • 속도 테스트
    이 유용한 확장을 사용하면 이동 중에 연결 속도를 확인할 수 있습니다. 데스크톱 및 모바일 버전을 사용하면 큰 첨부 파일을 다운로드하거나 비디오를 스트리밍하기 전에 연결이 최상인지 확인할 수 있습니다.
     클릭 한 번으로 Speedtest는 사용 중인 네트워크에서 빠른 연결 테스트를 수행합니다.

Chrome 확장 프로그램은 무엇을 할 수 있나요?

맞춤형 확장은 단일 작업을 수행하는 소프트웨어 프로그램입니다. 즉, 하나 이상의 기능을 포함할 수 있지만 동일한 목적을 달성하기 위해 모든 것이 작동해야 한다는 점을 명심하십시오.

Chrome 확장 프로그램은 페이지 작업 또는 브라우저 작업을 사용하여 작동합니다.

페이지 작업 : 특정 페이지에만 해당하는 작업입니다.

브라우저 작업 : 현재 있는 페이지에 관계 없이 관련이 있습니다.

사용자 인터페이스가 사용자 친화적이고 이해하기 쉬운지 확인하십시오. 최종 결과물은 사용자가 다운로드하여 설치할 수 있는 패키지입니다.

확장 프로그램으로 돈을 버는 5가지 시도되고 검증된 방법

확장 프로그램의 주요 목표는 수익을 창출하는 것입니다. 대상 고객을 정의하고 확장 기능을 사용하는 방법을 정의한 후에는 이를 통해 수익을 올릴 수 있는 방법을 전략화할 수 있습니다. 확장 수익화에 대한 광범위한 가이드를 작성했습니다. 다음은 몇 가지 주요 사항입니다.

1. 인앱 광고

인앱 광고는 확장 프로그램에서 수익을 창출하는 가장 일반적인 방법 중 하나입니다. 사용자가 귀하의 확장 프로그램을 사용할 때 표시되는 광고입니다. 프로그래밍 방식 솔루션을 통해 인앱 광고를 통해 수익을 창출하면 광고가 순환됩니다. 정적 광고와 달리 이 기술은 잠재력을 극대화하는 데 도움이 됩니다. 디스플레이 광고를 사용하면 다양한 유형의 광고를 혼합할 수 있습니다.

CodeFuel 사용자는 서비스가 사용자 의도와 관련된 광고를 표시하기 때문에 수익을 극대화하고 수익 창출을 단순화합니다.

지금 CodeFuel로 확장 프로그램에서 수익을 창출하세요.

2. 검색 광고

이것은 검색 엔진 결과 페이지에 광고를 게재하는 전략입니다. 사용자가 검색할 때 광고가 표시되기 때문에 사용자 경험을 방해하지 않습니다. 사용자의 의도에 따라 검색 광고를 맞춤화할 수 있으므로 사용자 경험이 향상됩니다.

3. 인앱 결제 및 구매

이 모델에서는 확장 기능이 무료이지만 내부 기능에는 요금이 부과됩니다. 인앱 구매는 게임 애플리케이션 및 확장 프로그램에서 일반적입니다. 사용자는 추가 유료 기능을 추가할지 여부를 선택합니다.

4. 유료 업그레이드

마찬가지로 이 모델에서는 기본 확장이 무료로 제공되지만 사용자가 프리미엄 버전을 원할 경우 업그레이드 버전에 대한 비용을 지불해야 합니다. 이것은 Grammarly와 같은 인기 있는 확장에서 사용되는 매우 일반적인 모델입니다.

5. 프리미엄

이것은 아마도 확장 및 응용 프로그램에 대한 가장 인기 있는 수익 창출 모델일 것입니다. freemium을 사용하면 확장을 무료로 제공합니다. 그것으로 어떻게 돈을 벌 수 있습니까? 다음과 같은 몇 가지 옵션이 있습니다.

  1. 제한된 기간 동안 무료 평가판을 제공할 수 있습니다.
  2. 기능이 제한된 무료 기본 버전을 제공할 수 있습니다.

이 모델을 선택하는 경우 Google에서 유료 확장 프로그램을 중단한 이후의 제한 사항을 고려하십시오.

최고의 보안 확장 Google 크롬:

대부분의 사람들은 쇼핑, 검색에서 금융 계정 관리에 이르기까지 모든 작업에 Chrome을 사용합니다. 이 모든 민감한 데이터는 보호되어야 합니다. 해당 정보를 안전하게 유지할 수 있는 몇 가지 확장 기능이 있습니다.

1. Avast 온라인 시큐리티

이 확장은 여러 기능으로 웹 브라우징의 보안을 다룹니다. 피싱 공격 방지 기능 은 모든 웹 페이지의 요소를 스캔하고 페이지가 가짜인지 의심스러운지 감지합니다 . 다른 유용한 기능에는 커뮤니티 평가 시스템을 사용하여 위험한 사이트를 감지하는 기능이 있습니다.

2. 블러

사용 가능한 암호 관리자가 많이 있으며 이는 모든 자격 증명을 안전하게 유지하기 위해 반드시 필요합니다. Blur는 추가 보안 기능으로 인해 가장 안전한 것 중 하나입니다.

Blur 는 암호를 암호화, 저장 및 관리합니다 . 또한 쇼핑 사이트에서 신용 카드 정보를 숨기고 쿠키가 아닌 추적기를 포함한 모든 유형의 추적기를 차단합니다.

3. 클릭 및 청소

클릭 한 번으로 온라인 활동의 모든 흔적을 지우는 청소 도구입니다. 확장 버튼은 모든 온라인 기록, 쿠키, 캐시, 저장된 URL, 웹 SQL 데이터베이스 및 임시 파일까지 지울 것입니다. Click and Clean에는 맬웨어 방지 기능이 내장되어 있으며 특정 유형의 데이터를 삭제하도록 사용자 지정할 수도 있습니다.

4. 패닉 버튼

이 확장 프로그램을 사용하면 클릭 한 번으로 열려 있는 모든 항목을 닫을 수 있습니다. 민감한 작업을 하고 있는데 권한이 없는 사람이 접근하는 경우에 유용합니다. 패닉 버튼을 클릭하면 모든 탭이 즉시 닫히고 북마크 폴더에 저장됩니다.

5. 유령

온라인 개인 정보를 보호 하거나 추적기를 제어하려는 경우 이 확장 프로그램이 솔루션이 될 수 있습니다. Ghostery를 사용하면 추적기를 제어할 수 있으므로 차단하거나 차단 해제할 추적기를 결정할 수 있습니다. 또한 특정 유형의 추적을 차단할 수 있습니다.

CodeFuel이 확장 프로그램의 수익을 극대화하는 데 도움이 되는 방법

CodeFuel을 사용하여 확장 프로그램의 수익 창출을 한 단계 높이십시오. 당사의 완전한 수익 창출 플랫폼은 브라우저 확장을 포함하여 디지털 자산에 대한 의도 기반 수익 창출을 제공합니다.

이 솔루션은 머신 러닝을 활용하여 의도에 따라 사용자 정의된 관련성이 높은 쇼핑 및 텍스트 광고를 사용자에게 제공합니다. 다른 솔루션과 달리 CodeFuel을 사용하면 Bing 및 GoogleAdSense와 같은 여러 광고 네트워크에서 유연하게 작업할 수 있습니다. 지금 CodeFuel로 확장 수율을 극대화하십시오.

Chrome 확장 프로그램이 멈추는 경우 어떻게 수정합니까?

Chrome 확장 프로그램으로 작업하고 있는데 갑자기 브라우저가 멈춥니다. 얼마나 답답한지. 흔하지는 않지만 발생합니다. Chrome이 충돌하거나 정지하면 프록시 오류 또는 웹페이지를 사용할 수 없는 등의 오류 유형을 나타내는 오류 메시지가 표시됩니다.

Chrome 도움말에는 다음과 같은 여러 문제 해결 팁이 나와 있습니다.

  • 다른 탭 및 앱 닫기
  • 브라우저 다시 시작
  • 악성코드 확인
  • 문제가 있는지 네트워크 테스트
  • 확장 프로그램이 Chrome과 충돌을 일으키는 경우 다음 안내를 따르세요.
  1. 오른쪽 상단에서 더보기 설정.
  2. 하단에서 고급 을 클릭합니다.
  3. 재설정 및 정리를 클릭하십시오. 호환되지 않는 응용 프로그램을 업데이트하거나 제거합니다.
     이 옵션이 표시되지 않으면 애플리케이션에 문제가 없는 것입니다.
  4. 목록에서 각 앱을 업데이트할지 또는 제거할지 결정합니다.
    컴퓨터의 앱 스토어를 열고 업데이트를 확인합니다.

자주하는 질문

  • Chrome 확장 프로그램에 대해 사용자에게 비용을 청구할 수 있습니까?

    2020년에 Google은 Chrome 웹 스토어에서 유료 Chrome 확장 프로그램을 종료했습니다. 즉, 더 이상 Chrome 스토어에서 확장 프로그램에 대해 요금을 청구할 수 없습니다. 다른 플랫폼을 사용할 수 있습니다.

  • Chrome 확장 프로그램은 유료인가요?

    2020년에 Google은 Chrome 웹 스토어에서 유료 Chrome 확장 프로그램을 종료했습니다. 즉, 더 이상 웹 스토어에서 확장 프로그램에 대해 비용을 청구할 수 없습니다. 다른 플랫폼을 사용할 수 있습니다.

  • Chrome 확장 프로그램을 게시하려면 어떻게 해야 하나요?

    확장 프로그램이 준비되면 다음 지침에 따라 Chrome 스토어에 게시하세요.

    1. zip 파일 만들기
    2. 개발자 계정 생성 및 설정
    3. 확장 프로그램 업로드
    4. 목록에 자산 추가
    5. 게시를 위해 항목 제출

  • 사용자 경험을 개선하고 더 많은 전환을 얻는 방법은 무엇입니까?

    이것은 이 질문의 범위와 거리가 먼 광범위한 주제이지만 다음은 몇 가지 기본 원칙입니다.

    1. 확장 프로그램 탐색을 단순하게 유지
    2. 좋은 고객 지원 제공
    3. 확장 프로그램을 사용하기 쉽게 만드세요
    4. 브라우저 메모리 소비를 늘리지 않는지 확인
    5. Google 사용자의 로그인 간소화

  • Chrome용 확장 프로그램을 작성하는 데 어떤 기술이 사용되나요?

    확장은 여러 웹 개발 기술로 생성된 다양한 구성 요소로 구성됩니다. 가장 많이 사용되는 것은 HTML, CSS 및 JavaScript입니다.

  • 확장이 렌더링된 웹 페이지 외부에서 UI를 생성할 수 있습니까?

    Chrome 개발자 페이지에 따르면 확장 프로그램은 브라우저 인터페이스에 버튼을 추가할 수 있습니다. 확장 프로그램은 팝업 알림을 생성할 수도 있습니다.

  • 확장 프로그램이 chrome:// URL을 수정할 수 있습니까?

    확장은 정의에 따라 API를 사용하여 브라우저 동작을 수정하여 브라우저를 확장합니다. 웹 기술을 기반으로 하기 때문에 별도의 실행 환경에서 실행되고 Chrome 브라우저와 상호 작용합니다.

  • 내 확장에 대한 UI를 어떻게 구축합니까?