Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-11 05:57:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

Remade the popup menu to support Firefox and not use IFrames.

Browse Source
This commit is contained in:
Ajay Ramachandran
2019-07-30 13:27:20 -04:00
parent 6ff461fa86
commit b0929e2431
6 changed files with 1174 additions and 1089 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
content.js
View File

@@ -59,8 +59,10 @@ chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
} }
}); });
chrome.runtime.onMessage.addListener( // Detect URL Changes //get messages from the background script and the popup
function(request, sender, sendResponse) { chrome.runtime.onMessage.addListener(messageListener);
function messageListener(request, sender, sendResponse) {
//message from background script //message from background script
if (request.message == "ytvideoid") { if (request.message == "ytvideoid") {
videoIDChange(request.id); videoIDChange(request.id);
@@ -118,7 +120,7 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
if (request.message == "trackViewCount") { if (request.message == "trackViewCount") {
trackViewCount = request.value; trackViewCount = request.value;
} }
}); }
//check for hotkey pressed //check for hotkey pressed
document.onkeydown = function(e){ document.onkeydown = function(e){
@@ -474,13 +476,11 @@ function openInfoMenu() {
//hide info button //hide info button
document.getElementById("infoButton").style.display = "none"; document.getElementById("infoButton").style.display = "none";
let popup = document.createElement("div"); sendRequestToCustomServer('GET', chrome.extension.getURL("popup.html"), function(xmlhttp) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var popup = document.createElement("div");
popup.id = "sponsorBlockPopupContainer"; popup.id = "sponsorBlockPopupContainer";
popup.innerHTML = xmlhttp.responseText
let popupFrame = document.createElement("iframe");
popupFrame.id = "sponsorBlockPopupFrame"
popupFrame.src = chrome.extension.getURL("popup.html");
popupFrame.className = "popup";
//close button //close button
let closeButton = document.createElement("div"); let closeButton = document.createElement("div");
@@ -489,8 +489,8 @@ function openInfoMenu() {
closeButton.setAttribute("align", "center"); closeButton.setAttribute("align", "center");
closeButton.addEventListener("click", closeInfoMenu); closeButton.addEventListener("click", closeInfoMenu);
popup.appendChild(closeButton); //add the close button
popup.appendChild(popupFrame); popup.prepend(closeButton);
let parentNode = document.getElementById("secondary"); let parentNode = document.getElementById("secondary");
if (parentNode == null) { if (parentNode == null) {
@@ -498,7 +498,21 @@ function openInfoMenu() {
parentNode = document.getElementById("watch7-sidebar-contents"); parentNode = document.getElementById("watch7-sidebar-contents");
} }
parentNode.prepend(popup); //make the logo source not 404
//query selector must be used since getElementByID doesn't work on a node and this isn't added to the document yet
let logo = popup.querySelector("#sponsorBlockPopupLogo");
logo.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
//remove the style sheet and font that are not necessary
popup.querySelector("#sponorBlockPopupFont").remove();
popup.querySelector("#sponorBlockStyleSheet").remove();
parentNode.insertBefore(popup, parentNode.firstChild);
//run the popup init script
runThePopup();
}
});
} }
function closeInfoMenu() { function closeInfoMenu() {

6
firefox_manifest.json
View File

@@ -10,11 +10,13 @@
], ],
"js": [ "js": [
"config.js", "config.js",
"content.js" "content.js",
"popup.js"
], ],
"css": [ "css": [
"content.css", "content.css",
"./libs/Source+Sans+Pro.css" "./libs/Source+Sans+Pro.css",
"popup.css"
] ]
} }
], ],

8
manifest.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "SponsorBlock for YouTube - Skip Sponsorships", "name": "SponsorBlock for YouTube - Skip Sponsorships",
"short_name": "SponsorBlock", "short_name": "SponsorBlock",
"version": "1.0.16", "version": "1.0.18",
"description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.", "description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
"content_scripts": [ "content_scripts": [
{ {
@@ -10,11 +10,13 @@
], ],
"js": [ "js": [
"config.js", "config.js",
"content.js" "content.js",
"popup.js"
], ],
"css": [ "css": [
"content.css", "content.css",
"./libs/Source+Sans+Pro.css" "./libs/Source+Sans+Pro.css",
"popup.css"
] ]
} }
], ],

