iT邦幫忙

鐵人檔案

第 11 屆 iThome 鐵人賽
回列表
Modern Web

Chrome extension 學習手札 系列

記錄個人的學習歷程,並且整理成三十天循序漸進的文章,可以與網路上的高手們切磋。

鐵人鍊成 | 共 30 篇文章 | 21 人訂閱 訂閱系列文 RSS系列文
DAY 1

Chrome extension 學習手札 01 - 介紹與前言

前言 大家好,我是一位前端新手Tris,由於曾經在side project 以及工作上接觸過這個應用程式,進而更深入的研究以後發現chrome支援度非常的高,對...

2019-09-12 ‧ 由 崔斯 分享
DAY 2

Chrome extension 學習手札 02 - 功能架構

Chrome Extension - 功能架構 首先跟大家介紹的是 Chrome Extension 的架構,我們要先了解一個基本的架構是長怎麼樣的,Chrom...

2019-09-13 ‧ 由 崔斯 分享
DAY 3

Chrome extension 學習手札 03 - 傑出的起手

昨天與大家說明過了五大組件,今天就是要開始開發一個實際專案,我建立了一個空白的專案供大家下載,裡面有了一個最基本的資料架構,接下來的操作都會以這個專案開發。 檔...

2019-09-14 ‧ 由 崔斯 分享
DAY 4

Chrome extension 學習手札 04 - Chrome API 介紹

昨天我們已經把空的專案掛起來使用了,接下來我們要來了解組件之間怎麼溝通以及如何運用chrome的api,而chrome api 有非常多的功能,如果要看的話可以...

2019-09-15 ‧ 由 崔斯 分享
DAY 5

Chrome extension 學習手札 05 - Resize 視窗

前幾天都在理論,就是為了接下來的實戰做準備,而我們未來會一直開發有趣或實用的功能,並且都以chrome api為開發核心,而今天的實戰主題就是: Resize視...

2019-09-16 ‧ 由 崔斯 分享
DAY 6

Chrome extension 學習手札 06 - 基本實作 - 番茄鐘 part1

今天要來實作的作品為蕃茄鐘,由於chrome extension有背景處理、時間API、浮動視窗,根本就是一個很適合做番茄鐘的應用程式阿!所以我們就來一步一步完...

2019-09-17 ‧ 由 崔斯 分享
DAY 7

Chrome extension 學習手札 07 - 基本實作 - 番茄鐘 part2

首要目標:製作一個icon,並且使用計時器讓我們計算工作時間,而且在每分鐘或暫停等動作的時候改變圖示的文字 好的首先,我就隨便用XD做一個很簡便的番茄icon...

2019-09-18 ‧ 由 崔斯 分享
DAY 8

Chrome extension 學習手札 08 - 基本實作 - 番茄鐘 part3

本日目標: 完成選項頁面,顯示暫停或開始計時,讓使用者可以自己設定是否要開始計時 首先,我們要讓選項頁面可以跑出來,這時我們有一個API使用 chrom...

2019-09-19 ‧ 由 崔斯 分享
DAY 9

Chrome extension 學習手札 09 - 基本實作 - 番茄鐘 part4

本日目標: 把整個蕃茄鐘循環完成 因為昨天已經用選項腳本把按鈕事件傳送到到後台了 port.postMessage({func: 'switchAlarm'...

2019-09-20 ‧ 由 崔斯 分享
DAY 10

Chrome extension 學習手札 10 - 基本實作 - 番茄鐘 part5

本日目標: 利用contextMenus功能開發應用 新增右鍵功能,開始、暫停、停止、重新循環 首先,我們要開通chrome.contextMenus...

2019-09-21 ‧ 由 崔斯 分享