前言
常用Youtube的用戶就會知道，不知從甚麼時候開始，每次播放一個新影片，總是糊糊的。需要自己手動去調高畫質，使人非常煩躁。雖然可以透過安裝插件解決，但是會覺得安裝別人的插件不太安全。
所以這篇文章教你怎麼樣快速的在Edge瀏覽器中，寫一個自己的插件吧!
專案資料夾
首先我們要建立插件的專案資料夾，命名一個你喜歡的名稱就可以了，我這裡取名叫"MyYoutubeFix"資料夾
然後建立兩個空白檔案
資料夾內部檔案
- manifest.json
- content.js
設定檔
瀏覽器會讀取manifest.json這個設定檔來了解插件的資訊，接下來我們在這個json檔中填入以下
{
"manifest_version": 3,
"name": "YouTube 畫質鎖定器",
"version": "1.0",
"description": "自動將 YouTube 影片設定為最高畫質",
"permissions": ["declarativeContent", "storage"],
"host_permissions": ["*://*.youtube.com/*"],
"content_scripts": [
{
"matches": ["*://*.youtube.com/*"],
"js": ["content.js"],
"run_at": "document_idle"
}
]
}
- name:是在你瀏覽器插件選單中顯示的名稱，你可以自己修改
- version:是自定義的版本號碼
- permissions:宣告會使用的API權限
- host_permissions:宣告這個插件可以干涉哪些網站，所以我們填youtube
- content_scripts:定義腳本何時何地運作
- matches:指定哪些網址要注入腳本
- js:就是要執行的腳本
- run_at:腳本執行的時機，document_idle的意思是瀏覽器有空時再跑，就比較不會卡到網頁載入的速度。
插件執行腳本
將content.js 寫入以下程式碼
function setMaxQuality() {
const player = document.querySelector('.html5-video-player');
if (player && typeof player.setPlaybackQualityRange === 'function') {
// 'highres' 代表最高畫質，也可以指定 'hd1080' 或 'hd2160'
player.setPlaybackQualityRange('highres');
console.log('已嘗試將畫質設為最高');
}
}
// 監聽 YouTube 導航事件（因為 YouTube 是單頁應用，切換影片時不會重新整理網頁）
document.addEventListener('yt-navigate-finish', setMaxQuality);
// 初次載入時執行
setMaxQuality();
透過document.querySelector去找到播放器的元件。然後將它設定為最高畫質。就這樣而已。
在Edge中使用插件
接下來我們要在edge載入我們自己開發的插件來用了。
首先進入"管理擴充功能"
再來要打開"開發人員模式"
這樣就會出現"載入解壓縮"的選項
我們點擊他然後選擇我們剛剛建立的插件專案資料夾(這裡我是命名為MyYoutubeFix)
他就會載入了。
大功告成
我們看到他出現在插件一覽中了!!
快去試試吧!
如果API失效怎麼辦?
如果讀者們在使用時發現沒有自動選擇最高畫質，有可能是瀏覽器環境導致的被Youtube封鎖或失效。
我們可以改成更土炮的方法，就是影片載入後再自動點擊更改畫質的選項，所以看起來畫面會跳一下。
我們將content.js換成以下腳本
function setMaxQuality() {
// 1. 點擊設置按鈕（齒輪）
const settingsButton = document.querySelector('.ytp-settings-button');
if (!settingsButton) return;
settingsButton.click();
// 2. 找到「畫質」選單並點擊
// YouTube 的選單是動態生成的，需要稍微等一下
setTimeout(() => {
const menuItems = document.querySelectorAll('.ytp-menuitem');
let qualityMenu = null;
for (let item of menuItems) {
// 尋找包含「畫質」或 "Quality" 字樣的選項
if (item.innerText.includes('畫質') || item.innerText.includes('Quality')) {
qualityMenu = item;
break;
}
}
if (qualityMenu) {
qualityMenu.click();
// 3. 選擇最高解析度（通常在最上面一個）
setTimeout(() => {
const qualities = document.querySelectorAll('.ytp-quality-menu .ytp-menuitem');
if (qualities.length > 0) {
qualities[0].click(); // 點擊清單中的第一個（通常是最高）
console.log('已自動切換至最高畫質');
}
// 再次點擊齒輪關閉選單（可選）
settingsButton.click();
}, 100);
} else {
// 如果沒找到選單，把齒輪點掉關閉
settingsButton.click();
}
}, 100);
}
// 監聽 YouTube 換片事件
document.addEventListener('yt-navigate-finish', () => {
// 延遲執行，確保播放器選單已加載
setTimeout(setMaxQuality, 2000);
});
// 初次載入執行
setTimeout(setMaxQuality, 2000);
