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
今日から始める Amazon Bedrock AgentCore
Avatar for Har1101 har1101
4
410
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
150
顧客との商談議事録をみんなで読んで顧客解像度を上げよう
Avatar for shibayu36 shibayu36
0
220
usermode linux without MMU - fosdem2026 kernel devroom
Avatar for Hajime Tazaki thehajime
0
230
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
Avatar for Konishi tatsuhiro tatsukoni
0
210
Embedded SREの終わりを設計する　「なんとなく」から計画的な自立支援へ
Avatar for SansanTech sansantech
PRO
3
2.4k
ブロックテーマ、WordPress でウェブサイトをつくるということ / 2026.02.07 Gifu WordPress Meetup
Avatar for Toro_Unit (Hiroshi Urabe) torounit
0
180
AWS Network Firewall Proxyを触ってみた
Avatar for nagisa_53 nagisa53
1
230
コスト削減から「セキュリティと利便性」を担うプラットフォームへ
Avatar for SansanTech sansantech
PRO
3
1.5k
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
180
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
Avatar for oracle4engineer oracle4engineer
PRO
2
140
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
5
1.6k

Featured

See All Featured
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
210
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.6k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
94
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
Avatar for Aleyda Solis aleyda
0
1.9k
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
1.6k
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
Avatar for r-kagaya rkaga
60
42k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
270
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
180

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