SlideShare a Scribd company logo
1 of 9
Download to read offline
Typetalk APIを使った
Chrome拡張開発ノウハウ #1
@shoito
http://about.me/shoito
Typetalk Hack Tokyo
Typetalk Notifications
ここにハマった
http://developers.typetalk.in/oauth_ja.html
Chrome Identify API
https://developer.chrome.com/extensions/app_identity
Chrome Identify API
Redirect URI
https://
<extension-id>.chromiumapp.org/<anything-here>
https://
abcdefghijklmnopqrstuvwxyzabcdef.chromiumapp.org/
provider_cb
Extension ID
• Chromeウェブストア公開用
• egjiljalbhkekpkkhfoehleeepecnnbo
• 開発用(Chromeの数分)
• Chrome on MacBook Air
• bkojfgfhiecdpbhfoonakkbcpkglbnbn
• Chrome on ...
Typetalkアプリケーション登録
https://typetalk.in/my/develop/applications
dev/production
dev/production用のClient IDとClient Secretは .env.json に外出し
• https://github.com/shoito/typetalk-notifications/blob/master/app/scripts/
background.js#L3-L4
• https://github.com/shoito/typetalk-notifications/blob/master/.env.json#L1-L10
• https://github.com/shoito/typetalk-notifications/blob/master/Gruntfile.js#L27-L29
• https://github.com/shoito/typetalk-notifications/blob/master/Gruntfile.js#L278-L307
Typetalk APIを使ったChrome拡張の開発ノウハウ
http://qiita.com/shoito/items/2a15b6a1d4ed8f08d8d8
http://about.me/shoito

More Related Content

What's hot

Web development tool
Web development toolWeb development tool
Web development toolDeep Bhavsar
 
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSTutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSPhilipp Burgmer
 
Building data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapiBuilding data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapiDerek Smith
 
Building Native Mobile Apps using Javascript with Titanium
Building Native Mobile Apps using Javascript with TitaniumBuilding Native Mobile Apps using Javascript with Titanium
Building Native Mobile Apps using Javascript with TitaniumFokke Zandbergen
 
Building a resposive slider plugin for WordPress theme
Building a resposive slider plugin for WordPress themeBuilding a resposive slider plugin for WordPress theme
Building a resposive slider plugin for WordPress themecodebangla
 
Isomorphic JavaScript with Nashorn
Isomorphic JavaScript with NashornIsomorphic JavaScript with Nashorn
Isomorphic JavaScript with NashornMaxime Najim
 
Launch Yourself into The AngularJS 2 And TypeScript Space
Launch Yourself into The AngularJS 2 And TypeScript SpaceLaunch Yourself into The AngularJS 2 And TypeScript Space
Launch Yourself into The AngularJS 2 And TypeScript SpaceColdFusionConference
 
Building Cross-Platform Mobile Apps
Building Cross-Platform Mobile AppsBuilding Cross-Platform Mobile Apps
Building Cross-Platform Mobile AppsTroy Miles
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)ejlp12
 
Lunch and learn as3_frameworks
Lunch and learn as3_frameworksLunch and learn as3_frameworks
Lunch and learn as3_frameworksYuri Visser
 
Making Apps More Human - Intro to Microsoft Cognitive Services
Making Apps More Human - Intro to Microsoft Cognitive ServicesMaking Apps More Human - Intro to Microsoft Cognitive Services
Making Apps More Human - Intro to Microsoft Cognitive ServicesMatthew Soucoup
 
Getting Started with Titanium & Alloy
Getting Started with Titanium & AlloyGetting Started with Titanium & Alloy
Getting Started with Titanium & AlloyFokke Zandbergen
 
Xamarin and DevOps workshop by eMan and Microsoft (13.4.2016)
Xamarin and DevOps workshop by eMan and Microsoft (13.4.2016)Xamarin and DevOps workshop by eMan and Microsoft (13.4.2016)
Xamarin and DevOps workshop by eMan and Microsoft (13.4.2016)eMan s.r.o.
 
Desktop Apps with PHP and Titanium
Desktop Apps with PHP and TitaniumDesktop Apps with PHP and Titanium
Desktop Apps with PHP and TitaniumBen Ramsey
 
