推一下自己開發的Chrome擴充功能插件
2019年12月12日 20:01
#region 前言
首先先附上開發人權圖
身為一個專業的軟體工程師
怎麼會沒有開發來自High的小工具呢
這次要介紹兩個擴充插件就是
(1)無邊框視窗
(2)劇院模式看影片Pro
(最近使用人數突然上升...可能有必要寫個教學文...
#endregion
#region (1)無邊框視窗
1.開發原因:
身為碼農(!?)
開發程式時常參考資料
整個電腦螢幕可能就會變成像這樣...
(我是使用21:9的螢幕)
覺得瀏覽器的頁籤、書籤列很礙眼...
(時常使用書籤列所以不考去關閉它)
所以就想開發一個只顯示網頁內容的視窗
2.安裝教學:
步驟1: 先到Chrome線上商店將擴充功能"加到Chrome": 
步驟2: 重新開啟瀏覽器, 才能讓擴充功能正常運作
3.使用教學:
方法1: 以無邊框視窗開啟「目前瀏覽器」的網頁
(1)瀏覽隨便一個網頁(以Dcard為例)並點擊擴充功能按鈕
(2)就會以無邊框視窗開啟當前網頁
方法2: 以無邊框視窗開啟「超連結」的網頁
(1)找到隨便一個超連結(以Dcard為例)
(2)滑鼠右鍵點擊「以無邊框視窗開啟」
(3)就會以無邊框視窗開啟超連結網頁
4.擴充功能選項:
(1)滑鼠右鍵擴充功能按鈕
(2)點擊「選項」, 將會開啟擴充功能選項頁面
(3)可自行設定無邊框視窗的大小, 設定完後點擊Save即可
5.使用結果:
得到一個乾淨又舒服的畫面~
#endregion
#region (2)劇院模式看影片Pro
1.開發原因:
觀看網頁(Ex: Youtube, Facebook)上的影片時
不想開啟全螢幕
但又覺得影片畫面太小
於是就參考了bilibili的影片顯示模式
試著寫出一個可以達到同樣效果的插件
2.開發歷程:
其實在開發這插件之前
已經開發過2個版本分別為v1、v2
嘗試使用不同方法來達到相同目的
v1: 搜尋網頁中影片元素, 並改變網頁元素的Style來達到此效果
v2: 擷取網頁資料傳遞時的影片資訊, 開啟擴充插件的影片播放器頁面, 並將影片資訊輸入到播放器中, 來達到此效果
但以上方法並非適用所有網頁
(常用的網頁基本上都支援, Ex: U2, FB,...)
在某些特別的網頁偶爾會有神奇的Bug發生...
於是就讓我思考有沒有治標的方法
TMD不久後恰巧讓我碰到一個神奇的解法
也就是此插件誕生的原理xD
但我不想細說, 怕被Google Ban掉
3.安裝教學:
步驟1: 先到Chrome線上商店將擴充功能"加到Chrome": 
步驟2: 重新開啟瀏覽器, 才能讓擴充功能正常運作
4.使用教學:
(1)瀏覽隨便一個包含影片的網頁(以Youtube為例)點擊擴充插件按鈕
※理論上任何有"全螢幕"功能的影片都能正常運作, 不限Youtube
(2)確定紅框1處的擴充按鈕轉為紅色及紅框2處出現神奇的圖示再點擊影片全螢幕的按鈕
(3)就可以欣賞各種影片啦
(更)下圖為Facebook影片使用效果
(更)下圖為巴哈動畫瘋影片使用效果
5.注意事項:
(1)
為了方便各位快速使用
本插件設有開啟/關閉的快捷鍵: Ctrl+Shift+F
也可於Chrome的擴充頁面自行設定快捷鍵~
(2)
當開啟擴充功能時(按鈕為紅色)
多少會占用一些電腦效能
我已經盡量條校使其CPU使用率接近1%甚至更低
但為了確保各位電腦能夠更無負擔的運作
基本上我有加入自動關閉擴充功能(按鈕為灰色)的機制
(3)
若你想要使用原本全螢幕看影片的功能
只要關閉擴充功能(按鈕為灰色)即可
#endregion
#region 結語
有任何使用上的疑問
or 建議
or 技術交流
or 嘴砲
都以在下方留言哦
#endregion
