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
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
Avatar for khmoryz khmoryz
0
180
ClickHouseはどのように大規模データを活用したAIエージェントを全社展開しているのか
Avatar for Miki Matsumoto mikimatsumoto
0
230
インフラエンジニア必見!Kubernetesを用いたクラウドネイティブ設計ポイント大全
Avatar for 高棹大樹 daitak
1
360
CDKで始めるTypeScript開発のススメ
Avatar for つくぼし tsukuboshi
1
400
今日から始める Amazon Bedrock AgentCore
Avatar for Har1101 har1101
4
410
Context Engineeringの取り組み
Avatar for nutslove nutslove
0
340
GitLab Duo Agent Platform × AGENTS.md で実現するSpec-Driven Development / GitLab Duo Agent Platform × AGENTS.md
Avatar for Niishi Kubo n11sh1
0
130
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
Avatar for adachi.ryo rvirus0817
0
230
Ruby版 JSXのRuxが気になる
Avatar for SansanTech sansantech
PRO
0
150
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
6.8k
~Everything as Codeを諦めない~ 後からCDK
Avatar for mu7889yoon / Yuta Nakamura mu7889yoon
3
340
AI駆動PjMの理想像 と現在地 -実践例を添えて-
Avatar for オカムラ masahiro_okamura
1
110

Featured

See All Featured
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
190
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.3k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
9.7k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
180
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
91
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
130
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
182
10k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k

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