From c6cd092c8709f0a39645b806b8ba6508744ec640 Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Fri, 12 Jul 2019 10:42:39 -0400 Subject: Added button on YouTube player and new icons to support that --- content.js | 43 +++++++++++++++++++++------ icons/PlayerStartIconSponsorBlocker256px.png | Bin 0 -> 6225 bytes icons/PlayerStopIconSponsorBlocker256px.png | Bin 0 -> 7317 bytes manifest.json | 5 +++- 4 files changed, 38 insertions(+), 10 deletions(-) create mode 100644 icons/PlayerStartIconSponsorBlocker256px.png create mode 100644 icons/PlayerStopIconSponsorBlocker256px.png diff --git a/content.js b/content.js index a841acba..585255c8 100644 --- a/content.js +++ b/content.js @@ -124,6 +124,31 @@ function goBackToPreviousTime() { } } +//Adds a sponsorship starts button to the player controls +function addPlayerControlsButton(){ + let startSponsorButton = document.createElement("button"); + startSponsorButton.className = "ytp-button"; + startSponsorButton.setAttribute("title", "Sponsor Starts Now"); + startSponsorButton.addEventListener("click", console.log); + + let startSponsorImage = document.createElement("img"); + startSponsorImage.style.height = "60%"; + startSponsorImage.style.top = "0"; + startSponsorImage.style.bottom = "0"; + startSponsorImage.style.display = "block"; + startSponsorImage.style.margin = "auto"; + startSponsorImage.src = chrome.extension.getURL("icons/PlayerStartIconSponsorBlocker256px.png"); + + //add the image to the button + startSponsorButton.appendChild(startSponsorImage); + + let referenceNode = document.getElementsByClassName("ytp-right-controls")[0]; + + referenceNode.prepend(startSponsorButton); +} + +addPlayerControlsButton(); + //Opens the notice that tells the user that a sponsor was just skipped function openSkipNotice(){ if (dontShowNotice) { @@ -131,40 +156,40 @@ function openSkipNotice(){ return; } - var noticeElement = document.createElement("div"); + let noticeElement = document.createElement("div"); noticeElement.id = "sponsorSkipNotice"; noticeElement.className = "sponsorSkipObject"; - var logoElement = document.createElement("img"); + let logoElement = document.createElement("img"); logoElement.id = "sponsorSkipLogo"; logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png"); - var noticeMessage = document.createElement("div"); + let noticeMessage = document.createElement("div"); noticeMessage.id = "sponsorSkipMessage"; noticeMessage.className = "sponsorSkipObject"; noticeMessage.innerText = "Hey, you just skipped a sponsor!"; - var noticeInfo = document.createElement("p"); + let noticeInfo = document.createElement("p"); noticeInfo.id = "sponsorSkipInfo"; noticeInfo.className = "sponsorSkipObject"; noticeInfo.innerText = "This message will disapear in 7 seconds"; - var buttonContainer = document.createElement("div"); + let buttonContainer = document.createElement("div"); buttonContainer.setAttribute("align", "center"); - var goBackButton = document.createElement("button"); + let goBackButton = document.createElement("button"); goBackButton.innerText = "Go back"; goBackButton.className = "sponsorSkipObject"; goBackButton.className = "sponsorSkipButton"; goBackButton.addEventListener("click", goBackToPreviousTime); - var hideButton = document.createElement("button"); + let hideButton = document.createElement("button"); hideButton.innerText = "Dismiss"; hideButton.className = "sponsorSkipObject"; hideButton.className = "sponsorSkipButton"; hideButton.addEventListener("click", closeSkipNotice); - var dontShowAgainButton = document.createElement("button"); + let dontShowAgainButton = document.createElement("button"); dontShowAgainButton.innerText = "Don't Show This Again"; dontShowAgainButton.className = "sponsorSkipObject"; dontShowAgainButton.className = "sponsorSkipDontShowButton"; @@ -181,7 +206,7 @@ function openSkipNotice(){ noticeElement.appendChild(noticeInfo); noticeElement.appendChild(buttonContainer); - var referenceNode = document.getElementById("info"); + let referenceNode = document.getElementById("info"); if (referenceNode == null) { //old YouTube referenceNode = document.getElementById("watch-header"); diff --git a/icons/PlayerStartIconSponsorBlocker256px.png b/icons/PlayerStartIconSponsorBlocker256px.png new file mode 100644 index 00000000..3adff0a4 Binary files /dev/null and b/icons/PlayerStartIconSponsorBlocker256px.png differ diff --git a/icons/PlayerStopIconSponsorBlocker256px.png b/icons/PlayerStopIconSponsorBlocker256px.png new file mode 100644 index 00000000..80ef4a6e Binary files /dev/null and b/icons/PlayerStopIconSponsorBlocker256px.png differ diff --git a/manifest.json b/manifest.json index 736cca75..9c7a7dd6 100644 --- a/manifest.json +++ b/manifest.json @@ -18,7 +18,10 @@ } ], "web_accessible_resources": [ - "icons/LogoSponsorBlocker256px.png" + "icons/LogoSponsorBlocker256px.png", + "icons/IconSponsorBlocker256px.png", + "icons/PlayerStartIconSponsorBlocker256px.png", + "icons/PlayerStopIconSponsorBlocker256px.png" ], "permissions": [ "tabs", -- cgit v1.2.3