最近跟幾個好友 share netflix，從此晚上回家吃飯幾乎就離不開無廣告 netflix 影集追劇人生

為了在大螢幕上播影片，還搬了一台筆電24小時開機當作電視盒使用

netflix 什麼都好，就是那渣一般的字幕大小…

 如果今天在電腦上近近看，字慕大小還算可以，但坐到餐桌稍遠一點

就會覺得字幕黑邊過細，白色過多，字體又太小，本來吃飯時間就不容易集中心神看電視

就會變得更吃力了！

 網路上有個微妙的連結可以進到 netflix 的後台更改字幕樣式、大小

https://www.netflix.com/SubtitlePreferences

實際上調完後，字仍一樣小，完全看不出任何改變

嘗試使用 NflxMultiSubs，也是什麼效果都沒變化

看了評論才發現原來九月後 netflix 改版，這功能就掛了~_~"

 週末追劇越追越不爽…看來是時候展現真正的技術力了

 由於 netflix 是  DRM 影片，數位版權管理影片

一般的截圖會抓不到畫面，所以背景就變黑

首先用 F12 觀察字幕是什麼狀況

發現字幕其實就是圖片，寫死大小的圖片

嘗試調整 width、height，發現圖片是可以縮放的

但影片只要一播，image 這個 tag就會重生

所以這樣改動效果有限

於是...

var script = document.createElement('script');
 script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js';
 script.type = 'text/javascript';
 document.getElementsByTagName('head')[0].appendChild(script);

setTimeout(function(){
  $("head").append(" \
<style> \
image{width:100%;height:70px;} \
image[height='90']{width:100%;height:120px;} \
image[height='95']{width:100%;height:120px;} \
image[height='106']{width:100%;height:120px;} \
image[height='105']{width:100%;height:120px;} \
image[height='108']{width:100%;height:120px;} \
image[height='107']{width:100%;height:120px;} \
</style>");


clearInterval(window['wtf']);
window['wtf']=setInterval(function(){
$("image").attr('x',-50);

},50);
},3000);

簡單寫了一小段 javascript，首先先引入 jquery (這樣比較簡單好寫)

然後3秒後(等jquery讀完)，在 head 裡加入一段 style

圖高為 70px，寬 100%

當圖的屬性高為 90、95、105、106、107、108 (其實這些是雙行字，或是雙行又有雙引號、單引號字)

這時的字高改為 120px

最後再用 setInterval，每50ms 就把 image 的 x 提前個 50

為了避免語法重複執行，所以每次執行前，都把舊的 interval clear 掉

這樣就算語法重複執行，也不會堆疊太多執行緒

 執行前 

 執行後

效果卓越啊...

但如果每次進 netflix 前都要去拿鍵盤複製貼上程式碼，實在掉漆…

所以要研究一下瀏覽器的 extension (plugin) 怎麼開發

首先先去下載範例

https://github.com/GoogleChrome/chrome-extensions-samples

範例中 examples 裡的 page-redder 就很適合拿來練習

 把 page-redder 目錄拉出來，裡面只有二個檔案

 然用進到瀏覽器的 extensions 擴充模組，上面是 brave

chrome、edge 也差不多，現在核心都一樣了

點開「開發人員模式」按左邊載入未封裝項目

 選到 page-redder

 然後在瀏覽器右上的擴充工具鎚子，把剛才裝的 Page Redder 釘選上去，就會多一個「P」

 隨便瀏覽一個網頁，按一下「P」，發現該網頁的背景變紅色了

原來 extension 這麼容易開發啊^_^~

然後就把剛才寫的 Code 簡單改一改，就作寫了一個 my_netflix_sub_plugin

https://github.com/shadowjohn/my_netflix_sub_plugin

使用方法：

1、下載 https://github.com/shadowjohn/my_netflix_sub_plugin/archive/refs/heads/main.zip

2、解壓縮  main.zip

 進到擴充功能

 如果是 chrome ，可以在網址列輸入：

chrome://settings/

右上「打開開發人員模式」，然後選「載入未封裝項目」

 目錄選到解壓縮後，裡面目錄的 3wa_netflix 選擇資料夾

 確定有載進來了

 一樣在選單把剛才裝的 3waNetflix 釘選到工具列

這樣以後看 netflix 覺得字幕太小需要放大，就點一下這個「3」就行了

實際操作的感覺

原來寫 extension 難度不算高，整包 jquery 都可以包進去變成原碼

未來有額外的瀏覽需求也許可以寫些好用的外掛~

總算可以讓字幕變大，躺沙發追劇開心又愉快

2021-12-15 補充：

V0.2 版開發 ok

