Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Messaging APIのメッセージオブジェクトを検証できるChrome拡張機能を作った話
Search
tokku5552
January 24, 2023
Technology
1
130
Messaging APIのメッセージオブジェクトを検証できるChrome拡張機能を作った話
Messaging APIのメッセージオブジェクトを検証できるChrome拡張機能を作った話
tokku5552
January 24, 2023
Tweet
Share
More Decks by tokku5552
See All by tokku5552
他責思考で考える、EMとICの本音
tokku5552
1
130
Google CloudとAWSのコンテナ実行環境比較
tokku5552
0
210
高スループット・低レイテンシを実現する技術
tokku5552
3
14k
AWS CDKのススメ
tokku5552
1
510
FlutterにLINEログインを仕込んで通知メッセージを送る
tokku5552
2
980
AWS CDK × Reactでliffをつくる
tokku5552
1
550
Flutterで単体テストを行う方法とGitHub Actionsを使った自動化
tokku5552
1
100
ネットワーク基礎 - WEBページが表示されるまで
tokku5552
1
270
インフラエンジニアのお仕事(オンプレ)
tokku5552
0
150
Other Decks in Technology
See All in Technology
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.5k
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
300
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
2
240
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
620
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
220
大規模サーバーレスAPIの堅牢性・信頼性設計 〜AWSのベストプラクティスから始まる現実的制約との向き合い方〜
maimyyym
9
4.5k
プロポーザルのコツ ~ Kaigi on Rails 2025 初参加で3名の登壇を実現 ~
naro143
1
220
プレーリーカードを活用しよう❗❗デジタル名刺交換からはじまるイベント会場交流のススメ
tsukaman
0
130
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
150
今この時代に技術とどう向き合うべきか
gree_tech
PRO
0
330
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
0
200
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
260
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Side Projects
sachag
455
43k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
We Have a Design System, Now What?
morganepeng
53
7.8k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
Messaging APIのメッセージオブジェク トを検証できるChrome拡張機能を作っ た話 LINEDC 新年LT会 2023/1/24
自己紹介 とっく(@tokkuu) • ミロゴス株式会社のエンジニア • TypeScript(Node.js/Next.js/AWS CDK) • Flutter/Firebase •
元SIerのインフラエンジニア • 元バンドマン • 2歳の娘のパパ 2
はじめに • このスライドの元ネタ ◦ Reactでサクッとchromeの拡張機能を作る ◦ 【LINE API】Messaging APIのメッセージオブジェクトを検証する APIを試してみた
◦ Next.jsでLINE Messaging APIのバリデーターを作って Chrome拡張で使う • 対象リポジトリ ◦ https://github.com/milogos/validate-line-message-chrome-extension 3
LINE Messaging API LINE Message Validator - Chrome ウェブストア 4
Chrome拡張の作り方 • Google Chromeで使える拡張機能 は自分で開発できる • SPAで作れればなんでもOK (React/Vue/Angular/Flutter Web) •
今回はNext.jsで • ホスティングは不要だが、クライアン トコードは全て公開となる(ブラウザ の保存領域) • ストアへのアップロードはGoogle Developperへの登録が必要です。 ($5くらいかかります) 5
Chrome拡張の作り方 • →のようなポップアップを開くタイプ • next.jsでnext exportして生成した ファイルとmanifest.jsonという拡張 機能の定義ファイルをzipにしてスト アにアップロードする 6
API検証部分 • MessagingAPI検証用エンドポイント に送る関数 • Messaging APIリファレンス | LINE Developers
• 【LINE API】Messaging APIのメッ セージオブジェクトを検証するAPIを 試してみた - Qiita 7
chrome.storage • chrome.storageを使うとブラウザに 情報を保存しておける • 今回は、一度入力したチャネルアク セストークンを記憶させるために使用 • chrome.storage -
Chrome Developers 8
ストアへのアップロード • ストアへのアップロードは mainへマージした タイミングでGitHub Actionsから自動実行 • validate-line-message-chrome-extension /on_merge.yml •
EXTENSION_IDやCLIENT_IDは所定の手 順に沿って実行 • chrome-webstore-upload/How to generate Google API keys.md 9
まとめ • Chrome拡張機能はどなたでも簡単に開発できます。SPAが使えるものであれば ReactでもVueでもOK • LINE APIでOAMから配信したり、ちょっと何かを確かめたいときにサクッとAPI実行 できるようにしておくと良さげ • publicリポジトリにしているのでプルリクお待ちしています!!
◦ https://github.com/milogos/validate-line-message-chrome-extension ご清聴ありがとうございました