Chrome은 지구상에서 가장 인기 있는 웹 브라우저입니다. Statcounter의 데스크톱 브라우저 시장 점유율 조사에 따르면 Chrome은 2017년 말 기준 데스크톱 브라우저 시장의 무려 65%를 점유하고 있습니다.
이러한 시장을 정의하는 힘으로 Chrome용 디자인이 우선순위가 되었습니다. 확장 프로그램도 마찬가지입니다. Chrome은 Chrome 웹 스토어를 채우는 수만 개의 확장 프로그램, 테마 및 앱으로 지금까지 가장 큰 확장 프로그램 사용자 기반을 제공합니다.
트렌드에 따라 수익을 올리고 싶다면 기본 Chrome 확장 프로그램을 구축할 수 있습니다. 기본 웹 개발 기술(HTML, CSS 및 Javascript)과 이 모든 것을 하나로 묶으려면 한 티스푼의 JSON만 있으면 됩니다.
이 게시물에서는 기본 Chrome 확장 프로그램을 빌드하는 데 필요한 가장 기본적인 구조를 검토합니다. 사용 가능한 가능성에 대해 자세히 알아보려면 Chrome의 개발자 확장 프로그램 가이드를 확인하세요.
기본 Chrome 확장 프로그램 작성:Destiny 매니페스트
이 튜토리얼에서는 클릭할 때 간단한 팝업 메시지를 표시하는 기본 Chrome 확장 프로그램을 빌드합니다. 아이콘("icon.png"), HTML 파일("popup.html") 및 가장 중요한 매니페스트("manifest.json")와 같은 몇 가지 중요한 파일이 필요합니다. 이 모든 파일은 확장자의 이름을 가진 디렉토리 안에 있습니다. 이 경우 "Hello World"라고 합니다.
Chrome 확장 프로그램은 매니페스트에 의해 정의됩니다. 이 JSON 스니펫은 Chrome에서 확장 프로그램을 해석하는 방법, 로드할 파일 및 사용자와 상호작용하는 방법을 보여줍니다.
매우 기본적인 확장에 대한 매니페스트 파일은 다음과 같습니다.
{
"manifest_version": 2,
"name": "Hello World!",
"description": "My first Chrome extension.",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"activeTab"
]
} 이 매니페스트 파일은 클릭하면 "popup.html"이라는 파일의 내용을 로드하는 아이콘을 사용자의 도구 모음에 넣습니다. 다음은 나머지 콘텐츠의 핵심입니다.
manifest_version작업 중인 매니페스트 마크업의 버전을 Chrome에 알려줍니다. 최신 확장의 경우 이를2.로 설정해야 합니다.name확장 프로그램이 Chrome 스토어에 표시할 이름과 'chrome://extensions'를 표시합니다.description"chrome://extensions"에 표시되는 설명 텍스트를 보여줍니다.browser action아이콘을 도구 모음에 로드합니다. 또한 확장 프로그램이 도구 설명, 팝업 또는 배지를 표시하여 사용자 입력에 응답할 수 있습니다. "browser_action"이 할 수 있는 모든 작업의 전체 목록을 확인하세요.default_icon확장 프로그램의 디렉토리에서 아이콘의 경로를 보여줍니다.default_popup확장 프로그램의 아이콘을 클릭할 때 로드될 파일의 경로를 보여줍니다.permissions확장의 기능 영역을 제한합니다.activeTab확장 프로그램이 맨 앞에 있는 탭에 액세스할 수 있도록 하는 가장 일반적입니다. Google은 확장 프로그램이 요청할 수 있는 모든 권한 목록을 제공합니다.
Chrome 확장 프로그램의 매니페스트가 선언할 수 있는 모든 것에 대해 자세히 알아보려면 확장 프로그램 매니페스트에 대한 Google 문서를 확인하세요.
기본 Chrome 확장 프로그램 작성:팝업
이제 매니페스트를 작성했으므로 확장 프로그램이 표시할 내용을 파악할 수 있습니다. 그것은 확장이 로드될 때 표시될 "popup.html" 파일에 달려 있습니다. 이 프로젝트에 사용할 항목은 다음과 같습니다.
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<style type="text/css">
body {
margin: 5px;
}
h1 {
font-size: 15px;
text-align: center;
}
</style>
<body>
<h1>Hello World!</h1>
</body>
</html>
보시다시피 CSS로 스타일이 지정된 일부 텍스트가 렌더링됩니다. Javascript 또는 외부 CSS를 확장에 추가하려면 content_scripts 아래의 매니페스트에서 스크립트를 선언해야 합니다. 열쇠. 매니페스트에서 해당 스크립트를 참조하면 평소와 같이 해당 스크립트를 로드할 수 있습니다.
기본 Chrome 확장 프로그램 작성:Chrome에 로드
확장 프로그램의 기본 코드를 작성하고 적절한 아이콘을 찾으면 Chrome에 로드할 수 있습니다.
1. "chrome://extensions"로 이동하여 오른쪽 상단의 확인란을 선택하여 "개발자 모드"를 켭니다.
2. "압축 해제된 확장 프로그램 로드..." 버튼을 클릭하고 확장 프로그램의 디렉토리를 선택합니다.
3. 확장 프로그램이 로드되면 메뉴 모음에 아이콘이 표시됩니다.
4. 확장 프로그램을 클릭하면 (매우 간단한) 효과를 볼 수 있습니다.
결론:Chrome 확장 프로그램 확장
확장 프로그램을 완료하고 게시할 준비가 되면 Chrome 개발자 계정을 만들어야 합니다. 이것은 아주 간단한 과정은 아니지만 Google은 여기에 Chrome 확장 프로그램을 게시하기 위한 완전한 지침을 제공합니다.
분명히 Chrome 확장 프로그램으로 할 수 있는 일이 훨씬 더 많지만 이는 이 게시물의 범위를 벗어납니다. Chrome 확장 프로그램의 모든 기능에 대해 자세히 알아보려면 Google의 Chrome 개발자 확장 프로그램 가이드를 확인하세요.