Creating 3 Beautiful Apps At Once - Intro To Xamarin.Forms
Creating 3 Beautiful Apps At Once - Intro To Xamarin.FormsCreating 3 Beautiful Apps At Once - Intro To Xamarin.Forms
Creating 3 Beautiful Apps At Once - Intro To Xamarin.FormsMatthew Soucoup
 
JavaScript Tools Overview
JavaScript Tools OverviewJavaScript Tools Overview
JavaScript Tools OverviewScott Povlot
 

What's hot (19)

Web development tool
Web development toolWeb development tool
Web development tool
 
Tutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJSTutorial: Develop Mobile Applications with AngularJS
Tutorial: Develop Mobile Applications with AngularJS
 
Building data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapiBuilding data driven mobile apps with phone gap and webapi
Building data driven mobile apps with phone gap and webapi
 
Appcelerator Alloy MVC
Appcelerator Alloy MVCAppcelerator Alloy MVC
Appcelerator Alloy MVC
 
Apache Cordova
Apache CordovaApache Cordova
Apache Cordova
 
Building Native Mobile Apps using Javascript with Titanium
Building Native Mobile Apps using Javascript with TitaniumBuilding Native Mobile Apps using Javascript with Titanium
Building Native Mobile Apps using Javascript with Titanium
 
Building a resposive slider plugin for WordPress theme
Building a resposive slider plugin for WordPress themeBuilding a resposive slider plugin for WordPress theme
Building a resposive slider plugin for WordPress theme
 
Isomorphic JavaScript with Nashorn
Isomorphic JavaScript with NashornIsomorphic JavaScript with Nashorn
Isomorphic JavaScript with Nashorn
 
Launch Yourself into The AngularJS 2 And TypeScript Space
Launch Yourself into The AngularJS 2 And TypeScript SpaceLaunch Yourself into The AngularJS 2 And TypeScript Space
Launch Yourself into The AngularJS 2 And TypeScript Space
 
Building Cross-Platform Mobile Apps
Building Cross-Platform Mobile AppsBuilding Cross-Platform Mobile Apps
Building Cross-Platform Mobile Apps
 
Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)Introduction to Apache Cordova (Phonegap)
Introduction to Apache Cordova (Phonegap)
 
lecture5
lecture5lecture5
lecture5
 
Lunch and learn as3_frameworks
Lunch and learn as3_frameworksLunch and learn as3_frameworks
Lunch and learn as3_frameworks
 
Making Apps More Human - Intro to Microsoft Cognitive Services
Making Apps More Human - Intro to Microsoft Cognitive ServicesMaking Apps More Human - Intro to Microsoft Cognitive Services
Making Apps More Human - Intro to Microsoft Cognitive Services
 
Getting Started with Titanium & Alloy
Getting Started with Titanium & AlloyGetting Started with Titanium & Alloy
Getting Started with Titanium & Alloy
 
Xamarin and DevOps workshop by eMan and Microsoft (13.4.2016)
Xamarin and DevOps workshop by eMan and Microsoft (13.4.2016)Xamarin and DevOps workshop by eMan and Microsoft (13.4.2016)
Xamarin and DevOps workshop by eMan and Microsoft (13.4.2016)
 
Desktop Apps with PHP and Titanium
Desktop Apps with PHP and TitaniumDesktop Apps with PHP and Titanium
Desktop Apps with PHP and Titanium
 
Creating 3 Beautiful Apps At Once - Intro To Xamarin.Forms
Creating 3 Beautiful Apps At Once - Intro To Xamarin.FormsCreating 3 Beautiful Apps At Once - Intro To Xamarin.Forms
Creating 3 Beautiful Apps At Once - Intro To Xamarin.Forms
 
JavaScript Tools Overview
JavaScript Tools OverviewJavaScript Tools Overview
JavaScript Tools Overview
 

Viewers also liked

見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版MOCKS | Yuta Morishige
 
[MindMap]Software Patterns
[MindMap]Software Patterns[MindMap]Software Patterns
[MindMap]Software PatternsSho Ito
 
Design Sprint 概要 / デザインスプリント概要
Design Sprint 概要 / デザインスプリント概要Design Sprint 概要 / デザインスプリント概要
Design Sprint 概要 / デザインスプリント概要Takaaki Umada
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識Tsutomu Sogitani
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】MOCKS | Yuta Morishige
 
