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

ChromeExtensions_PIXNET

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for CypressKuo CypressKuo
June 24, 2016
Technology
74
0

 ChromeExtensions_PIXNET

ChromeExtensions_PIXNET

Avatar for CypressKuo

CypressKuo

June 24, 2016

More Decks by CypressKuo

See All by CypressKuo
Deep-copying.pdf
Avatar for CypressKuo cypresskuo
0
33
CSS_for_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
39
談談_Code_review.pdf
Avatar for CypressKuo cypresskuo
0
46
REST_vs_GraphQL_今夜はご注文はどっち.pdf
Avatar for CypressKuo cypresskuo
0
23
CSS_重構.pdf
Avatar for CypressKuo cypresskuo
0
27
跟上_JS_的腳步-ES2020.pdf
Avatar for CypressKuo cypresskuo
0
29
Core_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
54
這個時代人人都知道的敏捷開發.pdf
Avatar for CypressKuo cypresskuo
0
60
Webassembly.pdf
Avatar for CypressKuo cypresskuo
0
13

Other Decks in Technology

See All in Technology
AIエージェント時代に必要な オペレーションマネージャーのロールとは
Avatar for KentaroFujii kentarofujii
0
230
GitHub Actions侵害 — 相次ぐ事例を振り返り、次なる脅威に備える
Avatar for GMO Flatt Security flatt_security
11
6.9k
The essence of decision-making lies in primary data
Avatar for 株式会社カミナシ kaminashi
0
190
15年メンテしてきたdotfilesから開発トレンドを振り返る 2011 - 2026
Avatar for giginet giginet
PRO
2
250
Move Fast and Break Things: 10 in 20
Avatar for Rami McCarthy ramimac
0
110
スケーリングを封じられたEC2を救いたい
Avatar for いのうえ senseofunity129
0
130
Cursor Subagentsはいいぞ
Avatar for Yuji Yamaguchi yug1224
2
130
自分をひらくと次のチャレンジの敷居が下がる
Avatar for aki sudoakiy
3
1.1k
Tour of Agent Protocols: MCP, A2A, AG-UI, A2UI with ADK
Avatar for Mete Atamel meteatamel
0
170
タスク管理も1on1も、もう「管理」じゃない - KiroとBedrock AgentCoreで変わった“判断の仕事”
Avatar for Yusuke Shimizu yusukeshimizu
0
150
やさしいとこから始めるGitHubリポジトリのセキュリティ
Avatar for Yuta Matsumura tsubakimoto_s
3
2.1k
「できない」のアウトプット 同人誌『精神を壊してからの』シリーズ出版を 通して得られたこと
Avatar for comi comi190327
3
430

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Mozcon NYC 2025: Stop Losing SEO Traffic
Avatar for Sam Torres samtorres
0
190
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
2
610
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
460
New Earth Scene 8
Avatar for Sydney Stone popppiees
2
1.9k
Lightning talk: Run Django tests with GitHub Actions
Avatar for Sarah Abderemane sabderemane
0
160
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.5k
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
370
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
850
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
49
9.9k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k

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