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

ChromeExtensions_PIXNET

Avatar for CypressKuo CypressKuo
June 24, 2016
Technology
75
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
41
CSS_for_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
46
談談_Code_review.pdf
Avatar for CypressKuo cypresskuo
0
52
REST_vs_GraphQL_今夜はご注文はどっち.pdf
Avatar for CypressKuo cypresskuo
0
27
CSS_重構.pdf
Avatar for CypressKuo cypresskuo
0
30
跟上_JS_的腳步-ES2020.pdf
Avatar for CypressKuo cypresskuo
0
35
Core_Web_Vitals.pdf
Avatar for CypressKuo cypresskuo
0
61
這個時代人人都知道的敏捷開發.pdf
Avatar for CypressKuo cypresskuo
0
65
Webassembly.pdf
Avatar for CypressKuo cypresskuo
0
17

Other Decks in Technology

See All in Technology
「早く出す」より「事業に効く」 ── 顧客の業務サイクルから逆算するAI時代の二重ループ開発と「変化の設計者」 / devsumi2026
Avatar for Rakus_Dev rakus_dev
1
400
ruby.wasmとPicoRuby.wasmに対応した仮想DOMライブラリを作ってる話 #kaigieffect_kaigi
Avatar for sue445 sue445
PRO
0
150
公式ドキュメントの歩き方etc
Avatar for あべ coco_se
1
120
誤解だらけの開発生産性 / Myths and Misconceptions about Developer Productivity
Avatar for Masato Ishigaki / 石垣雅人 i35_267
2
810
Gen3R: 3D Scene Generation Meets Feed-Forward Reconstruction
Avatar for Spatial AI Network spatial_ai_network
0
130
AIコード生成×サプライチェーン攻撃 — PHPが直面する“二重の信頼問題
Avatar for Shinya Saita shinyasaita
0
210
ボーイスカウトルールでメモリやスキルを改善しよう
Avatar for azukiazusa azukiazusa1
4
1.5k
タスクの複雑さでモデルを選ぶ ── Thompson Samplingで動かす“トークン/コスト最適化
Avatar for satoh-y-0323 satohy0323
0
570
Devsumi 2026 Summer 人もAIも使える共通基盤を事業の加速装置にする～デザインシステム運用に学ぶ組織レバレッジ～ 渡辺 凌央
Avatar for LegalOn Technologies, Inc legalontechnologies
PRO
1
240
AI時代のYAGNI：「爆速で無駄になった機能」からの学び / 20260720 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
3
320
変更し続けられるシステムをどう保つか — AI時代のSSoTという設計原則
Avatar for かわうそ kawauso
0
150
マルチアカウント環境でSecurity Hubの運用、その後どうなった？ / SRE NEXT 2026 miniLT会
Avatar for GENDA genda
0
100

Featured

See All Featured
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
55
12k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
191
11k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
1
2.2k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.5k
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.4k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
220
My Coaching Mixtape
Avatar for mlcsv mlcsv
0
170
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon Słowik szymonslowik
1
1.2k
Have SEOs Ruined the Internet? - User Awareness of SEO in 2025
Avatar for Akash Hashmi akashhashmi
0
400

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