Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ChromeExtensions_PIXNET

Avatar for CypressKuo CypressKuo
June 24, 2016
Technology
0
73

 ChromeExtensions_PIXNET

ChromeExtensions_PIXNET

Avatar for CypressKuo

CypressKuo

June 24, 2016
Tweet

More Decks by CypressKuo

See All by CypressKuo
Deep-copying.pdf
Avatar for CypressKuo cypresskuo
0
32
CSS_for_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
38
談談_Code_review.pdf
Avatar for CypressKuo cypresskuo
0
44
REST_vs_GraphQL_今夜はご注文はどっち.pdf
Avatar for CypressKuo cypresskuo
0
22
CSS_重構.pdf
Avatar for CypressKuo cypresskuo
0
25
跟上_JS_的腳步-ES2020.pdf
Avatar for CypressKuo cypresskuo
0
28
Core_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
53
這個時代人人都知道的敏捷開發.pdf
Avatar for CypressKuo cypresskuo
0
56
Webassembly.pdf
Avatar for CypressKuo cypresskuo
0
12

Other Decks in Technology

See All in Technology
~Everything as Codeを諦めない~ 後からCDK
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
3
340
30万人の同時アクセスに耐えたい！新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
Avatar for GENDA genda
4
1.3k
プロダクト成長を支える開発基盤とスケールに伴う課題
Avatar for yuu26 yuu26
4
1.3k
20260204_Midosuji_Tech
Avatar for Takuya Yonezawa takuyay0ne
1
150
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
Avatar for adachi.ryo rvirus0817
0
230
Bill One急成長の舞台裏 開発組織が直面した失敗と教訓
Avatar for SansanTech sansantech
PRO
2
370
AIエージェントを開発しよう！-AgentCore活用の勘所-
Avatar for YukiOgawa yukiogawa
0
160
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
Avatar for kekke-n kekke_n
1
410
usermode linux without MMU - fosdem2026 kernel devroom
Avatar for Hajime Tazaki thehajime
0
230
Tebiki Engineering Team Deck
Avatar for Tebiki, Inc. tebiki
0
24k
データの整合性を保ちたいだけなんだ
Avatar for ShoheiMitani shoheimitani
8
3.1k
StrandsとNeptuneを使ってナレッジグラフを構築する
Avatar for やくも yakumo
1
110

Featured

See All Featured
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
32
2.8k
Done Done
Avatar for chrislema chrislema
186
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
830
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
140
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
150
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
1
8.5k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
910
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.3k
HDC tutorial
Avatar for Michiel Stock michielstock
1
380

Transcript

  1. Chrome Extensions 開發入⾨ /14 1 CypressKuo @PIXNET F2E

  2. What are Chrome extensions? ✤ Extensions are small software programs

    that can modify and enhance the functionality of the Chrome browser. ✤ You write them using web technologies such as HTML, JavaScript, and CSS. /14 2

  3. Basic Architecture ✤ manifest.json ✤ icon.png ✤ popup.html ✤ popup.js

    ✤ popup.css /14 3

  4. manifest.json /14 4

  5. Background ✤ persistent background pages ✤ event pages /14 5

  6. Content Script ✤ page's DOM /14 6

  7. Browser Action /14 7

  8. Page Action /14 8

  9. Debugging ✤ console.log is useful ✤ background or content scripts

    /14 9

  10. /14 10

  11. Packaging /14 11

  12. Demo /14 12

  13. References ✤ https://developer.chrome.com/extensions/manifest ✤ https://blog.longwin.com.tw/2014/01/chrome- extensions-plugin-develop-2014/ ✤ http://www.cnblogs.com/guogangj/p/ 3235703.html#t5 ✤

    http://code.tutsplus.com/tutorials/developing- google-chrome-extensions--net-33076 /14 13

  14. Thank you /14 14