Chrome 확장을 만들자.

특정 상황에 따라 Chrome 확장 프로그램에서 Redmine 사이트에서 작동하는 플러그인을 취미로 만들었습니다.
Chrome 웹 스토어에 게시 할 때까지 게시 한 플러그인의 소개가 Chrome 확장 프로그램에 대해 알게 된 것을 여러 번 나눕니다.

플러그인은 여기에서 설치할 수 있습니다. 혼자서 많은 사람들이 사용할 수 있으면 다행입니다.
소스 코드는 여기에서 볼 수 있습니다.

Redmine을 사용할 수있는 환경이 없으면 Redmine 데모 사이트에서 작동을 확인할 수 있습니다.

Chrome 확장이란?

Chrome에 확장 프로그램을 추가하는 메커니즘입니다.

Chrome 확장 프로그램은 단순한 압축 폴더입니다.
그 폴더의 내용은 단순한 HTML, CSS 및 Javascript 파일입니다.
일반적인 웹 페이지를 만들 수 있다면 Chrome 확장도 만들 수 있습니다.

Chrome 확장 프로그램에서 Chrome-Javascript-API을 사용할 수 있습니다.
이 플러그인은 다음 API를 사용합니다.

확장 ... 배경 페이지와의 통신, 리소스 파일 URL 확인

storage ... 설정 값 저장

런타임 ... 배경 통신 및 저장 처리 오류 판정

i18n ... 메시지 국제화

Chrome 확장 유형

콘텐츠 스크립트

특정 웹 페이지에 Javascript, CSS 등을 삽입 할 수 있습니다.
이 플러그인에서 주로 사용하는 기능입니다.

배경 페이지

Chrome이 시작되는 동안 상주하는 페이지입니다.
이 플러그인은 콘텐츠 스크립트에서 Google Analytics로 통계 수집을 수행하는 데 사용됩니다.

옵션 화면

플러그인 설정 화면입니다.
이 플러그인은 콘텐츠 스크립트에서 설정 한 내용을 편집하는 데 사용됩니다.

브라우저 동작

주소 표시 줄의 오른쪽에 아이콘을 추가하십시오.
이 아이콘 외에도 툴팁, 배지 및 팝업을 추가 할 수 있습니다.
※이용하고 있지 않기 때문에, 자세한 것은 모릅니다

페이지 행동

주소 표시 줄 내부에 아이콘을 추가하십시오.
아이콘은 페이지에 의해 표시 제어가 가능한 것 같습니다.
※이용하고 있지 않기 때문에, 자세한 것은 모릅니다

Override Pages

Chrome 내부의 페이지를 바꿀 수있는 것 같습니다.
다음 페이지를 바꿀 수 있지만 하나의 확장에서는 하나의 페이지 만 바꿀 수 있습니다.
※이용하고 있지 않기 때문에, 자세한 것은 모릅니다

Bookmark Manager

History

New Tab

노라.crx 정보

Windows 버전의 Chrome v33 이상에서는 다시 시작할 때 야라 .crx가 비활성화됩니다.
엔터프라이즈 또는 개인 용도에서도 Windows 버전 사용자가있는 경우 Chrome 웹 스토어에 게시해야합니다.
⇒Mac에서 개발하고 있었기 때문에, 종반까지 눈치채지 못했습니다 orz

링크

매니페스트 파일

콘텐츠 스크립트

옵션 화면

배경(및 Google Analytics)

스토리지

국제화

gulp

Chrome 웹 스토어에 게시