스플래툰 2의 Chrome 확장을 만들어 보았다.
거기서 제일 시작해 하는 일이 많은 Chrome 확장(Chrome Extension)으로 기어의 확인＋통지를 만들어 보았다.
드디어 TypeScript 만지지 않고 사용해 보았다!
Chrome 확장은 어떻게 만드는가?
이 근처를 참고로 여러가지 보았다.
우선 알았던 것.
뭔가 만들 수 있을 것 같은 느낌!
이번에는 기어의 표시를 하고 싶기 때문에 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)로 처리를 만들어 간다.
"permissions": [
"notifications",
"https://<URL>"
]
이 근처는 TypeScript가 잘 다루지 않은 것 같다. Angular라든지 사용할 수 있으면 좀 더 즐겁게.
Google 확장 Publish
이런 식으로 SplaWidget2을 공개. (1은 존재하지 않는다)
감상
Web계의 지식만으로 만들 수 있으므로 매우 간단. 앞으로 여러가지 만들고 싶다.
프레임워크를 통합할 수 있다면 UI를 더 잘 할 수 있을까?
Publish 할 때 GA를 설정할 수 있지만 수치가 어디의 PV인지 모르겠습니다.
Reference
이 문제에 관하여(스플래툰 2의 Chrome 확장을 만들어 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/wtotw/items/75b658ec5205526736a9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
