輕鬆當網站駭客﹍在任意網頁植入 JS/CSS 程式碼(Chrome套件)

為了避免誤解，首先對標題「駭客」一詞進行說明，這裡指的是「hacker」一詞，可參考「維基關於駭客的定義」：

• 駭客（英語：Hacker)是指對設計、程式設計和電腦科學方面具高度理解的人
• 在業餘電腦DIY方面，「駭客」是指研究如何修改電腦相關產品的業餘愛好者。
• 中文音譯「駭」字總使人對駭客有所誤解，真實的駭客主要是指技術高超的程式設計師，而「劊客」（Cracker）才是專指對電腦系統及網路進行惡意破壞的人。

本篇的意思當然是指「網站 hacker」，針對某些網頁進行修改、微調、優化，而非進行破壞、竊取機密資訊等犯罪行為的「網站 cracker」。 最近在 YouTube 網站進行操作時，長期下來開始覺得某些流程過於累贅，例如我想搜尋特定關鍵字的這些影片：

• 播放清單
• 大於20分鐘影片
• 直播中
• 最新影片

總是得先跑完一次搜尋結果，然後點開「篩選器」，找到以上選項再點擊，至少得花費三個動作才能完成。而換另一個關鍵字搜尋時，又需重複以上同樣的流程，長期下來覺得浪費時間。 於是想著手對 YouTube 網頁進行客製化修改，將常用的篩選項目在搜尋前，便可在網頁上顯示出來供選擇。為了達到這個需求，找到一個不錯的 Chrome 套件，可在任意網頁植入 Javascript/CSS 程式碼，如此一來自行改造各大知名網站都成了非常簡單的事。 順外一提，本篇的內容適合前端工程師、熟悉 JS/CSS 的使用者閱讀，不適合不懂程式碼的新手操作。

一、網頁植入程式碼的作法比較

過去我針對「瀏覽器及網頁植入程式碼」做過不少工具，大部分都是書籤工具，當需要執行特定功能時，點擊書籤可立即執行程式並看到效果：

1. 破解網頁「鎖右鍵+防複製」
2. Emoji 表情符號輸入小幫手
3. 看 YouTube 影片不被廣告中斷
4. 調整愛奇藝 WeTV 芒果tv Bilibili 字幕大小

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」大功告成

2. 執行效果 來看看我寫的 YouTube 工具效果吧，如上圖，進入 YouTube 後就會自動出現右上角紅框處的選項按鈕。 直接選擇「清單」，搜尋就只會出現對應的播放清單，要搜尋「直播」也很方便。

四、應用方式

這個 chrome 外掛可以做的事太多了，就看想像力有多少了。另外提供幾個我的應用方式：

• 前面提到的「破解網頁鎖右鍵+防複製」，只要作用網址填入 "*.*"，就能在所有網站執行了
• 前面提到的「調整字幕大小」功能，由於必須在多個網站執行(愛奇藝 WeTV 芒果tv Bilibili)，那麼作用網址需要填入多個網站，並用小寫逗號 "," 隔開即可
• 如果需要常常填寫某個頁面的表單(搶票?)，例如姓名、電話、住址...這類繁瑣的文字，可以用這個工具寫 JS，自動填入例行性的內容，將來填表單就輕鬆了，一切自動化完成！

更多 Chrome 相關套件：