A userscript that adds a player in your YouTube page when current video has valid timeline on Holodex.
// ==UserScript==
// @name Holodex for YouTube
// @description A userscript that adds a player in your YouTube page when current video has valid timeline on Holodex.
// @author Allen Wei
// @namespace https://github.com/Alllen95Wei
// @license MIT
// @match https://www.youtube.com/*
// @match https://holodex.net/*
// @version 1.0.3
// @grant GM_getValues
// @grant GM_setValues
// ==/UserScript==
let HOLODEX_API_KEY = GM_getValues({holodex_api_key: null}).holodex_api_key
const STYLE_TEXT = `
/*
* Below is the stylesheet injected by "Holodex for YouTube" and is for elements created by the userscript.
* Don't worry; other elements shouldn't be affected!
*/
table, th, td {
border: 1px solid #000000;
border-collapse: collapse;
}
th {
background-color: #f06292;
}
td {
background-color: #9cc9fd;
}
button:hover {
cursor: pointer;
}
#song-list-btn {
border: none;
background-image: linear-gradient(to bottom right, #5da2f2, #f06292);
}
#song-list-btn:hover {
background-image: linear-gradient(to bottom right, #7bb1f3, #ed82a8);
}
#song-list-div {
font-size: small;
white-space: pre-line;
}
#song-list-table-div {
max-height: 75vh;
margin: 0.5vh;
overflow: auto;
border-radius: 12px;
}
#autoplay-div {
width: 100%;
background-color: white;
}
#autoplay-switch-label {
margin-left: 5px;
}
#song-info-div {
width: 100%;
overflow: auto;
display: flex;
align-items: center;
}
#hd-thumbnail {
margin: 5px;
width: 80px;
height: 80px;
border-radius: 10px;
box-shadow: 0 0 5px 0 #A5A5A5;
transition: width 0.1s linear, height 0.1s linear;
}
#hd-thumbnail:hover {
width: 110px;
height: 110px;
transition: width 0.1s linear, height 0.1s linear;
}
#song-detail-div {
display: inline-grid;
}
#song-info-name {
font-size: large;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 5px;
margin-bottom: 0.05em;
}
#song-info-artist {
font-size: small;
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 5px;
margin-bottom: 0.1em;
}
#autoplay-div {
position: sticky;
top: 0;
}
#control-div {
display: flex;
align-items: center;
justify-content: center;
}
#progress-div {
width: 100%;
display: flex;
}
#progress-bar {
-webkit-appearance: none;
width: 80%;
display: flex;
appearance: none;
background: transparent;
cursor: pointer;
}
#progress-bar:focus {
outline: none;
}
/******** Chrome, Safari, Opera and Edge Chromium styles ********/
/* slider track */
#progress-bar::-webkit-slider-runnable-track {
background-image: linear-gradient(to right, #81b7f3, #ef86aa);
border-radius: 0.5rem;
height: 0.25rem;
}
/* slider thumb */
#progress-bar::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
margin-top: -4px; /* Centers thumb on the track */
background-color: #808080;
border-radius: 0.1rem;
height: 1.2rem;
width: 0.3rem;
}
#progress-bar:focus::-webkit-slider-thumb {
outline: 3px solid #808080;
outline-offset: 0.125rem;
}
/*********** Firefox styles ***********/
/* slider track */
#progress-bar::-moz-range-track {
background-image: linear-gradient(to right, #81b7f3, #ef86aa);
border-radius: 0.5rem;
height: 0.25rem;
}
/* slider thumb */
#progress-bar::-moz-range-thumb {
background-color: #808080;
border: none; /*Removes extra border that FF applies*/
border-radius: 0.1rem;
height: 1rem;
width: 0.2rem;
}
#progress-bar:focus::-moz-range-thumb{
outline: 3px solid #808080;
outline-offset: 0.125rem;
}
.song-name-div {
height: 40px;
max-height: 40px;
overflow: auto;
align-content: center;
}
.song-artist {
font-size: 10px;
font-style: italic;
}
.hd-button {
border: none;
width: 100%;
height: auto;
padding: 5px;
transition-duration: 0.15s;
}
.hd-button:hover {
background-color: #b6b6b6;
}
.play-button {
border: none;
width: 40px;
height: 40px;
background-size: cover;
background-color: #7f7f7f;
}
.progress-span {
width: 10%;
display: flex;
justify-content: center;
}
.control-buttons {
border: none;
margin: 2px 4px;
width: 3.5vw;
background-color: darkgray;
}
/* ============= Google Material Symbols Stylesheet ============= */
.material-symbols-rounded {
font-variation-settings:
'FILL' 1,
'wght' 400,
'GRAD' 200,
'opsz' 24
}
`
const DEFAULT_ART_BASE64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAGHaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49J++7vycgaWQ9J1c1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCc/Pg0KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyI+PHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj48cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0idXVpZDpmYWY1YmRkNS1iYTNkLTExZGEtYWQzMS1kMzNkNzUxODJmMWIiIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIj48dGlmZjpPcmllbnRhdGlvbj4xPC90aWZmOk9yaWVudGF0aW9uPjwvcmRmOkRlc2NyaXB0aW9uPjwvcmRmOlJERj48L3g6eG1wbWV0YT4NCjw/eHBhY2tldCBlbmQ9J3cnPz4slJgLAAABAElEQVR4Xu3RoQHAIBDAwNLFf3TwLEDEnYzNmpn9kfHfgbcMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEkxpAYQ2IMiTEk5gAHmwNEhZDUhAAAAABJRU5ErkJggg=="
const GOOGLE_ICONS_URL = [
// "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,500,1,200&icon_names=skip_previous",
// "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,500,1,200&icon_names=play_arrow",
// "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@40,500,1,200&icon_names=skip_next"
"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..20"
]
const escapeHTMLPolicy = trustedTypes.createPolicy("forceInner", {createHTML: (to_escape) => to_escape})
let UPDATE_TRY = 0
let LAST_SONG_ID = ""
let LAST_SONG_INDEX = 0
let IS_RANDOM = false
/*
* 0 = no repeat \
* 1 = repeat one \
* 2 = repeat all
*/
let REPEAT_MODE = 0
let QUEUE = []
let SONG_INDEX = []
// Utils
function secondsToFormattedString(seconds) {
return `${Math.floor(seconds / 60)}:${seconds % 60 < 10 ? "0" : ""}${Math.floor(seconds % 60)}`
}
function compareSongSequence(a, b) {
if (a["start"] > b["start"]) {
return 1
}
if (a["start"] < b["start"]) {
return -1
}
return 0
}
function shuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
return array;
}
function autoplay(videoPlayer, updateNow, goNext, goPrevious) {
UPDATE_TRY++
// check every 4 triggers (see https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event)
if (UPDATE_TRY >= 4 || updateNow) {
UPDATE_TRY = 0
const currentTime = videoPlayer.currentTime
let nextSong = null
for (const [start, end, i] of SONG_INDEX) {
if (start <= currentTime && currentTime <= end) { // now playing
const nowPlaying = QUEUE[i]
console.log(`Now playing: ${nowPlaying["name"]}, by ${nowPlaying["original_artist"]}`)
LAST_SONG_INDEX = i
if (goNext) {
nextSong = QUEUE[i + 1] || null
} else if (goPrevious) {
nextSong = QUEUE[i - 1] || null
} else {
nextSong = "PLAYING"
}
break
} else if (!IS_RANDOM && start > currentTime) { // finds the next song only when "shuffle" is not enabled
// if (nextSong === songList[i]) { // the next song is confirmed and will NOT change
// break
// }
nextSong = QUEUE[i]
break
} else if (IS_RANDOM) { // the playlist is random and no song is playing
nextSong = QUEUE[LAST_SONG_INDEX + 1] || null
break
}
}
if (nextSong !== null && nextSong !== "PLAYING") {
console.log("Next song:", nextSong)
console.log(`Seeking to ${nextSong["start"]}`)
videoPlayer.currentTime = nextSong["start"]
} else if (nextSong !== "PLAYING") {
console.log(nextSong)
console.log("The last song in the list has finished, pausing the player")
videoPlayer.pause()
}
}
}
function getNowPlayingSong(videoPlayer) {
const currentTime = videoPlayer.currentTime
let i = 0
for (const song of QUEUE) {
if (song.start <= currentTime && currentTime <= song.end) {
return [song, i]
}
i++
}
return [{
"id": null,
"name": "未在播放任何歌曲",
"original_artist": "啟用自動播放以使用播放器功能",
"art": DEFAULT_ART_BASE64,
"start": 0,
"end": 0
}, -1]
}
function updateNowPlayingInfo(videoPlayer, forceUpdate) {
const [nowSong, index] = getNowPlayingSong(videoPlayer)
const currentTime = videoPlayer.currentTime
const progressBar = document.getElementById("progress-bar")
if (nowSong.id !== LAST_SONG_ID || forceUpdate) {
// Update song info
document.getElementById("hd-thumbnail").src = (nowSong.art || DEFAULT_ART_BASE64).replace("100x100", "500x500")
document.getElementById("song-info-name").textContent = nowSong.name
document.getElementById("song-info-name").title = nowSong.name
document.getElementById("song-info-artist").textContent = nowSong.original_artist
document.getElementById("song-info-artist").title = nowSong.original_artist
// Update time length of the song
const duration = nowSong.end - nowSong.start
document.getElementById("progress-duration").textContent = secondsToFormattedString(duration)
LAST_SONG_ID = nowSong.id
const controlBtns = document.getElementsByClassName("control-buttons")
if (nowSong.id === null) {
for (const btn of controlBtns) {
btn.disabled = true
}
progressBar.disabled = true
} else {
for (const btn of controlBtns) {
btn.disabled = false
}
progressBar.disabled = false
// Disable skip buttons on the first/last one
if (index === QUEUE.length - 1) {
document.getElementById("skip-next-btn").disabled = true
}
if (index === 0) {
document.getElementById("skip-previous-btn").disabled = true
}
}
}
// Update progress bar
if (nowSong.id === null) {
progressBar.min = 0
progressBar.max = 1
progressBar.value = 0
document.getElementById("progress-nowtime").textContent = "0:00"
document.getElementById("progress-nowtime").title = "-0:00"
} else {
progressBar.min = `${nowSong.start}`
progressBar.max = `${nowSong.end}`
progressBar.value = currentTime
document.getElementById("progress-nowtime").textContent = secondsToFormattedString(currentTime - nowSong.start)
document.getElementById("progress-nowtime").title = `-${secondsToFormattedString(nowSong.end - currentTime)}`
}
}
function renderQueue(songListTable, videoPlayer) {
const tableLength = songListTable.rows.length
for (let i = 0; i < (tableLength - 1); i++) {
songListTable.deleteRow(-1)
}
let index = 1
for (const song of QUEUE) {
const row = songListTable.insertRow()
// Song no.
const songNoCell = row.insertCell()
songNoCell.style.textAlign = "center"
songNoCell.textContent = `${index}`
// Song name
const songNameCell = row.insertCell()
songNameCell.style.paddingLeft = "0.3vw"
const songNameDiv = document.createElement("div")
songNameDiv.className = "song-name-div"
const songName = document.createElement("p")
songName.className = "song-name"
songName.textContent = song["name"]
const songArtist = document.createElement("p")
songArtist.className = "song-artist"
songArtist.textContent = song["original_artist"]
songNameDiv.append(songName, songArtist)
songNameCell.append(songNameDiv)
// Song duration
const songDurationCell = row.insertCell()
songDurationCell.style.textAlign = "center"
songDurationCell.textContent = secondsToFormattedString(song["end"] - song["start"])
// Play button
const playButton = document.createElement("button")
playButton.id = `play-button-${index}`
playButton.className = "play-button"
playButton.textContent = "▶️"
playButton.style.backgroundImage = `url(${song["art"]})`
// Left click: seek to the start of the song
playButton.addEventListener("click", () => {
videoPlayer.currentTime = song["start"]
})
// Right click: open in Musicdex
playButton.addEventListener("contextmenu", () => {
window.open(`https://music.holodex.net/song/${song["id"]}`, "_blank")
})
row.insertCell().appendChild(playButton)
index++
}
}
function generateQueue(songListTable, videoPlayer, start, isRandom) {
if (isRandom) {
QUEUE = shuffle(QUEUE)
} else {
QUEUE = QUEUE.sort(compareSongSequence)
}
console.log("New queue:", QUEUE)
renderQueue(songListTable, videoPlayer)
let index = 0
SONG_INDEX = []
for (const song of QUEUE) {
// Append to index
SONG_INDEX.push([song["start"], song["end"], index])
index++
}
}
// Main function
function main() {
// Try to remove previous ones
LAST_SONG_ID = ""
LAST_SONG_INDEX = 0
IS_RANDOM = false
QUEUE = []
SONG_INDEX = []
try {
document.getElementById("song-list-div").remove()
} catch (e) {} // Ignore error when nothing found
const vId = new URLSearchParams(window.location.search).get("v")
if (vId === null) {
console.log("No video ID found, not a video page.")
return
}
let data = {}
if (HOLODEX_API_KEY === null || HOLODEX_API_KEY === undefined) {
console.warn("No API key found. Visit https://holodex.net/ and login to update your API key.")
return
} else {
console.log(`Holodex API key found: ${HOLODEX_API_KEY.slice(0, 9)}****-****-****-************`)
}
fetch(`https://holodex.net/api/v2/videos/${vId}`, {headers: {"X-APIKEY": HOLODEX_API_KEY}})
.then((response) => {
console.log("API responded with status code: ", response.status)
return response.json()
})
.then(response => {
data = response
if (!("songs" in data)) {
console.log("No songs found.")
return
}
// Get song list
QUEUE = data.songs
console.log(QUEUE)
// Inject CSS
const stylesheet = document.createElement("style");
stylesheet.textContent = STYLE_TEXT;
document.head.append(stylesheet)
for (const url of GOOGLE_ICONS_URL) {
const googleStylesheet = document.createElement("link")
googleStylesheet.rel = "stylesheet"
googleStylesheet.href = url
document.head.append(googleStylesheet)
}
// Fetch YouTube elements
const minorColumn = document.getElementById("secondary-inner")
const videoPlayer = document.getElementsByTagName("video")[0]
// Create song list div
const songListDiv = document.createElement("div")
songListDiv.id = "song-list-div"
// Create div for table to prevent super long table
const songListTableDiv = document.createElement("div")
songListTableDiv.id = "song-list-table-div"
songListTableDiv.style.height = "0px"
songListTableDiv.style.visibility = "hidden"
// Create "autoplay" switch
const autoplayDiv = document.createElement("div")
autoplayDiv.id = "autoplay-div"
const autoplaySwitchLabel = document.createElement("label")
autoplaySwitchLabel.id = "autoplay-switch-label"
autoplaySwitchLabel.htmlFor = "autoplay-switch"
autoplaySwitchLabel.textContent = "啟用自動播放"
const autoplaySwitch = document.createElement("input")
autoplaySwitch.id = "autoplay-switch"
autoplaySwitch.type = "checkbox"
autoplayDiv.append(autoplaySwitchLabel, autoplaySwitch)
songListTableDiv.append(autoplayDiv)
// Create player
const playerDiv = document.createElement("div")
playerDiv.id = "player-div"
// Create info div
const songInfoDiv = document.createElement("div")
songInfoDiv.id = "song-info-div"
const thumbnail = document.createElement("img")
thumbnail.id = "hd-thumbnail"
const songDetailDiv = document.createElement("div")
songDetailDiv.id = "song-detail-div"
const songName = document.createElement("span")
songName.id = "song-info-name"
const songArtist = document.createElement("span")
songArtist.id = "song-info-artist"
songDetailDiv.append(songName, songArtist)
songInfoDiv.append(thumbnail, songDetailDiv)
// Create control div
const controlDiv = document.createElement("div")
controlDiv.id = "control-div"
controlDiv.style.display = "flex"
const progressDiv = document.createElement("div")
progressDiv.id = "progress-div"
const nowTime = document.createElement("span")
nowTime.id = "progress-nowtime"
nowTime.className = "progress-span"
nowTime.textContent = "0:00"
const duration = document.createElement("span")
duration.id = "progress-duration"
duration.className = "progress-span"
duration.textContent = "0:00"
const progressBar = document.createElement("input")
progressBar.id = "progress-bar"
progressBar.type = "range"
progressBar.addEventListener("input", () => {
videoPlayer.currentTime = parseInt(progressBar.value)
})
progressDiv.append(nowTime, progressBar, duration)
const repeatBtn = document.createElement("button")
repeatBtn.classList.add("material-symbols-rounded", "control-buttons")
repeatBtn.id = "repeat-btn"
repeatBtn.textContent = "repeat"
repeatBtn.addEventListener("click", () => {
if (REPEAT_MODE === 2) {
REPEAT_MODE = 0
} else {
REPEAT_MODE++
}
if (REPEAT_MODE === 0) {
repeatBtn.textContent = "repeat"
} else if (REPEAT_MODE === 1) {
repeatBtn.textContent = "repeat_one_on"
} else if (REPEAT_MODE === 2) {
repeatBtn.textContent = "repeat_on"
}
})
const previousBtn = document.createElement("button")
previousBtn.classList.add("material-symbols-rounded", "control-buttons")
previousBtn.id= "skip-previous-btn"
previousBtn.textContent = "skip_previous"
const playBtn = document.createElement("button")
playBtn.classList.add("material-symbols-rounded", "control-buttons")
playBtn.id = "play-pause-btn"
playBtn.textContent = "pause"
playBtn.addEventListener("click", () => {
if (videoPlayer.paused) {
videoPlayer.play().then()
} else {
videoPlayer.pause()
}
})
const nextBtn = document.createElement("button")
nextBtn.classList.add("material-symbols-rounded", "control-buttons")
nextBtn.id = "skip-next-btn"
nextBtn.textContent = "skip_next"
const shuffleBtn = document.createElement("button")
shuffleBtn.classList.add("material-symbols-rounded", "control-buttons")
shuffleBtn.id = "shuffle-btn"
shuffleBtn.textContent = "shuffle"
shuffleBtn.addEventListener("click", () => {
let [_, nowSongIndex] = getNowPlayingSong(videoPlayer)
if (IS_RANDOM) {
shuffleBtn.textContent = "shuffle"
} else {
shuffleBtn.textContent = "shuffle_on"
}
IS_RANDOM = !IS_RANDOM
generateQueue(songListTable, videoPlayer, nowSongIndex + 1, IS_RANDOM)
updateNowPlayingInfo(videoPlayer, true)
})
controlDiv.append(repeatBtn, previousBtn, playBtn, nextBtn, shuffleBtn)
playerDiv.append(songInfoDiv, progressDiv, controlDiv)
autoplayDiv.append(playerDiv)
// Create song list table
const songListTable = document.createElement("table")
songListTable.id = "song-list-table"
songListTable.style.width = "100%"
songListTable.style.backgroundColor = "#FFFFFF"
songListTable.innerHTML = escapeHTMLPolicy.createHTML(`
<tr style="height: fit-content">
<th style="width: 5%">#</th>
<th style="width: 75%">歌名</th>
<th style="width: 10%">時長</th>
<th style="width: 40px">播放</th>
</tr>
`)
generateQueue(songListTable, videoPlayer, 0, false)
// Set up autoplay after loop
// Wrap autoplay as a lambda object, so that we can remove it when needed
function apl() {
autoplay(videoPlayer, false, false, false)
}
autoplaySwitch.addEventListener("change", () => {
console.log("Autoplay enabled: ", autoplaySwitch.checked)
if (autoplaySwitch.checked) {
videoPlayer.addEventListener("timeupdate", apl)
} else {
videoPlayer.removeEventListener("timeupdate", apl)
}
})
// Remove the old autoplay instance before switching to other videos
document.addEventListener("yt-navigate-start", () => {
try {
videoPlayer.removeEventListener("timeupdate", apl)
} catch (e) {}
})
// Set up song info updater
// Same reason as autoplay
function unpil() {
updateNowPlayingInfo(videoPlayer, false)
}
videoPlayer.addEventListener("timeupdate", unpil)
document.addEventListener("yt-navigate-start", () => {
try {
videoPlayer.removeEventListener("timeupdate", unpil)
} catch (e) {}
})
videoPlayer.addEventListener("play", () => {
playBtn.textContent = "pause"
})
videoPlayer.addEventListener("pause", () => {
playBtn.textContent = "play_arrow"
})
// Set up control buttons
function appl() {
autoplay(videoPlayer, true, false, true)
}
previousBtn.addEventListener("click", appl)
function apnl() {
autoplay(videoPlayer, true, true, false)
}
nextBtn.addEventListener("click", apnl)
// Append the table into its div before it appends into the main div
songListTableDiv.append(songListTable)
songListDiv.append(songListTableDiv)
// Create "toggle song list" button
const songListBtn = document.createElement("button")
songListBtn.id = "song-list-btn"
songListBtn.classList.add(
"hd-button",
"yt-spec-button-shape-next",
"yt-spec-button-shape-next--outline",
"yt-spec-button-shape-next--mono",
"yt-spec-button-shape-next--size-m",
"yt-spec-button-shape-next--enable-backdrop-filter-experiment"
)
songListBtn.textContent = "開啟歌曲清單"
songListBtn.addEventListener("click", () => {
if (songListTableDiv.style.visibility !== "visible") {
songListBtn.textContent = "關閉歌曲清單"
songListTableDiv.style.visibility = "visible"
songListTableDiv.style.height = ""
} else {
songListBtn.textContent = "開啟歌曲清單"
songListTableDiv.style.visibility = "hidden"
songListTableDiv.style.height = "0px"
}
})
songListDiv.prepend(songListBtn)
minorColumn.prepend(songListDiv)
})
.catch((error) => {
console.error(error)
})
}
(function () {
"use strict";
console.log("Extension starts")
if (window.location.hostname === "holodex.net") {
console.log("We're in Holodex!")
const rawData = JSON.parse(window.localStorage.getItem("holodex-v2"))
if (rawData.userdata.user === null) {
console.warn("Not logged in. Login to update your API key.")
return
}
if (HOLODEX_API_KEY === null || HOLODEX_API_KEY === undefined) {
console.log("API key is missing, fetching")
} else if (HOLODEX_API_KEY !== rawData.userdata.user.api_key) {
console.log("New API key found, updating")
} else {
console.log("Your API key is good to go!")
return
}
HOLODEX_API_KEY = rawData.userdata.user.api_key
GM_setValues({holodex_api_key: HOLODEX_API_KEY})
console.log(`Your new API key: ${HOLODEX_API_KEY.slice(0, 9)}****-****-****-************`)
}
// 程式碼開始
// if (new URLSearchParams(window.location.search).get("v") !== null) {
// document.addEventListener("load", main)
// }
// document.addEventListener("yt-navigate-finish", main)
// main()
document.addEventListener("yt-navigate-finish", () => {
console.log("yt-navigate-finish")
main()
});
})()