스플래툰 2의 Chrome 확장을 만들어 보았다.

ikaWidget2라든지 사용하고 있으면, 원하는 기어가 와도 놓치기 때문에 어떻게든 하려고 했다.
거기서 제일 시작해 하는 일이 많은 Chrome 확장(Chrome Extension)으로 기어의 확인＋통지를 만들어 보았다.
드디어 TypeScript 만지지 않고 사용해 보았다!

Chrome 확장은 어떻게 만드는가?

이 근처를 참고로 여러가지 보았다.

Chrome의 원래 확장 프로그램 개발(소스 코드 포함)

Chrome 확장의 개발 방법 정리 그 1: 개념편

우선 알았던 것.

manifest 파일＋HTML＋CSS＋JS로 만들 수 있다. →Web개발자라면 아마 만들 수 있다!

기능에 따라 3종류의 패턴이 있다.

Browser actions

Page actions

Override Pages

뭔가 만들 수 있을 것 같은 느낌!
이번에는 기어의 표시를 하고 싶기 때문에 Browser actions로 만든다.

세상에 편리한 것이 있다

1부터 만들면 상당히 힘들다…
찾고 있으면 generator-chrome-extension-kickstart 되는 것이 있었다. 그리고 거기에서 포크 된 generator-chrome-extension-kickstart-typescript을 발견.
TypeScript를 사용한 적이 없었기 때문에 generator-chrome-extension-kickstart-typescript를 사용하기로 결정.

generator-chrome-extension-kickstart-typescript

설치 및 실행

$ mkdir chrome_extension
$ cd chrome_extension
$ npm install -g yo generator-chrome-extension-kickstart-typescript
$ yo chrome-extension-kickstart-typescript

대화형으로 확장 기능을 지정해 간다.


아저씨가 표시되면 OK.


이 시점에서 이런 폴더 구성으로 되어 있다.

/app
|--_locales
|  |--en
|     |--messages.json
|
|--fonts
|  |--.gitkeep
|
|--images
|  |--icon-128.png
|  |--icon-16.png
|  |--icon-19.png
|  |--icon-38.png
|
|--manifest.json
|
|--pages
|  |--options.html
|  |--popup.html
|
|--scripts
|  |--background.ts
|  |--options.ts
|  |--popup.ts
|
|--styles
   |--options.scss
   |--popup.scss

빌드하면 dist/로 출력된다.

$ gulp
#または
$ gulp --watch

chrome의 확장 기능 관리 페이지에서 로드하면 확장 기능에 아저씨의 아이콘이 추가된다.

구현

그리고는 오로지 HTML과 CSS로 레이아웃, JS(TypeScript)로 처리를 만들어 간다.

Option Pages로 통신, 통지를 하는 경우, manifest 파일에 허가가 필요.

"permissions": [
  "notifications",
  "https://<URL>"
]

Typescript 단체라면 사용하기 어렵다

Notification이 interface밖에 없다?

Google Analytics의 ga()를 사용할 수 없습니까?

소규모라면 형이 까다롭다

이 근처는 TypeScript가 잘 다루지 않은 것 같다. Angular라든지 사용할 수 있으면 좀 더 즐겁게.

Google 확장 Publish

첫회 등록료로 500엔 걸린다. 어느 정도의 품질을 담보하기 때문에 어쩔 수 없다.

스토어용의 이미지를 준비할 필요가 있다. 지정의 사이즈가 아니면 에러가 된다. 여기가 가능하면 개선하고 싶습니다 ...

한 번 게시하면 버전이 같으면 오류가 발생합니다.

이런 식으로 SplaWidget2을 공개. (1은 존재하지 않는다)

감상

Web계의 지식만으로 만들 수 있으므로 매우 간단. 앞으로 여러가지 만들고 싶다.
프레임워크를 통합할 수 있다면 UI를 더 잘 할 수 있을까?
Publish 할 때 GA를 설정할 수 있지만 수치가 어디의 PV인지 모르겠습니다.