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

ChromeExtensions_PIXNET

Avatar for CypressKuo CypressKuo
June 24, 2016
Technology
0
71

 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
28
CSS_for_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
35
談談_Code_review.pdf
Avatar for CypressKuo cypresskuo
0
41
REST_vs_GraphQL_今夜はご注文はどっち.pdf
Avatar for CypressKuo cypresskuo
0
21
CSS_重構.pdf
Avatar for CypressKuo cypresskuo
0
22
跟上_JS_的腳步-ES2020.pdf
Avatar for CypressKuo cypresskuo
0
24
Core_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
47
這個時代人人都知道的敏捷開發.pdf
Avatar for CypressKuo cypresskuo
0
54
Webassembly.pdf
Avatar for CypressKuo cypresskuo
0
11

Other Decks in Technology

See All in Technology
Tech-Verse 2025 Global CTO Session
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
800
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
Avatar for すてにゃん stefafafan
0
140
CI/CD/IaC 久々に0から環境を作ったらこうなりました
Avatar for Kaz Watanabe kaz29
1
190
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
Avatar for kazzpapa3 kazzpapa3
2
570
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
Avatar for BrainPad brainpadpr
1
170
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
Avatar for Nagisa Yata nyata
0
180
Understanding_Thread_Tuning_for_Inference_Servers_of_Deep_Models.pdf
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
140
SalesforceArchitectGroupOsaka#20_CNX'25_Report
Avatar for atomica7sei atomica7sei
0
240
KubeCon + CloudNativeCon Japan 2025 Recap
Avatar for Ren ren510dev
1
220
CursorによるPMO業務の代替 / Automating PMO Tasks with Cursor
Avatar for Motoyoshi Kosei motoyoshi_kakaku
1
470
SpringBoot x TestContainerで実現するポータブル自動結合テスト
Avatar for 株式会社出前館 demaecan
0
110
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
Avatar for hiro-torii hiro_torii
0
130

Featured

See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
53
2.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
229
22k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
331
24k
BBQ
Avatar for Matthew Crist matthewcrist
89
9.7k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
507
140k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.6k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
36
2.8k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.1k

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