これだけは知っておけ!はじめてのAndroidアプリデザイン
これだけは知っておけ!はじめてのAndroidアプリデザインこれだけは知っておけ!はじめてのAndroidアプリデザイン
これだけは知っておけ!はじめてのAndroidアプリデザインschoowebcampus
 

Viewers also liked (7)

見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版見やすいプレゼン資料の作り方 - リニューアル増量版
見やすいプレゼン資料の作り方 - リニューアル増量版
 
[MindMap]Software Patterns
[MindMap]Software Patterns[MindMap]Software Patterns
[MindMap]Software Patterns
 
Design Sprint 概要 / デザインスプリント概要
Design Sprint 概要 / デザインスプリント概要Design Sprint 概要 / デザインスプリント概要
Design Sprint 概要 / デザインスプリント概要
 
しょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedeeしょぼいプレゼンをパワポのせいにするな! by @jessedee
しょぼいプレゼンをパワポのせいにするな! by @jessedee
 
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
ビジネスマン必見!キレイな提案書を作るためのデザインの基礎知識
 
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】【プレゼン】見やすいプレゼン資料の作り方【初心者用】
【プレゼン】見やすいプレゼン資料の作り方【初心者用】
 
これだけは知っておけ!はじめてのAndroidアプリデザイン
これだけは知っておけ!はじめてのAndroidアプリデザインこれだけは知っておけ!はじめてのAndroidアプリデザイン
これだけは知っておけ!はじめてのAndroidアプリデザイン
 

Similar to Typetalk APIを使ったChrome拡張開発ノウハウ #1

Ethereum Smart Contracts on Hyperledger Fabric
Ethereum Smart Contracts on Hyperledger Fabric Ethereum Smart Contracts on Hyperledger Fabric
Ethereum Smart Contracts on Hyperledger Fabric Horea Porutiu
 
Chrome Devtools Protocol via Selenium/Appium (English)
Chrome Devtools Protocol via Selenium/Appium (English)Chrome Devtools Protocol via Selenium/Appium (English)
Chrome Devtools Protocol via Selenium/Appium (English)Kazuaki Matsuo
 
OAuth and OEmbed
OAuth and OEmbedOAuth and OEmbed
OAuth and OEmbedleahculver
 
OAuth con doorkeeper
OAuth con doorkeeperOAuth con doorkeeper
OAuth con doorkeeperSergio Marin
 
Intro to iPhone Development with MonoTouch
Intro to iPhone Development with MonoTouchIntro to iPhone Development with MonoTouch
Intro to iPhone Development with MonoTouchMichael Koby
 
Code Generation with TypeScript
Code Generation with TypeScriptCode Generation with TypeScript
Code Generation with TypeScriptBenny Neugebauer
 
Web Services and Android - OSSPAC 2009
Web Services and Android - OSSPAC 2009Web Services and Android - OSSPAC 2009
Web Services and Android - OSSPAC 2009sullis
 
Understanding gRPC Authentication Methods
Understanding gRPC Authentication MethodsUnderstanding gRPC Authentication Methods
Understanding gRPC Authentication MethodsAnthony Chow
 
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -Naoki Nagazumi
 
External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1) External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1) Volkan Özçelik
 
Cloud Foundry API for Fun and Ops
Cloud Foundry API for Fun and OpsCloud Foundry API for Fun and Ops
Cloud Foundry API for Fun and OpsChris DeLashmutt
 
Ci for i-os-codemash-01.2013
Ci for i-os-codemash-01.2013Ci for i-os-codemash-01.2013
Ci for i-os-codemash-01.2013Kevin Munc
 
API First with Connexion - PyConWeb 2018
API First with Connexion - PyConWeb 2018API First with Connexion - PyConWeb 2018
API First with Connexion - PyConWeb 2018Henning Jacobs
 
OpenAPI development with Python
OpenAPI development with PythonOpenAPI development with Python
OpenAPI development with PythonTakuro Wada
 

Similar to Typetalk APIを使ったChrome拡張開発ノウハウ #1 (20)

API SECURITY
API SECURITYAPI SECURITY
API SECURITY
 