84
popup.css
View File

@@ -1,45 +1,75 @@
* { /* reset some properties to default (youtube messes with them */
p.popupElement {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
h1.popupElement {
margin-block-start: 0.67em;
margin-block-end: 0.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
h2.popupElement {
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
h3.popupElement {
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
/* end reset */
.popupElement {
font-family: 'Source Sans Pro', sans-serif; font-family: 'Source Sans Pro', sans-serif;
} }
h1 { h1.popupElement {
margin-top: 0px; margin-top: 0px;
} }
body { .popupBody {
font-size: 14px; font-size: 14px;
min-width: 300px;
background-color: #ffd9d9; background-color: #ffd9d9;
padding: 5px;
} }
.recordingSubtitle { .recordingSubtitle.popupElement {
margin-bottom: 10px; margin-bottom: 10px;
} }
.voteButton { .voteButton.popupElement {
height: 32px; height: 32px;
margin-right: 15px; margin-right: 15px;
cursor: pointer; cursor: pointer;
} }
.voteButton:hover { .voteButton:hover.popupElement {
filter: brightness(80%); filter: brightness(80%);
} }
#discordButtonContainer { #discordButtonContainer.popupElement {
font-size: 12px; font-size: 12px;
} }
.sponsorTime { .sponsorTime.popupElement {
font-size: 20px; font-size: 20px;
} }
.smallLink { .smallLink.popupElement {
font-size: 10px; font-size: 10px;
text-decoration: underline; text-decoration: underline;
cursor: pointer; cursor: pointer;
} }
.mediumLink { .mediumLink.popupElement {
font-size: 15px; font-size: 15px;
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
@@ -47,7 +77,7 @@ body {
cursor: pointer; cursor: pointer;
} }
.greenButton { .greenButton.popupElement {
background-color:#ec1c1c; background-color:#ec1c1c;
-moz-border-radius:28px; -moz-border-radius:28px;
-webkit-border-radius:28px; -webkit-border-radius:28px;
@@ -61,19 +91,19 @@ body {
text-decoration:none; text-decoration:none;
text-shadow:0px 0px 0px #662727; text-shadow:0px 0px 0px #662727;
} }
.greenButton:hover { .greenButton:hover.popupElement {
background-color:#bf2a2a; background-color:#bf2a2a;
} }
.greenButton:focus { .greenButton:focus.popupElement {
outline: none; outline: none;
background-color:#bf2a2a; background-color:#bf2a2a;
} }
.greenButton:active { .greenButton:active.popupElement {
position:relative; position:relative;
top:1px; top:1px;
} }
.dangerButton { .dangerButton.popupElement {
-moz-box-shadow:inset 0px 1px 0px 0px #cf866c; -moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
-webkit-box-shadow:inset 0px 1px 0px 0px #cf866c; -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
box-shadow:inset 0px 1px 0px 0px #cf866c; box-shadow:inset 0px 1px 0px 0px #cf866c;
@@ -90,19 +120,19 @@ body {
text-decoration:none; text-decoration:none;
text-shadow:0px 1px 0px #854629; text-shadow:0px 1px 0px #854629;
} }
.dangerButton:hover { .dangerButton:hover.popupElement {
background-color:#bc3315; background-color:#bc3315;
} }
.dangerButton:focus { .dangerButton:focus.popupElement {
outline: none; outline: none;
background-color:#bc3315; background-color:#bc3315;
} }
.dangerButton:active { .dangerButton:active.popupElement {
position:relative; position:relative;
top:1px; top:1px;
} }
.warningButton { .warningButton.popupElement {
-moz-box-shadow:inset 0px 1px 0px 0px #cfbd6c; -moz-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
-webkit-box-shadow:inset 0px 1px 0px 0px #cfbd6c; -webkit-box-shadow:inset 0px 1px 0px 0px #cfbd6c;
box-shadow:inset 0px 1px 0px 0px #cfbd6c; box-shadow:inset 0px 1px 0px 0px #cfbd6c;
@@ -119,19 +149,19 @@ body {
text-decoration:none; text-decoration:none;
text-shadow:0px 1px 0px #856829; text-shadow:0px 1px 0px #856829;
} }
.warningButton:hover { .warningButton:hover.popupElement {
background-color:#bc8215; background-color:#bc8215;
} }
.warningButton:focus { .warningButton:focus.popupElement {
outline: none; outline: none;
background-color:#bc8215; background-color:#bc8215;
} }
.warningButton:active { .warningButton:active.popupElement {
position:relative; position:relative;
top:1px; top:1px;
} }
.smallButton { .smallButton.popupElement {
background-color:#f9902d; background-color:#f9902d;
-moz-border-radius:3px; -moz-border-radius:3px;
-webkit-border-radius:3px; -webkit-border-radius:3px;
@@ -144,14 +174,14 @@ body {
padding:6px 10px; padding:6px 10px;
text-decoration:none; text-decoration:none;
} }
.smallButton:hover { .smallButton:hover.popupElement {
background-color:#fa9806; background-color:#fa9806;
} }
.smallButton:focus { .smallButton:focus.popupElement {
outline: none; outline: none;
background-color:#fa9806; background-color:#fa9806;
} }
.smallButton:active { .smallButton:active.popupElement {
position:relative; position:relative;
top:1px; top:1px;
} }

94
popup.html
View File

@@ -1,97 +1,98 @@
<html> <html>
<head> <head>
<title>Set Page Color Popup</title> <title>Set Page Color Popup</title>
<link rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/> <link id="sponorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
<link rel="stylesheet" type="text/css" href="popup.css"/> <link id="sponorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
</head> </head>
<body class="popupBody">
<center> <center>
<div id="app"> <div id="app" class="popupBody">
<img src="icons/LogoSponsorBlocker256px.png" height="64px"/> <img src="icons/LogoSponsorBlocker256px.png" height="64px" id="sponsorBlockPopupLogo"/>
<h1>SponsorBlock</h1> <h1 class="popupElement">SponsorBlock</h1>
<!-- Loading text --> <!-- Loading text -->
<p id="loadingIndicator">Loading...</p> <p id="loadingIndicator" class="popupElement">Loading...</p>
<!-- Hidden until loading complete --> <!-- Hidden until loading complete -->
<div id="mainControls" class="main" style="display: none"> <div id="mainControls" class="main popupElement" style="display: none">
<!-- If the video was found in the database --> <!-- If the video was found in the database -->
<div id="videoFound"> <div id="videoFound">
</div> </div>
<div id="downloadedSponsorMessageTimes"> <div id="downloadedSponsorMessageTimes" class="popupElement">
</div> </div>
<br/> <br/>
<button id="reportAnIssue" class="dangerButton">Vote On A Sponsor Time</button> <button id="reportAnIssue" class="dangerButton popupElement">Vote On A Sponsor Time</button>
<div id="issueReporterContainer" style="display: none"> <div id="issueReporterContainer" class="popupElement" style="display: none">
<h3 style="margin-top: 0px">Vote On A Sponsor Time</h3> <h3 style="margin-top: 0px" class="popupElement">Vote On A Sponsor Time</h3>
<div id="issueReporterTimeButtons"> <div id="issueReporterTimeButtons" class="popupElement">
</div> </div>
</div> </div>
<h2 class="recordingSubtitle">Record the times of a sponsorship</h2> <h2 class="recordingSubtitle popupElement">Record the times of a sponsorship</h2>
<p> <p class="popupElement">
<span id=sponsorTimesContributionsContainer style="display: none"> <span id=sponsorTimesContributionsContainer class="popupElement" style="display: none">
So far, you've submitted So far, you've submitted
<span id="sponsorTimesContributionsDisplay"> <span id="sponsorTimesContributionsDisplay" class="popupElement">
0 0
</span> </span>
<span id="sponsorTimesContributionsDisplayEndWord"> <span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">
sponsors. sponsors.
</span> </span>
</span> </span>
<span id=sponsorTimesViewsContainer style="display: none"> <span id=sponsorTimesViewsContainer class="popupElement" style="display: none">
You have saved people from You have saved people from
<span id="sponsorTimesViewsDisplay"> <span id="sponsorTimesViewsDisplay" class="popupElement">
0 0
</span> </span>
<span id="sponsorTimesViewsDisplayEndWord"> <span id="sponsorTimesViewsDisplayEndWord" class="popupElement">
sponsor segments. sponsor segments.
</span> </span>
</span> </span>
</p> </p>
<p> <p class="popupElement">
Click the button below when the sponsorship starts and ends to record and Click the button below when the sponsorship starts and ends to record and
submit it to the database. submit it to the database.
</p> </p>
<div> <div>
<button id="sponsorStart" class="greenButton">Sponsorship Starts Now</button> <button id="sponsorStart" class="greenButton popupElement">Sponsorship Starts Now</button>
</div> </div>
<sub>Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit.</sub> <sub class="popupElement">Hint: Press the semicolon key while focused on a video report the start/end of a sponsor and quote to submit.</sub>
<div id="submissionSection" style="display: none"> <div id="submissionSection" class="popupElement" style="display: none">
<h3>Latest Sponsor Message Times Chosen</h3> <h3 class="popupElement">Latest Sponsor Message Times Chosen</h3>
<b> <b>
<div id="sponsorMessageTimes"> <div id="sponsorMessageTimes" class="popupElement">
</div> </div>
</b> </b>
<button id="clearTimes" class="smallButton">Clear Times</button> <button id="clearTimes" class="smallButton popupElement">Clear Times</button>
<br/> <br/>
<br/> <br/>
<div id="submitTimesContainer" style="display: none"> <div id="submitTimesContainer" class="popupElement" style="display: none">
<button id="submitTimes" class="smallButton">Submit Times</button> <button id="submitTimes" class="smallButton popupElement">Submit Times</button>
<div id="submitTimesInfoMessageContainer" style="display: none"> <div id="submitTimesInfoMessageContainer" class="popupElement" style="display: none">
<h3 id="submitTimesInfoMessage"> <h3 id="submitTimesInfoMessage" class="popupElement">
</h3> </h3>
</div> </div>
@@ -100,10 +101,10 @@
</div> </div>
<div id="discordButtonContainer" style="display: none"> <div id="discordButtonContainer" class="popupElement" style="display: none">
<br/> <br/>
<a href="https://discord.gg/QnmVMpU" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a> <a href="https://discord.gg/QnmVMpU" class="popupElement" target="_blank"><img src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png" height="32px"/></a>
<br/> <br/>
@@ -111,23 +112,23 @@
<br/> <br/>
<span id="hideDiscordButton" class="smallLink">Hide this</span> <span id="hideDiscordButton" class="smallLink popupElement">Hide this</span>
</div> </div>
<div id="optionsButtonContainer"> <div id="optionsButtonContainer" class="popupElement">
<br/> <br/>
<br/> <br/>
<button id="optionsButton" class="dangerButton">Options</button> <button id="optionsButton" class="dangerButton popupElement">Options</button>
</div> </div>
<div id="options" style="display: none"> <div id="options" class="popupElement" style="display: none">
<br/> <br/>
<h3>Options</h3> <h3>Options</h3>
<button id="hideVideoPlayerControls" class="warningButton">Hide Buttons On YouTube Player</button> <button id="hideVideoPlayerControls" class="warningButton popupElement">Hide Buttons On YouTube Player</button>
<button id="showVideoPlayerControls" style="display: none" class="warningButton">Show Buttons On YouTube Player</button> <button id="showVideoPlayerControls" style="display: none" class="warningButton popupElement">Show Buttons On YouTube Player</button>
<br/> <br/>
<sub> <sub>
This hides the buttons that appear on the YouTube player to submit sponsors. I can see this being annoying for some This hides the buttons that appear on the YouTube player to submit sponsors. I can see this being annoying for some
@@ -139,8 +140,8 @@
<br/> <br/>
<br/> <br/>
<button id="hideInfoButtonPlayerControls" class="warningButton">Hide Info Button On YouTube Player</button> <button id="hideInfoButtonPlayerControls" class="warningButton popupElement">Hide Info Button On YouTube Player</button>
<button id="showInfoButtonPlayerControls" style="display: none" class="warningButton">Show Info Button On YouTube Player</button> <button id="showInfoButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Info Button On YouTube Player</button>
<br/> <br/>
<sub> <sub>
This is the button that opens up a popup in the YouTube page. This is the button that opens up a popup in the YouTube page.
@@ -149,8 +150,8 @@
<br/> <br/>
<br/> <br/>
<button id="hideDeleteButtonPlayerControls" class="warningButton">Hide Delete Button On YouTube Player</button> <button id="hideDeleteButtonPlayerControls" class="warningButton popupElement">Hide Delete Button On YouTube Player</button>
<button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton">Show Delete Button On YouTube Player</button> <button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton popupElement">Show Delete Button On YouTube Player</button>
<br/> <br/>
<sub> <sub>
This is the button that allows you to clear all sponsors on the YouTube player. This is the button that allows you to clear all sponsors on the YouTube player.
@@ -159,8 +160,8 @@
<br/> <br/>
<br/> <br/>
<button id="disableSponsorViewTracking" class="warningButton">Disable Sponsor View Tracking</button> <button id="disableSponsorViewTracking" class="warningButton popupElement">Disable Sponsor View Tracking</button>
<button id="enableSponsorViewTracking" style="display: none" class="warningButton">Enable Sponsor View Tracking</button> <button id="enableSponsorViewTracking" style="display: none" class="warningButton popupElement">Enable Sponsor View Tracking</button>
<br/> <br/>
<sub> <sub>
This feature tracks which sponsors you have skipped to let users know how much their submission has helped others and This feature tracks which sponsors you have skipped to let users know how much their submission has helped others and
@@ -172,11 +173,12 @@
<br/> <br/>
<br/> <br/>
<button id="showNoticeAgain" style="display: none" class="dangerButton">Show Notice Again</button> <button id="showNoticeAgain" style="display: none" class="dangerButton popupElement">Show Notice Again</button>
</div> </div>
</div> </div>
</div> </div>
</center> </center>
</body>
<!-- Scripts that need to load after the html --> <!-- Scripts that need to load after the html -->
<script src="config.js"></script> <script src="config.js"></script>

87
popup.js
View File

@@ -1,6 +1,29 @@
//make this a function to allow this to run on the content page
function runThePopup() {
//is it in the popup or content script
var inPopup = true;
if (chrome.tabs == undefined) {
//this is on the content script, use direct communication
chrome.tabs = {};
chrome.tabs.sendMessage = function(id, request, callback) {
messageListener(request, null, callback);
}
//add a dummy query method
chrome.tabs.query = function(config, callback) {
callback([{
url: document.URL,
id: -1
}]);
}
inPopup = false;
}
// References // References
var SB = {}; let SB = {};
SB.sponsorStart = document.getElementById("sponsorStart"); SB.sponsorStart = document.getElementById("sponsorStart");
SB.clearTimes = document.getElementById("clearTimes"); SB.clearTimes = document.getElementById("clearTimes");
@@ -47,16 +70,16 @@ SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
//if true, the button now selects the end time //if true, the button now selects the end time
var startTimeChosen = false; let startTimeChosen = false;
//the start and end time pairs (2d) //the start and end time pairs (2d)
var sponsorTimes = []; let sponsorTimes = [];
//current video ID of this tab //current video ID of this tab
var currentVideoID = null; let currentVideoID = null;
//is this a YouTube tab? //is this a YouTube tab?
var isYouTubeTab = false; let isYouTubeTab = false;
//see if discord link can be shown //see if discord link can be shown
chrome.storage.sync.get(["hideDiscordLink"], function(result) { chrome.storage.sync.get(["hideDiscordLink"], function(result) {
@@ -78,7 +101,7 @@ chrome.storage.sync.get(["hideDiscordLink"], function(result) {
} }
}); });
//if the don't show notice again variable is true, an option to //if the don't show notice again letiable is true, an option to
// disable should be available // disable should be available
chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) { chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
let dontShowNoticeAgain = result.dontShowNoticeAgain; let dontShowNoticeAgain = result.dontShowNoticeAgain;
@@ -161,6 +184,7 @@ chrome.tabs.query({
currentWindow: true currentWindow: true
}, loadTabData); }, loadTabData);
function loadTabData(tabs) { function loadTabData(tabs) {
//set current videoID //set current videoID
currentVideoID = getYouTubeVideoID(tabs[0].url); currentVideoID = getYouTubeVideoID(tabs[0].url);
@@ -210,7 +234,7 @@ function infoFound(request) {
//if request is undefined, then the page currently being browsed is not YouTube //if request is undefined, then the page currently being browsed is not YouTube
if (request != undefined) { if (request != undefined) {
//this must be a YouTube video //this must be a YouTube video
//set variable //set letiable
isYouTubeTab = true; isYouTubeTab = true;
//remove loading text //remove loading text
@@ -295,7 +319,7 @@ function displayDownloadedSponsorTimes(request) {
let container = document.getElementById("issueReporterTimeButtons"); let container = document.getElementById("issueReporterTimeButtons");
for (let i = 0; i < request.sponsorTimes.length; i++) { for (let i = 0; i < request.sponsorTimes.length; i++) {
let sponsorTimeButton = document.createElement("button"); let sponsorTimeButton = document.createElement("button");
sponsorTimeButton.className = "warningButton"; sponsorTimeButton.className = "warningButton popupElement";
sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]); sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]);
let votingButtons = document.createElement("div"); let votingButtons = document.createElement("div");
@@ -310,13 +334,13 @@ function displayDownloadedSponsorTimes(request) {
let upvoteButton = document.createElement("img"); let upvoteButton = document.createElement("img");
upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID; upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
upvoteButton.className = "voteButton"; upvoteButton.className = "voteButton popupElement";
upvoteButton.src = chrome.extension.getURL("icons/upvote.png"); upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
upvoteButton.addEventListener("click", () => vote(1, UUID)); upvoteButton.addEventListener("click", () => vote(1, UUID));
let downvoteButton = document.createElement("img"); let downvoteButton = document.createElement("img");
downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID; downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
downvoteButton.className = "voteButton"; downvoteButton.className = "voteButton popupElement";
downvoteButton.src = chrome.extension.getURL("icons/downvote.png"); downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
downvoteButton.addEventListener("click", () => vote(0, UUID)); downvoteButton.addEventListener("click", () => vote(0, UUID));
@@ -375,13 +399,13 @@ function getSponsorTimesMessageDiv(sponsorTimes) {
for (let i = 0; i < sponsorTimes.length; i++) { for (let i = 0; i < sponsorTimes.length; i++) {
let currentSponsorTimeContainer = document.createElement("div"); let currentSponsorTimeContainer = document.createElement("div");
currentSponsorTimeContainer.id = "sponsorTimeContainer" + i; currentSponsorTimeContainer.id = "sponsorTimeContainer" + i;
currentSponsorTimeContainer.className = "sponsorTime"; currentSponsorTimeContainer.className = "sponsorTime popupElement";
let currentSponsorTimeMessage = ""; let currentSponsorTimeMessage = "";
let deleteButton = document.createElement("span"); let deleteButton = document.createElement("span");
deleteButton.id = "sponsorTimeDeleteButton" + i; deleteButton.id = "sponsorTimeDeleteButton" + i;
deleteButton.innerText = "Delete"; deleteButton.innerText = "Delete";
deleteButton.className = "mediumLink"; deleteButton.className = "mediumLink popupElement";
let index = i; let index = i;
deleteButton.addEventListener("click", () => deleteSponsorTime(index)); deleteButton.addEventListener("click", () => deleteSponsorTime(index));
@@ -391,7 +415,7 @@ function getSponsorTimesMessageDiv(sponsorTimes) {
let editButton = document.createElement("span"); let editButton = document.createElement("span");
editButton.id = "sponsorTimeEditButton" + i; editButton.id = "sponsorTimeEditButton" + i;
editButton.innerText = "Edit"; editButton.innerText = "Edit";
editButton.className = "mediumLink"; editButton.className = "mediumLink popupElement";
editButton.addEventListener("click", () => editSponsorTime(index)); editButton.addEventListener("click", () => editSponsorTime(index));
for (let s = 0; s < sponsorTimes[i].length; s++) { for (let s = 0; s < sponsorTimes[i].length; s++) {
@@ -433,31 +457,31 @@ function editSponsorTime(index) {
//get sponsor time minutes and seconds boxes //get sponsor time minutes and seconds boxes
let startTimeMinutes = document.createElement("input"); let startTimeMinutes = document.createElement("input");
startTimeMinutes.id = "startTimeMinutes" + index; startTimeMinutes.id = "startTimeMinutes" + index;
startTimeMinutes.className = "sponsorTime"; startTimeMinutes.className = "sponsorTime popupElement";
startTimeMinutes.type = "text"; startTimeMinutes.type = "text";
startTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][0]); startTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][0]);
startTimeMinutes.style.width = "45"; startTimeMinutes.style.width = "45px";
let startTimeSeconds = document.createElement("input"); let startTimeSeconds = document.createElement("input");
startTimeSeconds.id = "startTimeSeconds" + index; startTimeSeconds.id = "startTimeSeconds" + index;
startTimeSeconds.className = "sponsorTime"; startTimeSeconds.className = "sponsorTime popupElement";
startTimeSeconds.type = "text"; startTimeSeconds.type = "text";
startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][0]); startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][0]);
startTimeSeconds.style.width = "60"; startTimeSeconds.style.width = "60px";
let endTimeMinutes = document.createElement("input"); let endTimeMinutes = document.createElement("input");
endTimeMinutes.id = "endTimeMinutes" + index; endTimeMinutes.id = "endTimeMinutes" + index;
endTimeMinutes.className = "sponsorTime"; endTimeMinutes.className = "sponsorTime popupElement";
endTimeMinutes.type = "text"; endTimeMinutes.type = "text";
endTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][1]); endTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][1]);
endTimeMinutes.style.width = "45"; endTimeMinutes.style.width = "45px";
let endTimeSeconds = document.createElement("input"); let endTimeSeconds = document.createElement("input");
endTimeSeconds.id = "endTimeSeconds" + index; endTimeSeconds.id = "endTimeSeconds" + index;
endTimeSeconds.className = "sponsorTime"; endTimeSeconds.className = "sponsorTime popupElement";
endTimeSeconds.type = "text"; endTimeSeconds.type = "text";
endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][1]); endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][1]);
endTimeSeconds.style.width = "60"; endTimeSeconds.style.width = "60px";
let colonText = document.createElement("span"); let colonText = document.createElement("span");
colonText.innerText = ":"; colonText.innerText = ":";
@@ -482,13 +506,13 @@ function editSponsorTime(index) {
let saveButton = document.createElement("span"); let saveButton = document.createElement("span");
saveButton.id = "sponsorTimeSaveButton" + index; saveButton.id = "sponsorTimeSaveButton" + index;
saveButton.innerText = "Save"; saveButton.innerText = "Save";
saveButton.className = "mediumLink"; saveButton.className = "mediumLink popupElement";
saveButton.addEventListener("click", () => saveSponsorTimeEdit(index)); saveButton.addEventListener("click", () => saveSponsorTimeEdit(index));
let editButton = document.getElementById("sponsorTimeEditButton" + index); let editButton = document.getElementById("sponsorTimeEditButton" + index);
let sponsorTimesContainer = document.getElementById("sponsorTimesContainer"); let sponsorTimesContainer = document.getElementById("sponsorTimesContainer");
sponsorTimesContainer.removeChild(editButton); editButton.remove();
sponsorTimesContainer.appendChild(saveButton); sponsorTimesContainer.appendChild(saveButton);
} }
@@ -773,7 +797,7 @@ function enableSponsorViewTracking() {
} }
function updateStartTimeChosen() { function updateStartTimeChosen() {
//update startTimeChosen variable //update startTimeChosen letiable
if (!startTimeChosen) { if (!startTimeChosen) {
startTimeChosen = true; startTimeChosen = true;
SB.sponsorStart.innerHTML = "Sponsorship Ends Now"; SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
@@ -920,7 +944,18 @@ function sendRequestToServer(type, address, callback) {
} }
function getYouTubeVideoID(url) { // Return video id or false function getYouTubeVideoID(url) { // Return video id or false
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/; let regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
var match = url.match(regExp); let match = url.match(regExp);
return (match && match[7].length == 11) ? match[7] : false; return (match && match[7].length == 11) ? match[7] : false;
} }
//end of function
}
if (chrome.tabs != undefined) {
//add the width restriction (because Firefox)
document.getElementById("sponorBlockStyleSheet").sheet.insertRule('.popupBody { width: 300 }', 0);
//this means it is actually opened in the popup
runThePopup();
}