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

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

View File

@@ -59,8 +59,10 @@ chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
}
});
chrome.runtime.onMessage.addListener( // Detect URL Changes
function(request, sender, sendResponse) {
//get messages from the background script and the popup
chrome.runtime.onMessage.addListener(messageListener);
function messageListener(request, sender, sendResponse) {
//message from background script
if (request.message == "ytvideoid") {
videoIDChange(request.id);
@@ -118,7 +120,7 @@ chrome.runtime.onMessage.addListener( // Detect URL Changes
if (request.message == "trackViewCount") {
trackViewCount = request.value;
}
});
}
//check for hotkey pressed
document.onkeydown = function(e){
@@ -474,13 +476,11 @@ function openInfoMenu() {
//hide info button
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";
let popupFrame = document.createElement("iframe");
popupFrame.id = "sponsorBlockPopupFrame"
popupFrame.src = chrome.extension.getURL("popup.html");
popupFrame.className = "popup";
popup.innerHTML = xmlhttp.responseText
//close button
let closeButton = document.createElement("div");
@@ -489,8 +489,8 @@ function openInfoMenu() {
closeButton.setAttribute("align", "center");
closeButton.addEventListener("click", closeInfoMenu);
popup.appendChild(closeButton);
popup.appendChild(popupFrame);
//add the close button
popup.prepend(closeButton);
let parentNode = document.getElementById("secondary");
if (parentNode == null) {
@@ -498,7 +498,21 @@ function openInfoMenu() {
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() {

View File

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

View File

@@ -1,7 +1,7 @@
{
"name": "SponsorBlock for YouTube - Skip Sponsorships",
"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.",
"content_scripts": [
{
@@ -10,11 +10,13 @@
],
"js": [
"config.js",
"content.js"
"content.js",
"popup.js"
],
"css": [
"content.css",
"./libs/Source+Sans+Pro.css"
"./libs/Source+Sans+Pro.css",
"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;
}
h1 {
h1.popupElement {
margin-top: 0px;
}
body {
.popupBody {
font-size: 14px;
min-width: 300px;
background-color: #ffd9d9;
padding: 5px;
}
.recordingSubtitle {
.recordingSubtitle.popupElement {
margin-bottom: 10px;
}
.voteButton {
.voteButton.popupElement {
height: 32px;
margin-right: 15px;
cursor: pointer;
}
.voteButton:hover {
.voteButton:hover.popupElement {
filter: brightness(80%);
}
#discordButtonContainer {
#discordButtonContainer.popupElement {
font-size: 12px;
}
.sponsorTime {
.sponsorTime.popupElement {
font-size: 20px;
}
.smallLink {
.smallLink.popupElement {
font-size: 10px;
text-decoration: underline;
cursor: pointer;
}
.mediumLink {
.mediumLink.popupElement {
font-size: 15px;
padding-left: 15px;
padding-right: 15px;
@@ -47,7 +77,7 @@ body {
cursor: pointer;
}
.greenButton {
.greenButton.popupElement {
background-color:#ec1c1c;
-moz-border-radius:28px;
-webkit-border-radius:28px;
@@ -61,19 +91,19 @@ body {
text-decoration:none;
text-shadow:0px 0px 0px #662727;
}
.greenButton:hover {
.greenButton:hover.popupElement {
background-color:#bf2a2a;
}
.greenButton:focus {
.greenButton:focus.popupElement {
outline: none;
background-color:#bf2a2a;
}
.greenButton:active {
.greenButton:active.popupElement {
position:relative;
top:1px;
}
.dangerButton {
.dangerButton.popupElement {
-moz-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;
@@ -90,19 +120,19 @@ body {
text-decoration:none;
text-shadow:0px 1px 0px #854629;
}
.dangerButton:hover {
.dangerButton:hover.popupElement {
background-color:#bc3315;
}
.dangerButton:focus {
.dangerButton:focus.popupElement {
outline: none;
background-color:#bc3315;
}
.dangerButton:active {
.dangerButton:active.popupElement {
position:relative;
top:1px;
}
.warningButton {
.warningButton.popupElement {
-moz-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;
@@ -119,19 +149,19 @@ body {
text-decoration:none;
text-shadow:0px 1px 0px #856829;
}
.warningButton:hover {
.warningButton:hover.popupElement {
background-color:#bc8215;
}
.warningButton:focus {
.warningButton:focus.popupElement {
outline: none;
background-color:#bc8215;
}
.warningButton:active {
.warningButton:active.popupElement {
position:relative;
top:1px;
}
.smallButton {
.smallButton.popupElement {
background-color:#f9902d;
-moz-border-radius:3px;
-webkit-border-radius:3px;
@@ -144,14 +174,14 @@ body {
padding:6px 10px;
text-decoration:none;
}
.smallButton:hover {
.smallButton:hover.popupElement {
background-color:#fa9806;
}
.smallButton:focus {
.smallButton:focus.popupElement {
outline: none;
background-color:#fa9806;
}
.smallButton:active {
.smallButton:active.popupElement {
position:relative;
top:1px;
}

View File

@@ -1,97 +1,98 @@
<html>
<head>
<title>Set Page Color Popup</title>
<link rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
<link rel="stylesheet" type="text/css" href="popup.css"/>
<link id="sponorBlockPopupFont" rel="stylesheet" type="text/css" href="/libs/Source+Sans+Pro.css"/>
<link id="sponorBlockStyleSheet" rel="stylesheet" type="text/css" href="popup.css"/>
</head>
<body class="popupBody">
<center>
<div id="app">
<img src="icons/LogoSponsorBlocker256px.png" height="64px"/>
<div id="app" class="popupBody">
<img src="icons/LogoSponsorBlocker256px.png" height="64px" id="sponsorBlockPopupLogo"/>
<h1>SponsorBlock</h1>
<h1 class="popupElement">SponsorBlock</h1>
<!-- Loading text -->
<p id="loadingIndicator">Loading...</p>
<p id="loadingIndicator" class="popupElement">Loading...</p>
<!-- 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 -->
<div id="videoFound">
</div>
<div id="downloadedSponsorMessageTimes">
<div id="downloadedSponsorMessageTimes" class="popupElement">
</div>
<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>
<h2 class="recordingSubtitle">Record the times of a sponsorship</h2>
<h2 class="recordingSubtitle popupElement">Record the times of a sponsorship</h2>
<p>
<span id=sponsorTimesContributionsContainer style="display: none">
<p class="popupElement">
<span id=sponsorTimesContributionsContainer class="popupElement" style="display: none">
So far, you've submitted
<span id="sponsorTimesContributionsDisplay">
<span id="sponsorTimesContributionsDisplay" class="popupElement">
0
</span>
<span id="sponsorTimesContributionsDisplayEndWord">
<span id="sponsorTimesContributionsDisplayEndWord" class="popupElement">
sponsors.
</span>
</span>
<span id=sponsorTimesViewsContainer style="display: none">
<span id=sponsorTimesViewsContainer class="popupElement" style="display: none">
You have saved people from
<span id="sponsorTimesViewsDisplay">
<span id="sponsorTimesViewsDisplay" class="popupElement">
0
</span>
<span id="sponsorTimesViewsDisplayEndWord">
<span id="sponsorTimesViewsDisplayEndWord" class="popupElement">
sponsor segments.
</span>
</span>
</p>
<p>
<p class="popupElement">
Click the button below when the sponsorship starts and ends to record and
submit it to the database.
</p>
<div>
<button id="sponsorStart" class="greenButton">Sponsorship Starts Now</button>
<button id="sponsorStart" class="greenButton popupElement">Sponsorship Starts Now</button>
</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">
<h3>Latest Sponsor Message Times Chosen</h3>
<div id="submissionSection" class="popupElement" style="display: none">
<h3 class="popupElement">Latest Sponsor Message Times Chosen</h3>
<b>
<div id="sponsorMessageTimes">
<div id="sponsorMessageTimes" class="popupElement">
</div>
</b>
<button id="clearTimes" class="smallButton">Clear Times</button>
<button id="clearTimes" class="smallButton popupElement">Clear Times</button>
<br/>
<br/>
<div id="submitTimesContainer" style="display: none">
<button id="submitTimes" class="smallButton">Submit Times</button>
<div id="submitTimesContainer" class="popupElement" style="display: none">
<button id="submitTimes" class="smallButton popupElement">Submit Times</button>
<div id="submitTimesInfoMessageContainer" style="display: none">
<h3 id="submitTimesInfoMessage">
<div id="submitTimesInfoMessageContainer" class="popupElement" style="display: none">
<h3 id="submitTimesInfoMessage" class="popupElement">
</h3>
</div>
@@ -100,10 +101,10 @@
</div>
<div id="discordButtonContainer" style="display: none">
<div id="discordButtonContainer" class="popupElement" style="display: none">
<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/>
@@ -111,23 +112,23 @@
<br/>
<span id="hideDiscordButton" class="smallLink">Hide this</span>
<span id="hideDiscordButton" class="smallLink popupElement">Hide this</span>
</div>
<div id="optionsButtonContainer">
<div id="optionsButtonContainer" class="popupElement">
<br/>
<br/>
<button id="optionsButton" class="dangerButton">Options</button>
<button id="optionsButton" class="dangerButton popupElement">Options</button>
</div>
<div id="options" style="display: none">
<div id="options" class="popupElement" style="display: none">
<br/>
<h3>Options</h3>
<button id="hideVideoPlayerControls" class="warningButton">Hide Buttons On YouTube Player</button>
<button id="showVideoPlayerControls" style="display: none" class="warningButton">Show 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 popupElement">Show Buttons On YouTube Player</button>
<br/>
<sub>
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/>
<button id="hideInfoButtonPlayerControls" class="warningButton">Hide Info Button On YouTube Player</button>
<button id="showInfoButtonPlayerControls" style="display: none" class="warningButton">Show 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 popupElement">Show Info Button On YouTube Player</button>
<br/>
<sub>
This is the button that opens up a popup in the YouTube page.
@@ -149,8 +150,8 @@
<br/>
<br/>
<button id="hideDeleteButtonPlayerControls" class="warningButton">Hide Delete Button On YouTube Player</button>
<button id="showDeleteButtonPlayerControls" style="display: none" class="warningButton">Show 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 popupElement">Show Delete Button On YouTube Player</button>
<br/>
<sub>
This is the button that allows you to clear all sponsors on the YouTube player.
@@ -159,8 +160,8 @@
<br/>
<br/>
<button id="disableSponsorViewTracking" class="warningButton">Disable Sponsor View Tracking</button>
<button id="enableSponsorViewTracking" style="display: none" class="warningButton">Enable Sponsor View Tracking</button>
<button id="disableSponsorViewTracking" class="warningButton popupElement">Disable Sponsor View Tracking</button>
<button id="enableSponsorViewTracking" style="display: none" class="warningButton popupElement">Enable Sponsor View Tracking</button>
<br/>
<sub>
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/>
<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>
</center>
</body>
<!-- Scripts that need to load after the html -->
<script src="config.js"></script>

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
var SB = {};
let SB = {};
SB.sponsorStart = document.getElementById("sponsorStart");
SB.clearTimes = document.getElementById("clearTimes");
@@ -47,16 +70,16 @@ SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
//if true, the button now selects the end time
var startTimeChosen = false;
let startTimeChosen = false;
//the start and end time pairs (2d)
var sponsorTimes = [];
let sponsorTimes = [];
//current video ID of this tab
var currentVideoID = null;
let currentVideoID = null;
//is this a YouTube tab?
var isYouTubeTab = false;
let isYouTubeTab = false;
//see if discord link can be shown
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
chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
let dontShowNoticeAgain = result.dontShowNoticeAgain;
@@ -161,6 +184,7 @@ chrome.tabs.query({
currentWindow: true
}, loadTabData);
function loadTabData(tabs) {
//set current videoID
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 != undefined) {
//this must be a YouTube video
//set variable
//set letiable
isYouTubeTab = true;
//remove loading text
@@ -295,7 +319,7 @@ function displayDownloadedSponsorTimes(request) {
let container = document.getElementById("issueReporterTimeButtons");
for (let i = 0; i < request.sponsorTimes.length; i++) {
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]);
let votingButtons = document.createElement("div");
@@ -310,13 +334,13 @@ function displayDownloadedSponsorTimes(request) {
let upvoteButton = document.createElement("img");
upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
upvoteButton.className = "voteButton";
upvoteButton.className = "voteButton popupElement";
upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
upvoteButton.addEventListener("click", () => vote(1, UUID));
let downvoteButton = document.createElement("img");
downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
downvoteButton.className = "voteButton";
downvoteButton.className = "voteButton popupElement";
downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
downvoteButton.addEventListener("click", () => vote(0, UUID));
@@ -375,13 +399,13 @@ function getSponsorTimesMessageDiv(sponsorTimes) {
for (let i = 0; i < sponsorTimes.length; i++) {
let currentSponsorTimeContainer = document.createElement("div");
currentSponsorTimeContainer.id = "sponsorTimeContainer" + i;
currentSponsorTimeContainer.className = "sponsorTime";
currentSponsorTimeContainer.className = "sponsorTime popupElement";
let currentSponsorTimeMessage = "";
let deleteButton = document.createElement("span");
deleteButton.id = "sponsorTimeDeleteButton" + i;
deleteButton.innerText = "Delete";
deleteButton.className = "mediumLink";
deleteButton.className = "mediumLink popupElement";
let index = i;
deleteButton.addEventListener("click", () => deleteSponsorTime(index));
@@ -391,7 +415,7 @@ function getSponsorTimesMessageDiv(sponsorTimes) {
let editButton = document.createElement("span");
editButton.id = "sponsorTimeEditButton" + i;
editButton.innerText = "Edit";
editButton.className = "mediumLink";
editButton.className = "mediumLink popupElement";
editButton.addEventListener("click", () => editSponsorTime(index));
for (let s = 0; s < sponsorTimes[i].length; s++) {
@@ -433,31 +457,31 @@ function editSponsorTime(index) {
//get sponsor time minutes and seconds boxes
let startTimeMinutes = document.createElement("input");
startTimeMinutes.id = "startTimeMinutes" + index;
startTimeMinutes.className = "sponsorTime";
startTimeMinutes.className = "sponsorTime popupElement";
startTimeMinutes.type = "text";
startTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][0]);
startTimeMinutes.style.width = "45";
startTimeMinutes.style.width = "45px";
let startTimeSeconds = document.createElement("input");
startTimeSeconds.id = "startTimeSeconds" + index;
startTimeSeconds.className = "sponsorTime";
startTimeSeconds.className = "sponsorTime popupElement";
startTimeSeconds.type = "text";
startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][0]);
startTimeSeconds.style.width = "60";
startTimeSeconds.style.width = "60px";
let endTimeMinutes = document.createElement("input");
endTimeMinutes.id = "endTimeMinutes" + index;
endTimeMinutes.className = "sponsorTime";
endTimeMinutes.className = "sponsorTime popupElement";
endTimeMinutes.type = "text";
endTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][1]);
endTimeMinutes.style.width = "45";
endTimeMinutes.style.width = "45px";
let endTimeSeconds = document.createElement("input");
endTimeSeconds.id = "endTimeSeconds" + index;
endTimeSeconds.className = "sponsorTime";
endTimeSeconds.className = "sponsorTime popupElement";
endTimeSeconds.type = "text";
endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][1]);
endTimeSeconds.style.width = "60";
endTimeSeconds.style.width = "60px";
let colonText = document.createElement("span");
colonText.innerText = ":";
@@ -482,13 +506,13 @@ function editSponsorTime(index) {
let saveButton = document.createElement("span");
saveButton.id = "sponsorTimeSaveButton" + index;
saveButton.innerText = "Save";
saveButton.className = "mediumLink";
saveButton.className = "mediumLink popupElement";
saveButton.addEventListener("click", () => saveSponsorTimeEdit(index));
let editButton = document.getElementById("sponsorTimeEditButton" + index);
let sponsorTimesContainer = document.getElementById("sponsorTimesContainer");
sponsorTimesContainer.removeChild(editButton);
editButton.remove();
sponsorTimesContainer.appendChild(saveButton);
}
@@ -773,7 +797,7 @@ function enableSponsorViewTracking() {
}
function updateStartTimeChosen() {
//update startTimeChosen variable
//update startTimeChosen letiable
if (!startTimeChosen) {
startTimeChosen = true;
SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
@@ -920,7 +944,18 @@ function sendRequestToServer(type, address, callback) {
}
function getYouTubeVideoID(url) { // Return video id or false
var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
var match = url.match(regExp);
let regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
let match = url.match(regExp);
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();
}