Ethereum Smart Contracts on Hyperledger Fabric
Ethereum Smart Contracts on Hyperledger Fabric Ethereum Smart Contracts on Hyperledger Fabric
Ethereum Smart Contracts on Hyperledger Fabric
 
BugBounty Tips.pdf
BugBounty Tips.pdfBugBounty Tips.pdf
BugBounty Tips.pdf
 
Intro to Puppeteer
Intro to PuppeteerIntro to Puppeteer
Intro to Puppeteer
 
Chrome Devtools Protocol via Selenium/Appium (English)
Chrome Devtools Protocol via Selenium/Appium (English)Chrome Devtools Protocol via Selenium/Appium (English)
Chrome Devtools Protocol via Selenium/Appium (English)
 
OAuth and OEmbed
OAuth and OEmbedOAuth and OEmbed
OAuth and OEmbed
 
OAuth con doorkeeper
OAuth con doorkeeperOAuth con doorkeeper
OAuth con doorkeeper
 
Intro to iPhone Development with MonoTouch
Intro to iPhone Development with MonoTouchIntro to iPhone Development with MonoTouch
Intro to iPhone Development with MonoTouch
 
Code Generation with TypeScript
Code Generation with TypeScriptCode Generation with TypeScript
Code Generation with TypeScript
 
Rhodes
RhodesRhodes
Rhodes
 
Web Services and Android - OSSPAC 2009
Web Services and Android - OSSPAC 2009Web Services and Android - OSSPAC 2009
Web Services and Android - OSSPAC 2009
 
Understanding gRPC Authentication Methods
Understanding gRPC Authentication MethodsUnderstanding gRPC Authentication Methods
Understanding gRPC Authentication Methods
 
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -
アプリ開発で知っておきたい認証技術 - OAuth 1.0 + OAuth 2.0 + OpenID Connect -
 
External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1) External JavaScript Widget Development Best Practices (updated) (v.1.1)
External JavaScript Widget Development Best Practices (updated) (v.1.1)
 
Cloud Foundry API for Fun and Ops
Cloud Foundry API for Fun and OpsCloud Foundry API for Fun and Ops
Cloud Foundry API for Fun and Ops
 
Ci for i-os-codemash-01.2013
Ci for i-os-codemash-01.2013Ci for i-os-codemash-01.2013
Ci for i-os-codemash-01.2013
 
CGI Presentation
CGI PresentationCGI Presentation
CGI Presentation
 
APIs Demystified
APIs DemystifiedAPIs Demystified
APIs Demystified
 
API First with Connexion - PyConWeb 2018
API First with Connexion - PyConWeb 2018API First with Connexion - PyConWeb 2018
API First with Connexion - PyConWeb 2018
 
OpenAPI development with Python
OpenAPI development with PythonOpenAPI development with Python
OpenAPI development with Python
 

More from Sho Ito

Javaと小道具
Javaと小道具Javaと小道具
Javaと小道具Sho Ito
 
Doppel Travel
Doppel TravelDoppel Travel
Doppel TravelSho Ito
 
Startup Concierge
Startup ConciergeStartup Concierge
Startup ConciergeSho Ito
 
第2回Google Hackathon for GAE in 福井 事前事前勉強会
第2回Google Hackathon for GAE in 福井 事前事前勉強会第2回Google Hackathon for GAE in 福井 事前事前勉強会
第2回Google Hackathon for GAE in 福井 事前事前勉強会Sho Ito
 
HTML5時代の技術の恩恵を受けるには
HTML5時代の技術の恩恵を受けるにはHTML5時代の技術の恩恵を受けるには
HTML5時代の技術の恩恵を受けるにはSho Ito
 
AIR2.xとHTML5/CSS3と...
AIR2.xとHTML5/CSS3と...AIR2.xとHTML5/CSS3と...
AIR2.xとHTML5/CSS3と...Sho Ito
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Sho Ito
 
Flex/Flash meets HTML5 Family
Flex/Flash meets HTML5 FamilyFlex/Flash meets HTML5 Family
Flex/Flash meets HTML5 FamilySho Ito
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Sho Ito
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5Sho Ito
 
IEとHTML5とワタシ
IEとHTML5とワタシIEとHTML5とワタシ
IEとHTML5とワタシSho Ito
 
