yesBad/Youtube-Volume-Slider
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init working

Browse Source
This commit is contained in:
Bad
2025-09-28 10:47:26 +03:00
commit 4f7af6d768
5 changed files with 106 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
background.js Normal file
View File

@ -0,0 +1,2 @@
// Empty for now, but required for manifest v3 service_worker.
// Can be used later for global state or context menu.

17
manifest.json Normal file
View File

@ -0,0 +1,17 @@
{
"manifest_version": 3,
"name": "YT Volume Slider",
"version": "1.0",
"description": "very fancy, very nice",
"permissions": [
"activeTab",
"scripting"
],
"action": {
"default_popup": "popup.html",
"default_title": "Volume Slider"
},
"background": {
"service_worker": "background.js"
}
}

29
page_script.js Normal file
View File

@ -0,0 +1,29 @@
// page_script.js - runs inside the page context
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
if (msg.action === "setVolume") {
const player = document.querySelector(".html5-video-player");
if (player && typeof player.setVolume === "function") {
player.setVolume(msg.volume);
} else {
const video = document.querySelector("video");
if (video) video.volume = Math.max(0, Math.min(1, msg.volume / 100));
}
sendResponse({ ok: true });
}
if (msg.action === "getVolume") {
let v = null;
const player = document.querySelector(".html5-video-player");
if (player && typeof player.getVolume === "function") {
v = player.getVolume();
} else {
const video = document.querySelector("video");
if (video && typeof video.volume === "number") {
v = Math.round(video.volume * 100);
}
}
sendResponse({ volume: v });
}
return true; // async safe
});

18
popup.html Normal file
View File

@ -0,0 +1,18 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Volume Slider</title>
<style>
body { font-family: sans-serif; min-width: 220px; padding: 12px; }
label { font-weight: bold; }
input[type=range] { width: 100%; }
.value { margin-left: 8px; font-weight: bold; }
</style>
</head>
<body>
<label>Volume <span id="val">100</span></label>
<input id="slider" type="range" min="0" max="100" value="100">
<script src="popup.js"></script>
</body>
</html>

40
popup.js Normal file
View File

@ -0,0 +1,40 @@
const slider = document.getElementById("slider");
const val = document.getElementById("val");
slider.addEventListener("input", () => {
val.textContent = slider.value;
});
slider.addEventListener("change", async () => {
const volume = Number(slider.value);
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
if (!tab?.id) return;
// Ensure page_script.js is injected
await chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ["page_script.js"],
});
// Send message to the injected page script
chrome.tabs.sendMessage(tab.id, { action: "setVolume", volume });
});
// Initialize with current volume
(async function init() {
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
if (!tab?.id) return;
await chrome.scripting.executeScript({
target: { tabId: tab.id },
files: ["page_script.js"],
});
chrome.tabs.sendMessage(tab.id, { action: "getVolume" }, (response) => {
if (chrome.runtime.lastError) return; // ignore if no response
if (response && typeof response.volume === "number") {
slider.value = response.volume;
val.textContent = response.volume;
}
});
})();