이 도움말은 Chrome 앱 패키지를 빌드하고 게시한 경험이 있는 Chrome Enterprise 관리자 및 개발자를 대상으로 합니다.
Chrome 웹 스토어에 필요한 기능을 갖춘 제품이 없는 경우 자체 앱이나 확장 프로그램을 만들 수 있으며 사용자는 이를 Chrome OS 기기 또는 Chrome 브라우저에 추가할 수 있습니다. 예를 들어, 관리자는 HR 웹사이트로 연결되는 비공개 북마크 앱을 사용자의 기기에 자동으로 설치할 수 있습니다.
준비
- 매니페스트 파일이 앱이나 확장 프로그램이 참조하는 대상 사이트를 지정하는 경우 해당 사이트의 소유권을 확인하세요.
- 앱이나 확장 프로그램이 개인 서버에서 호스팅되는 경우 Chrome 웹 스토어에 게시할 수 있는 권한을 가진 사람을 제어할 수 있습니다. 애플리케이션이 연결되는 제3자 사이트에 대한 소유권 확인을 비활성화할 수 있습니다.
1단계: 앱 또는 확장 프로그램 만들기
아래에서는 북마크 애플리케이션을 예로 사용합니다. 더 복잡한 Chrome 앱 및 확장 프로그램을 만드는 방법에 대한 지침은 시작 가이드를 참조하세요.
- 응용 프로그램이나 확장 파일을 저장할 컴퓨터에 폴더를 만듭니다. 애플리케이션 이름을 지정하십시오.
- 매니페스트 파일을 만듭니다.
- 파일 배치 매니페스트.json응용 프로그램 또는 확장 폴더에.
- 로고를 만듭니다.
- 이미지 크기는 128 x 128픽셀이어야 합니다.
- 로고 파일을 다음 이름으로 저장하세요. 128.png응용 프로그램 폴더에 있습니다.
2단계: 앱 또는 확장 프로그램 테스트
개발자는 다음에서 애플리케이션과 확장 기능을 테스트할 수 있습니다. 크롬 브라우저또는 Chrome OS 기기에서.
앱이나 확장 프로그램 문제를 해결하려면 Chrome 로그를 사용하세요.
3단계: 앱 컬렉션 만들기(선택 사항)
관리자는 조직에서 앱 컬렉션을 만들어 사용자가 설치할 Chrome 앱과 확장 프로그램을 추천할 수 있습니다.
4단계: Chrome 웹 스토어에 앱 또는 확장 프로그램 게시
개발자는 애플리케이션이나 확장 프로그램을 공개적으로 사용 가능하게 하거나 이에 대한 액세스를 제한할 수 있습니다. Chrome 웹 스토어에 게시할 때 선택할 수 있는 세 가지 옵션이 있습니다.
- 공공의: 누구나 애플리케이션을 찾아 설치할 수 있습니다.
- 링크를 통해 접속: 링크를 통해서만 애플리케이션이나 확장 프로그램을 설치할 수 있습니다. Chrome 웹 스토어 검색결과에는 포함되지 않습니다. 조직 도메인 내부 및 외부 사용자 모두에게 링크를 보낼 수 있습니다.
- 사적인: 도메인의 사용자만 앱이나 확장 프로그램을 찾고 설치할 수 있습니다. 또한 개발자 도구 모음에 이름이 나열된 신뢰할 수 있는 테스터로만 제품에 대한 액세스를 제한할 수 있습니다.
Chrome 웹 스토어에 앱이나 확장 프로그램을 추가하려면 해당 폴더의 ZIP 아카이브를 만든 다음 제품을 게시하세요.
5단계. 애플리케이션 또는 확장 프로그램 사용을 위한 규칙 설정
Google 관리자 패널에서는 Chrome 기기 및 Chrome 브라우저의 앱 및 확장 프로그램 사용을 관리할 수 있습니다. Windows 컴퓨터, 조직의 Mac 및 Linux. Chrome 규칙을 맞춤설정할 수 있습니다.
다양한 범주의 사용자를 위해 여러 버전이 생성되었습니다. 그 중 하나가 호출됩니다. 구글 크롬개발자 에디션. 이 버전은 어떤 버전이며 왜 필요한가요? 이것이 이 자료에서 논의될 내용입니다.
Chrome의 대체 빌드가 오랫동안 등장했다는 점은 주목할 가치가 있습니다. 이 인기 있는 브라우저는 거의 출시 버전부터 함께 제공됩니다. 그러나 모든 사용자가 대체 옵션에 적합한 것은 아닙니다.
사실 Chrome의 "다른" 빌드는 레이아웃 디자이너, 테스터, 개발자 등 한 분야 또는 다른 분야의 전문가를 대상으로 합니다. 이러한 브라우저는 일반 사용자에게는 적합하지 않습니다. 하지만 우리는 그들에 대해 이야기할 필요가 있습니다.
Chrome에는 어떤 버전이 있나요?
실제로 그다지 많지 않습니다. 그러나 안정적인 것은 단 하나뿐입니다. 이것이 바로 에 배치된 것입니다. 무료 이용. 모든 사용자가 다운로드할 수 있습니다. 그러나 대체 버전도 있습니다. 좀 더 자세히 살펴보겠습니다.
다음은 모두가 좋아하는 Google Chrome 버전입니다. 그러나 이러한 맥락에서 우리는 Developer Edition에 관심이 있습니다. 그러므로 모든 것을 고려해야 한다. 주요 기능자세한 내용은 이 버전을 참조하세요. 그래야만 결론을 내릴 수 있습니다.
개발자 에디션의 특징
이 Google Chrome 버전의 주요 기능은 개발 도구를 사용할 수 있다는 것입니다. 이 웹 브라우저의 확장 기능과 플러그인을 개발하는 사람들에게 유용할 것입니다. 일반 사용자는 이러한 도구에서 길을 잃을 것입니다.
두 번째 기능은 고급 콘솔입니다. 코드를 편집하고 활성화하는 데 사용됩니다. 숨겨진 기능브라우저. 그러나 작업 방법을 알아야 합니다. 팀의 사소한 실수는 매우 끔찍한 결과를 초래할 수 있습니다. 
또 다른 "비결"은 Canary에서 이 버전으로 마이그레이션된 모든 최신 혁신 기능이 있다는 것입니다. 덕분에 개발자는 새로운 웹 브라우저 기능에 맞춰 확장 기능을 최적화할 수 있습니다.
빈번한 업데이트– 하나 더 구별되는 특징개발자 에디션. 불규칙적으로 오지만 늦어도 2주에 한 번 정도는 오지 않습니다. 경우에 따라 업데이트가 2일 이내에 도착할 수도 있습니다. 이는 웹 브라우저의 새로운 기능을 테스트하는 사람들에게 편리합니다.
결론
위에서 우리는 어떤 버전의 Google Chrome이 있는지에 대해 이야기하고 개발자를 위한 빌드에 대해 자세히 논의했습니다. 이제 이 버전은 도구 세트와 고급 콘솔로 구별된다는 것이 분명해졌습니다.
주목할 가치가 있는 것은 일반 사용자 Developer Edition을 설치할 필요가 전혀 없습니다. 이것에는 의미가 없습니다. 게다가 이 어셈블리는 특별히 안정적이지 않습니다. 개발자가 아니라면 Stable을 사용하는 것이 좋습니다.
인기가 높아지면서 구글 브라우저오류 및 사이트 성능 문제를 추적하는 기능을 제공하여 웹 개발자의 시간을 절약해 주는 Chrome 확장 프로그램이 등장하고 있습니다.
다음은 Chrome에 유용한 몇 가지 확장 프로그램입니다.
웹 개발자 확장
가장 편리하고 편리한 점을 지적하고 싶습니다. 강력한 도구웹 개발자 및 웹 디자이너를 위한 - Google Chrome용 웹 개발자 확장 프로그램입니다.
확장 프로그램은 톱니바퀴 아이콘이 있는 버튼 형태로 Google Chrome 도구 모음에 추가되며 웹사이트 개발 및 디버깅을 위한 다양한 도구가 포함되어 있습니다. 이것은 동일한 개발자가 작성한 인기 작품의 공식 개작입니다.
확장 기능은 큰 수옵션.
예를 들어, 많은 사람들은 단지 요소의 색상을 알아보세요모니터 화면에 16진수 형식으로 표시됩니다. 플러그인에는 이를 위한 특별한 기능이 있습니다. 기타 섹션에서 색상 선택 표시를 선택합니다.
색상 선택 표시를 선택하면 커서가 십자 모양으로 변합니다. 이제 브라우저 오른쪽 하단의 화면 영역을 클릭하면 CSS에서 사용할 수 있는 16진수 색상이 표시됩니다.
오늘날의 웹사이트가 모든 페이지 요소의 매개변수를 포함하기 위해 CSS(Cascading Style Sheets)를 사용한다는 것은 비밀이 아닙니다. CSS는 글꼴, 개체 크기, 프레임, 그림, 블록 및 테이블을 지정합니다. 우리는 당신을 위해 선택을 하기로 결정했습니다 구글 부가기능 Chrome을 사용하면 인터넷의 모든 페이지 스타일을 편집할 수 있습니다. 보너스로 페이지 배경을 변경하는 방법을 알려드리겠습니다.
모든 사람은 자신만의 선호도와 관심사를 가지고 있으며, 특히 웹 디자인에 있어서는 더욱 그렇습니다. YouTube가 업데이트될 때마다 영원한 홀리워를 기억하세요. 예, 그리고 즐겨찾는 사이트의 정보 표시에 대해 여러 가지 의견이 있을 것입니다. 글꼴이 보기 흉하거나 작은 곳, 완전히 불필요한 알림 블록이 있는 곳입니다. 여기에 배경 이미지를 추가하면 좋을 것 같아요!
오늘날의 브라우저에서는 단 몇 번의 클릭만으로 웹사이트를 편집할 수 있습니다. 사용자는 페이지 요소의 위치와 순서까지 무엇이든 맞춤 설정할 수 있습니다. 이를 위해 특별한 확장과 추가 사항이 작성되었으며, 변경을 진행하기 전에 이를 분석해 보겠습니다. 홈페이지 Google.
스타일봇
아마도 open이 포함된 가장 인기 있는 확장 기능일 것입니다. 소스 코드. 글꼴, 색상, 크기 등을 즉시 편집할 수 있습니다. 간단한 편집 모드가 있습니다: 언제 창문을 열어라 Stylebot을 사용하면 마우스를 해당 요소 위로 가져가기만 하면 원하는 요소를 선택할 수 있습니다. 변경 사항은 즉시 저장되며 사용자 정의 스타일을 친구들과 공유할 수 있습니다.
웹 재정의
Javascript 스크립트를 외부 웹사이트에 연결하는 애플리케이션입니다. 이미 jQuery, async.js, moment.js 및 Lodash가 포함되어 있으므로 이러한 라이브러리의 기능을 자유롭게 사용할 수 있습니다. Javascript 사용법을 아는 고급 사용자에게 적합하지만, 초보자도 확장 기능을 사용하여 다른 사람이 이미 작성한 스크립트를 구현할 수 있습니다.
스타일러
원리는 Stylebot의 원리와 동일합니다. 페이지 스타일을 빠르게 편집하면 변경 사항이 즉시 저장됩니다. 인터페이스와 작업 순서가 약간 다르며 가능성도 약간 더 적습니다. 따라서 선택은 귀하의 것입니다. 귀하가 가장 좋아하는 것이 무엇입니까?
세련된
Stylebot과 기능이 유사한 웹사이트 사용자 정의를 위한 가장 강력한 도구입니다. 불필요한 요소를 숨기고, 스타일을 편집하고, 결과를 친구들과 공유할 수 있습니다. 추가 기능 웹사이트에는 Facebook, YouTube, 앱스토어그리고 기타 많은 인기 있는 리소스.
라이브 CSS 편집기
키 조합을 누르면 사용자가 스타일을 입력할 수 있는 작은 창이 열리고 페이지에 즉시 적용됩니다(닫은 후 변경 사항이 저장됨). 간단하고 편리합니다. 불필요한 것은 없습니다.
약속대로 Stylebot을 예로 들어 페이지의 배경을 편집하는 방법을 알려드리겠습니다.
중요한! 이 방법은 블록과 메뉴가 오버로드되지 않은 "가벼운" 페이지에서 아름답게 보이며 추가 기능의 기능에 익숙해지기 위해서만 제공됩니다. Google.com에서 시도해 보시기 바랍니다.
- 필요한 페이지로 이동
- Chrome 오른쪽 상단에 있는 Stylebot 아이콘을 클릭하세요.
- 스타일봇 열기를 클릭하세요
- 하단에서 CSS 편집 옵션을 선택하세요.
- 다음 코드를 입력하세요:
몸 (
배경: url(https://dl.dropboxusercontent.com/u/28029149/NGC_2818_by_the_Hubble_Space_Telescope.jpg) ;
배경 크기: 100% 100%;
!중요한;
}
- 스타일봇 닫기
준비가 된! 예시로 제공된 이미지 대신 다른 이미지를 사용할 수 있습니다(위 코드의 링크만 바꾸면 됩니다). 더 복잡한 사이트 사용자 정의를 위해서는 CSS 매뉴얼을 읽어야 하지만 제 말을 믿으세요. 복잡한 것은 없습니다.
좋은 오후 친애하는 친구.
일주일 동안 계속되는 리뷰 마라톤 유용한 도구— 웹 디자이너와 웹 프로그래머를 위한 최고의 확장 기능을 언급하지 않을 수 없습니다. 더 나은 인터넷브라우저 구글 크롬. 나는 왜 그것이 최고라고 생각하는가? 현대적이고 빠르며 가장 안전하고 미니멀리즘도 마음에 들거든요. 그러나 오늘은 그것에 관한 것이 아닙니다. 그래서 우리는 정식 버전조항.
Chrome에 가장 적합한 확장 프로그램 검토
오늘날 많은 사용자가 확장 기능을 개발하고 있습니다. 그들은 단순히 엄청난 양더욱 강력하고 기능적으로 변할 때마다 생산성을 높이는 데 큰 도움이 됩니다. 나는 다음과 같은 일련의 기사를 작성할 것입니다. 최고의 확장구글 크롬용. 오늘은 설치하기 쉽고 웹 디자이너와 개발자에게 유용한 확장 기능에 중점을 둘 것입니다. 크롬사랑하는 독자 여러분에게도 도움이 될 것입니다.
최고의 확장 구글 크롬웹 디자이너와 개발자를 위한:
페이지에 사용되는 글꼴을 매우 쉽게 결정할 수 있습니다.
설명:
이 확장 기능을 사용하면 사이트에서 사용되는 웹 글꼴을 결정할 수 있습니다. 매우 간단하고 빠릅니다. 확장 지원 타입킷그리고 구글 폰트 API.
환상적이다 가벼운 통치자현장의 요소와 블록을 정렬하고 측정합니다.
설명:
쉽게 치수를 얻을 수 있습니다: 수평 및 수직 드래그 눈금자, 픽셀, 피크 및 측정 유형을 사용합니다. 나무와 강철 등 다양한 색상과 유형의 눈금자를 최대 4개까지 동시에 사용할 수 있습니다.
"모든 웹 디자이너는 이 Chrome 확장 프로그램을 가지고 있어야 합니다."
화면 캡처(Google 제공)
탭, 웹페이지 영역, 전체 페이지에 보이는 콘텐츠를 빠르게 캡처하세요. PNG 형식으로 저장합니다. 수직 및 수평 스크롤을 지원합니다.
설명:
이는 모니터 화면에서 이미지를 캡처하는 데 사용하기 매우 쉬운 확장입니다. 활성 탭, 페이지 영역 또는 전체 페이지의 이미지를 PNG 이미지로 캡처할 수 있습니다.
사이트의 모든 관련 이미지를 표시하고 다운로드할 수 있습니다.
설명:
웹페이지에서 다운로드해야 하는 경우, 이 확장 프로그램을 사용하면 이미지 보기, URL별 정렬 등을 쉽게 할 수 있습니다. 확인란을 선택하거나 이미지를 클릭하여 적절한 이미지를 다운로드하면 새 탭에서 열립니다. 표시 너비 설정, 테두리 크기, 스타일 및 색상, 필터, 버튼 및 알림 숨기기 등 필요한 모든 것을 사용자 정의할 수 있습니다!
구조 시간 당신이 시간을 어떻게 보내는지 이해하는 데 도움이 되는 훌륭한 분석 확장 기능입니다.
설명:
구조 시간 는 귀하가 컴퓨터, 스마트폰, 태블릿에서 어떻게 시간을 보내는지 이해하는 데 도움이 되는 개인 분석 서비스입니다. 웹 애플리케이션은 설치된 클라이언트와 상호 작용하며 OS X, Windows, Linux에서 실행됩니다. 안드로이드 기기, ChromeOS.
Google 크롬용 Pinterest
영감을 발견하고 수집하고 공유하세요
설명:
Pinterest는 영감을 찾고 이를 다른 디자이너 및 개발자와 공유하는 서비스입니다. 이를 사용하여 영감을 주는 것들의 컬렉션을 수집하고, 프로젝트를 구성하고 계획하세요.
Google Chrome의 공식 Pinterest 확장 프로그램은 서비스와 상호작용할 수 있는 버튼을 브라우저에 추가합니다. 빠르고 쉽게!
다양한 웹 개발자 도구가 포함된 도구 모음 버튼을 브라우저에 추가합니다. 이것은 원래 확장팩의 공식 포트입니다. 파이어폭스.
웹사이트 외관의 적응.
설명:
사용자 정의 CSS를 사용하여 웹사이트의 모양을 빠르게 변경할 수 있습니다.
편집기에서 요소에 적용할 변경 사항을 선택합니다. 글꼴 크기, 색상 등을 변경할 수도 있습니다. 숙련된 사용자는 CSS 테이블을 수동으로 작성할 수 있습니다.
Stylebot을 사용하여 사용자 정의할 수 있습니다. 모습당신이 가장 좋아하는 웹사이트. 또한 CSS를 학습하고 자신의 프로젝트 디자인을 디버깅하는 데에도 훌륭한 도구입니다.
페이지와 페이지의 트래픽을 분석하기 위한 공식 Alexa Traffic 확장 프로그램입니다.
설명:
Alexa Traffic Rank는 Chrome의 공식 무료 확장 프로그램입니다. 보실 수 있습니다 전체 정보인터넷상의 모든 사이트에 대해. 쉽고 간단하게 비교하고 분석해보세요.
모든 페이지에서 색상 코드를 선택하고 볼 수 있는 브라우저 확장입니다.
설명:
스포이드 도구를 사용하면 모든 웹사이트에서 색상 코드를 볼 수 있습니다. 측정 기록이 내장되어 있습니다. Chrome과 Chromium 모두에서 작동합니다.
개발자가 다양한 화면 해상도에서 웹 페이지를 테스트할 수 있는 확장입니다.
설명:
개발자가 자신만의 해상도 설정을 정의할 수 있는 기능을 사용하여 다양한 화면 해상도에서 웹 페이지를 테스트할 수 있는 확장입니다.
해상도는 웹사이트를 다양한 화면 해상도로 볼 수 있도록 브라우저 창 크기를 조정합니다. 가장 일반적으로 사용되는 화면 해상도 목록과 이 목록을 사용자 정의할 수 있는 기능이 있습니다.
속도 추적기(Google 제공)
이 확장 프로그램을 사용하여 웹사이트 속도에 대한 아이디어를 얻으세요.
설명:
속도 추적기이는 웹 애플리케이션의 성능 문제를 식별하고 해결하는 데 도움이 되도록 설계된 훌륭한 도구입니다. 이는 정보를 수집하고 브라우저의 낮은 수준에서 수집된 지표를 분석합니다.
이 확장 기능을 사용하면 지원서에서 가장 많은 시간이 낭비되는 부분에 대한 정보를 받을 수 있습니다. Javascript, CSS, Dom 이벤트 처리, 네트워크 리소스 로드, XMLHttpRequest 콜백, 대용량 이미지 등으로 인해 문제가 발생할 수 있습니다.
Google 크롬용 Firebug Lite
Google Chrome용 Firebug Lite는 Firebug Working Group의 공식 확장 프로그램입니다.
설명:
Firebug Lite는 Firebug 또는 Google 개발자 도구를 대체하지 않습니다. 이는 이러한 도구와 잘 작동하는 확장 프로그램입니다. Firebug Lite는 HTML 요소, DOM 요소 및 Box Model 셰이딩과 관련하여 Firebug에서 보던 풍부한 시각적 표현을 제공합니다. 또한 마우스로 HTML 요소를 확인하고 CSS 속성을 실시간으로 편집하는 등 몇 가지 흥미로운 기능도 제공합니다.
기업 입숨
레이아웃을 채우기 위해 임의의 텍스트를 생성합니다.
설명:
기업의 트위스트를 가미한 lorem ipsum 생성기입니다. 내용이나 단락별로 필러를 만듭니다.
이것은 Brian Haslanger가 작성한 기업 Ipsum의 복제물입니다(허가를 받아).
결론:
이 기사에서 나는 첫 번째에 대해 설명했습니다. 확장 15개을 위한 구글 크롬, 일상 업무에 사용합니다. 몇 가지가 당신에게도 도움이 되기를 바랍니다. 댓글에서 확장 기능에 대한 소식을 듣게 되어 기쁩니다. 사랑하는 친구여, 당신이 사용하는 것입니다! 제 이름은 빅토르 도첸코입니다. 모두 제일 좋다!