國立成功大學

推一下自己開發的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
3865
回應 92
文章資訊
Logo
每天有 74 則貼文
共 92 則留言
輔仁大學
獻上我的膝蓋 但是低卡只有劈腿懷孕文會上熱門
匿名
這則留言已被刪除
已經刪除的內容就像 Dcard 一樣,錯過是無法再相見的!
淡江大學 資訊工程學系
身為碼農,我買了兩個更大的螢幕(?
原 PO - 國立成功大學
B1 那是時候來想個農場標題了(X B3 乾 超想入手三星43吋 可惜桌子不夠大...
Youtube 不是有劇院模式嗎 對了 我的套件都審核好久才過 請問你平均是幾天呢
東吳大學
推推!
原 PO - 國立成功大學
B5 我比較喜歡Bilibili那種網頁全屏的劇院模式 看起來比較爽 2天左右吧 開發chrome插件差不多1年!?
東吳大學
朝聖
東方設計大學 美術工藝系
請收下我的膝蓋🙇🏻‍♀️
逢甲大學
我要舔爆你
國立中正大學
推!!!
國立中山大學 電機工程學系
強者
國立高雄第一科技大學
是once!
國立屏東科技大學
先收藏在說!太厲害了
B7 感謝你的回應 我前陣子第一個審了四天 我都懷疑是不是哪裡弄錯了 你的套件我都裝了 還不錯用
元智大學 資訊工程學系
pictureInPicture是個好用的功能,youtube兩下右鍵可以選子母畫面
原 PO - 國立成功大學
B17 但畫面最大只有螢幕的1/4而已 不夠爽
東吳大學
推~寫網站應該也很好用🙏🏻🙏🏻
已收藏!回家再來試試看~讚一個!
中原大學 會計學系
收藏起來回去用,謝謝原Po💓
僑光科技大學
已收藏~
世新大學
跪著用!!!
輔仁大學
看不懂但是很厲害幫推
輔仁大學
看不懂但是很厲害幫推
羅斯托克大學
感謝大大!!
長庚科技大學 護理系
看起來好難哦
國立高雄海洋科技大學
好文啊🙏🏻
實踐大學 資訊科技與管理學系
身為新手碼農我還不先舔爆((跪
國立成功大學
同為成大生 有沒有可以自學的資源之類的 可以提供我這個菜雞參考呀
南臺科技大學
阿阿阿阿阿 就是這個 我一直覺得youtube的劇院模式超爛 94想看bilibili那種網頁全螢幕 感恩原po 讚嘆原po
B30 我當初開發有參考下面這位的文章 你也可以看看 剛好下周有教學講座 如果有興趣的話 買人家的經驗 是最快的方式
東海大學
高中同學必須推一個 👍
原 PO - 國立成功大學
B30 對程式開發有一定基礎後 就直接從範例學習撰寫模式、架構等... 再開發出自己想做的東西當作驗收 這邊有很多chrome擴充功能的範例:
當然 前提是要多Google、不排斥看英文文件、多上StackOverflow找解答
原 PO - 國立成功大學
B33 你誰~
東海大學
6666666
文藻外語大學
雖然我看不懂 總之先推
國立屏東大學
我最近專題截圖才在覺得上面很煩,只差一點點就能截到全部 你是救星🤣
世新大學
B15
國立臺灣藝術大學
給推
國立雲林科技大學 電機工程系
看到子瑜啦!!! 放錯重點😂
臺北醫學大學
6666666
大葉大學
看到馬上擴充!!!!!
國立屏東科技大學
太神啦
中臺科技大學
我的膝關節壞了 來幫我換一個
國立臺灣大學
最近正在被程式期末企劃給謀殺 我要死了 原po你超狂
南臺科技大學
有Twice有推(重點錯誤
匿名
這則留言已被刪除
已經刪除的內容就像 Dcard 一樣,錯過是無法再相見的!
仁德醫護管理專科學校
跪!