iT邦幫忙

鐵人檔案

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

Chrome extension 學習手札 系列

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

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

Chrome extension 學習手札 11 - 基本實作 - 番茄鐘 part6

今天應該是番茄鐘的最後一天了,由於卡了一點bug,原本打算四天解決的番茄鐘拖了六天orz。 本日目標: 使用自定義頁面與chrome.stroage 製作一個編...

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

Chrome extension 學習手札 12 - 腳本實作 - 準備&介紹web Request

昨天已經把番茄鐘的整個功能完善了,其他的細節與防呆就不多處理了,如果有興趣的人可以依照連結去github下載下來玩看看,等到後面一點我們再來把作品試著打包與發佈...

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

Chrome extension 學習手札 13- 腳本實作 - HTTP自動認證(HTTP Authentication)

今天我們要來時做一個HTTP自動認證的功能,在這之前我們簡單介紹一下 HTTP Authentication 是W3C在HTTP/1.0中定義的認證方式,如果網...

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

Chrome extension 學習手札 14 - 腳本實作 - 安全性防護網

今天要繼續著學習怎麼運用 chrome.webRequest 功能,以及blocking的運用, 而且剛好工程師的工作經常需要瀏覽網站,所以有可能會不小心點到不...

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

Chrome extension 學習手札 15 - 腳本實作 - Youtube 自定義風格

今天我們要來學內容腳本(content_script),內容腳本就是一個可以把js與css嵌入到其他網站中的功能, 根據官方說明,可以套用的chrome.api...

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

Chrome extension 學習手札 16 - 腳本實作 - 字體轉換器

昨天我們教大家怎麼學習使用內容腳本調整CSS樣式, 但其實這樣的調整太不彈性,無法隨時調整你想要的樣式風格, 所以我們今天再往這個議題深入發展,教大家怎麼用另外...

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

Chrome extension 學習手札 17 - 腳本實作 - 臺鐵時刻表查詢系統 - 前言

前言 這幾天已經大概學習到整個Chrome Extension的開發模式了,所以我們應該要來綜合一下我們學到的技術, 從UI頁面到後台腳本以及內容腳本,我們用一...

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

Chrome extension 學習手札 18 - 腳本實作 - 臺鐵時刻表查詢系統 - part 1

今天要來切台鐵功能的模擬UI,由於此功能頁面頗多,所以我們使用 Vue UI 來切版 首先我們要實現的是搜尋時刻功能,所以我們要先切出三個畫面的版 就沿用之前番...

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

Chrome extension 學習手札 19 - 腳本實作 - 臺鐵時刻表查詢系統 - part 2

今天就不廢話了,繼續回到coding 首先,我們還是先建立好一個乾淨的專案,暫定有以下資料 而 store/train.json 裡則是放著今天整理好的...

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

Chrome extension 學習手札 20 - 腳本實作 - 臺鐵時刻表查詢系統 - part 3

前言 今天,我們要來使用vue開發我們的浮動頁面(Popup page),正常狀況下會這樣使用 <body> <script src=...

2019-10-01 ‧ 由 崔斯 分享