ぎゅ〜っと濃縮、HTML5
ぎゅ〜っと濃縮、HTML5ぎゅ〜っと濃縮、HTML5
ぎゅ〜っと濃縮、HTML5Sho Ito
 
分かった気になるHTML5 〜開発者の視点から〜
分かった気になるHTML5 〜開発者の視点から〜 分かった気になるHTML5 〜開発者の視点から〜
分かった気になるHTML5 〜開発者の視点から〜 Sho Ito
 
[MindMap] A recommendation of the design for developers
[MindMap] A recommendation of the design for developers[MindMap] A recommendation of the design for developers
[MindMap] A recommendation of the design for developersSho Ito
 
ディベロッパーへデザインのススメ
ディベロッパーへデザインのススメディベロッパーへデザインのススメ
ディベロッパーへデザインのススメSho Ito
 
Introduce of Hokuriku Engineer Group
Introduce of Hokuriku Engineer GroupIntroduce of Hokuriku Engineer Group
Introduce of Hokuriku Engineer GroupSho Ito
 
Silverlight development using Eclipse4SL
Silverlight development using Eclipse4SLSilverlight development using Eclipse4SL
Silverlight development using Eclipse4SLSho Ito
 
Profusion of RIAs
Profusion of RIAsProfusion of RIAs
Profusion of RIAsSho Ito
 
創法 - 創造技法
創法 - 創造技法創法 - 創造技法
創法 - 創造技法Sho Ito
 

More from Sho Ito (19)

Javaと小道具
Javaと小道具Javaと小道具
Javaと小道具
 
Doppel Travel
Doppel TravelDoppel Travel
Doppel Travel
 
Startup Concierge
Startup ConciergeStartup Concierge
Startup Concierge
 
第2回Google Hackathon for GAE in 福井 事前事前勉強会
第2回Google Hackathon for GAE in 福井 事前事前勉強会第2回Google Hackathon for GAE in 福井 事前事前勉強会
第2回Google Hackathon for GAE in 福井 事前事前勉強会
 
HTML5時代の技術の恩恵を受けるには
HTML5時代の技術の恩恵を受けるにはHTML5時代の技術の恩恵を受けるには
HTML5時代の技術の恩恵を受けるには
 
AIR2.xとHTML5/CSS3と...
AIR2.xとHTML5/CSS3と...AIR2.xとHTML5/CSS3と...
AIR2.xとHTML5/CSS3と...
 
Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~Attractive HTML5~開発者の視点から~
Attractive HTML5~開発者の視点から~
 
Flex/Flash meets HTML5 Family
Flex/Flash meets HTML5 FamilyFlex/Flash meets HTML5 Family
Flex/Flash meets HTML5 Family
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
Attractive HTML5
Attractive HTML5Attractive HTML5
Attractive HTML5
 
IEとHTML5とワタシ
IEとHTML5とワタシIEとHTML5とワタシ
IEとHTML5とワタシ
 
ぎゅ〜っと濃縮、HTML5
ぎゅ〜っと濃縮、HTML5ぎゅ〜っと濃縮、HTML5
ぎゅ〜っと濃縮、HTML5
 
分かった気になるHTML5 〜開発者の視点から〜
分かった気になるHTML5 〜開発者の視点から〜 分かった気になるHTML5 〜開発者の視点から〜
分かった気になるHTML5 〜開発者の視点から〜
 
[MindMap] A recommendation of the design for developers
[MindMap] A recommendation of the design for developers[MindMap] A recommendation of the design for developers
[MindMap] A recommendation of the design for developers
 
ディベロッパーへデザインのススメ
ディベロッパーへデザインのススメディベロッパーへデザインのススメ
ディベロッパーへデザインのススメ
 
Introduce of Hokuriku Engineer Group
Introduce of Hokuriku Engineer GroupIntroduce of Hokuriku Engineer Group
Introduce of Hokuriku Engineer Group
 
Silverlight development using Eclipse4SL
Silverlight development using Eclipse4SLSilverlight development using Eclipse4SL
Silverlight development using Eclipse4SL
 
Profusion of RIAs
Profusion of RIAsProfusion of RIAs
Profusion of RIAs
 
創法 - 創造技法
創法 - 創造技法創法 - 創造技法
創法 - 創造技法
 

Typetalk APIを使ったChrome拡張開発ノウハウ #1