安裝方式同 V0.1 版，舊版可以先移除再重新安裝

 V0.2 版點「3」之後，滑鼠移到畫面中上方，就會出現設定選單，移開就會消失

 在影片播放時，即可拖動拉Bar來改變字體大小、左右位置

 左

 右

操作範例

2021-12-23 補充：

在歷經 0.3、0.4 版朋友與網友  Tom 回饋心得，新的作法直接採用放大原有高度的比例

大小從 0.1~3 這樣不管單行字、雙行字，都會照同比例放大

另外也使用 localStorage 來紀錄數值

這樣就算下次重開瀏覽器，也能重載最後一次的設定數值

 字體大小改成放大倍數 0.1~3

2021-12-26 補充：

0.5 版作了個比較大的改版

寫著寫著就把 jQuery 3.6.0 移掉，重新寫了一套剛好符合這個專案用的簡易版的 jquery lite

(2022-01-06) V0.6 版：

移除不必要的 console.log，debug 時方便看的內容以後在 release 後應該隱藏。

2022-03-21 補充：

這幾天在家晚上忙沒在追劇，一個高職同學聯絡我說她們家沒放大字幕沒辦法追劇!

打開電視點一點還真的失效了~

晚上有空研究一下是什麼原因

0.7 版也是重要的改版，與舊版不一樣

Netflix 在3月17~3月19左右，將原本中文字幕的圖片，改回文字，預設為 31px 字級

而且採用 static css style 的作法，目前開發的方式只好將原本 text z-index 下移至看不見

然後重新加入自己的 div ，配合 31x使用者調整的字體大小 0.1~3 倍，來達到字幕放大的效果

固定在 bottom 10% 與 always text-align center ，最後再將字幕粗體、加細邊框

最後用 setInterval 一直抓原本 text 的內容來顯示，效果也是滿不錯的~^_^

新加的 div 就與 video tag 同一層，才不會在放大到全螢幕時消失

開發的方式大概就是如此

 新版 V0.7 就不需要調整 X 軸的功能了，字幕利用 CSS 置中效果卓越

2022-04-20 補充：

新版 V0.8 版可以調整字距了

網友 mii 提到想增加「字距」的功能，已開發成功

 V0.8 版

V0.8 版字距調整的參考影片

如果是用 chrome 商店，V0.8 版也上架，昨天才寫，今早就送審過了，效率真不錯 :D

 不小看到 Dcard 有人在討論 3waNetflix ，大家都很想要改字體粗細、字框粗細

在 V0.9 版順手作了

商店連結(呵，雖然是商店，不過羽山這支是完全免費無廣告且開放源始碼的^^)

https://chrome.google.com/webstore/detail/3wanetflix/hpmbbonnlchnbbakdegcbbflbjgganaf

 歷經了 V1.0~V1.5 的改版

感謝 Man 哥發現有些影片的字幕會變重疊，也緊急修正

目前定版的 V1.5 已可以調整

字體大小、字體粗細、字體間距、字框粗細、字幕高度

另外字體顏色與字體邊框的顏色也可以作出區別

這樣看字幕就相當舒適了~~~

  (2022-05-18) V1.6 版：

  https://github.com/shadowjohn/my_netflix_sub_plugin/blob/main/release/V1.6/3wa_netflix.zip

  1、預設的字體顏色：#fff5f8，邊框顏色：#1c5cb0，字體粗細：1.4、字框粗細：10、字幕高度：12，字體大小：1.6、字體間距：12.5

  2、修正在選影片頁時，控制項不能被點選 (有發現在選影片頁時，中間的有時會點不到，修正了)

  3、檢查 chrome 字體置中的問題，檢查正常

有同學反應 Chrome 字體偏右，不過我這看起來還滿正常的

V1.6 版，可以調整的項目增加不少~^_^~

 (2022-06-11) V1.7 版：

  https://github.com/shadowjohn/my_netflix_sub_plugin/blob/main/release/V1.7/3wa_netflix.zip

  1、當使用者使用 1080p 套件時，仍為圖片型文字，調整字幕置中的問題

 如果使用者安裝 1080p 套件，netflix 是圖片型字幕

 V1.7 版，可以調整字體大小、字體Y軸、自動置中

 netflix 不知道為啥寫了 * { letter-spacing: 0!important}

導致 letter-spacing 失效，解決方法就是每次在處理 my3waSubDiv style

把裡面所有的元件都使用 important 約在 736 行

V1.8 修正文字間距問題 

 這二天也在努力開發雙字幕的功能，不過似乎沒這麼容易實作

如果有能量研發，再等我的好消息~

~祝各位追劇愉快~

2022-09-25 Netflix 雙字幕開發心得：https://sunnyriver.3wa.tw/blog/blog.php?id=1986