為了避免誤解，首先對標題「駭客」一詞進行說明，這裡指的是「hacker」一詞，可參考「維基關於駭客的定義」：
- 駭客（英語：Hacker)是指對設計、程式設計和電腦科學方面具高度理解的人
- 在業餘電腦DIY方面，「駭客」是指研究如何修改電腦相關產品的業餘愛好者。
- 中文音譯「駭」字總使人對駭客有所誤解，真實的駭客主要是指技術高超的程式設計師，而「劊客」（Cracker）才是專指對電腦系統及網路進行惡意破壞的人。
- 播放清單
- 大於20分鐘影片
- 直播中
- 最新影片
一、網頁植入程式碼的作法比較
過去我針對「瀏覽器及網頁植入程式碼」做過不少工具，大部分都是書籤工具，當需要執行特定功能時，點擊書籤可立即執行程式並看到效果： 1. 適合書籤的型態以上的工具，第 2、第 3 都是有需要時才執行，並非進入特定網站後一定要執行。如果強制進入網站後總是執行，反而成效不佳，所以維持書籤的形式就好。 2. 適合進入網站立即執行的型態第一個工具「破解網頁鎖右鍵+防複製」，非常適合進入所有網站後立即執行，剛好本篇介紹的 Chrome 套件允許設定「在所有網站都執行」，所以可以從原本的書籤改用 Chrome 套件來執行。 最後一個「調整字幕大小」的功能，也是進入特定網站後便可執行，如果改用本篇的 Chrome 外掛直接將程式碼植入網站(愛奇藝 WeTV 芒果tv Bilibili)，就可省去點擊書籤的動作與時間，會方便許多。 本篇客製化 YouTube 篩選器的需求，只要一進入 YouTube 網站就可執行，點擊書籤反而多了一個累贅的動作，所以還是交給 Chrome 套件自動為 YouTube 網站植入 JS/CSS 會比較方便。二、「User JavaScript and CSS」介紹
1. 安裝 Chrome 套件- Chrome 應用程式商店網址：User JavaScript and CSS
安裝完畢後：
- A：點擊 Chrome 右上角此套件圖示
- B：點擊齒輪圖示，即可進入設定畫面
點擊「Add new site」即可進行操作，之後可接續「三、操作流程」。
上圖可看到我完成了兩個工具「右鍵」與「YouTube」，這裡可選擇是否「啟用/關閉」該工具。
2. 功能介紹
選單切換到「Libraries」可選擇 JS 函式庫，上圖可看到預設載入了 jQuery 3(不需要也可移除)，如果還需要引用其他函式庫，填入名稱、JS 外連網址，再按「Add new」即可。
選單切換到「Documentation」可看到簡單的說明書內容：
- 網址除了可填單一網站，還能使萬用字元「星號」(*)，彈性非常大
- 說明了 JS 會等 DOM 載入後才執行，確保能讀取到頁面上的內容
三、操作流程
1. 操作說明
接續前面點擊「Add new site」後的操作畫面：
- A：為你的程式命名
- B：填入程式要執行的網址，如前面提到的，可使用萬用字元
- C：在這個區塊填入 JS 程式碼。
- 必須稱讚一下這個編輯器，可以看得出是資深工程師的傑作
- 輸入 JS 單字會有提示，有自動完成功能，避免輸入錯誤
- 上圖也可看到，程式都可以收合，操作很舒服
- 全選程式碼後還能用熱鍵
ctrl+[ 、ctrl+] 進行縮排
- D：在這個區塊填入 CSS 碼，不需要 CSS 就不用填入
- E：完畢後一定要點這裡的選項按鈕，勾選需要的項目，否則程式是無法執行的。
- F：最後按「Save」大功告成
來看看我寫的 YouTube 工具效果吧，如上圖，進入 YouTube 後就會自動出現右上角紅框處的選項按鈕。
直接選擇「清單」，搜尋就只會出現對應的播放清單，要搜尋「直播」也很方便。
四、應用方式
這個 chrome 外掛可以做的事太多了，就看想像力有多少了。另外提供幾個我的應用方式：- 前面提到的「破解網頁鎖右鍵+防複製」，只要作用網址填入 "*.*"，就能在所有網站執行了
- 前面提到的「調整字幕大小」功能，由於必須在多個網站執行(愛奇藝 WeTV 芒果tv Bilibili)，那麼作用網址需要填入多個網站，並用小寫逗號 "," 隔開即可
- 如果需要常常填寫某個頁面的表單(搶票?)，例如姓名、電話、住址...這類繁瑣的文字，可以用這個工具寫 JS，自動填入例行性的內容，將來填表單就輕鬆了，一切自動化完成！
更多 Chrome 相關套件：