diff --git a/background.js b/background.js index adb86553..96e5a309 100644 --- a/background.js +++ b/background.js @@ -3,6 +3,9 @@ var previousVideoID = null //the id of this user, randomly generated once per install var userID = null; +//the last video id loaded, to make sure it is a video id change +var sponsorVideoID = null; + //when a new tab is highlighted chrome.tabs.onActivated.addListener( function(activeInfo) { @@ -54,6 +57,19 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) { } }); +//add help page on install +chrome.runtime.onInstalled.addListener(function (object) { + chrome.storage.sync.get(["shownInstallPage"], function(result) { + let shownInstallPage = result.shownInstallPage; + if (shownInstallPage == undefined || !shownInstallPage) { + //open up the install page + chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")}); + + //save that this happened + chrome.storage.sync.set({shownInstallPage: true}); + } + }); +}); //gets the sponsor times from memory function getSponsorTimes(videoID, callback) { @@ -162,6 +178,12 @@ function videoIDChange(currentVideoID, tabId) { id: currentVideoID }); + //not a url change + if (sponsorVideoID == currentVideoID){ + return; + } + sponsorVideoID = currentVideoID; + //warn them if they had unsubmitted times if (previousVideoID != null) { //get the sponsor times from storage diff --git a/content.js b/content.js index 53347e07..c66e6937 100644 --- a/content.js +++ b/content.js @@ -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,31 +476,43 @@ function openInfoMenu() { //hide info button document.getElementById("infoButton").style.display = "none"; - let popup = document.createElement("div"); - popup.id = "sponsorBlockPopupContainer"; + 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.innerHTML = xmlhttp.responseText - let popupFrame = document.createElement("iframe"); - popupFrame.id = "sponsorBlockPopupFrame" - popupFrame.src = chrome.extension.getURL("popup.html"); - popupFrame.className = "popup"; + //close button + let closeButton = document.createElement("div"); + closeButton.innerText = "Close Popup"; + closeButton.classList = "smallLink"; + closeButton.setAttribute("align", "center"); + closeButton.addEventListener("click", closeInfoMenu); - //close button - let closeButton = document.createElement("div"); - closeButton.innerText = "Close Popup"; - closeButton.classList = "smallLink"; - closeButton.setAttribute("align", "center"); - closeButton.addEventListener("click", closeInfoMenu); + //add the close button + popup.prepend(closeButton); + + let parentNode = document.getElementById("secondary"); + if (parentNode == null) { + //old youtube theme + parentNode = document.getElementById("watch7-sidebar-contents"); + } - popup.appendChild(closeButton); - popup.appendChild(popupFrame); + //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"); - let parentNode = document.getElementById("secondary"); - if (parentNode == null) { - //old youtube theme - parentNode = document.getElementById("watch7-sidebar-contents"); - } + //remove the style sheet and font that are not necessary + popup.querySelector("#sponorBlockPopupFont").remove(); + popup.querySelector("#sponorBlockStyleSheet").remove(); - parentNode.prepend(popup); + parentNode.insertBefore(popup, parentNode.firstChild); + + //run the popup init script + runThePopup(); + } + }); } function closeInfoMenu() { diff --git a/firefox_manifest.json b/firefox_manifest.json index d8e2296b..e503a8e8 100644 --- a/firefox_manifest.json +++ b/firefox_manifest.json @@ -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" ] } ], @@ -29,7 +31,9 @@ "icons/downvote.png", "icons/PlayerInfoIconSponsorBlocker256px.png", "icons/PlayerDeleteIconSponsorBlocker256px.png", - "popup.html" + "popup.html", + "help/index.html", + "help/style.css" ], "permissions": [ "tabs", diff --git a/help/index.html b/help/index.html new file mode 100644 index 00000000..61e4e6ad --- /dev/null +++ b/help/index.html @@ -0,0 +1,122 @@ + + SponsorBlock + + + + + + +
+ + SponsorBlock +
+ +
+ +

Created By Ajay Ramachandran

+ +

+ Thanks for installing SponsorBlock. Here are some quick tips for getting started. Please join the Discord if you have any questions or suggestions. +

+ +

+ + + + + Come contribute, make some suggestions and help out in the Discord: https://discord.gg/QnmVMpU +

+ +

How skipping works

+ +

+ + + + + Videos will automatically be skipped if they are found in the database. You can open the popup by clicking the extension icon to get a preview of what they are. + +
+
+ Whenever you skip a video, you will get a notice allowing you to vote on that submission. If it worked, upvote it! You can also vote in the popup. +

+ +
+ +

Submitting

+ +

+ + + + + Submitting can either be done in the popup by hitting the "Sponsorship Starts Now" button or in the video player with the buttons on the player. + +
+
+ + Clicking the play button indicated the start of a sponsorship section and clicking the stop icon indicates the end. You can prepare multiple sponsors before hitting submit. Clicking the upload button will submit. Clicking the garbage can will delete. +

+ +

Editing

+ +

+ + + + + If you messed up, you can edit or delete your sponsor times in the popup or in the info menu (by hitting the info icon). + +

+ +

This is too slow

+ +

+ There are hotkeys if you want to use them. You must be focused on the YouTube player to use them. Press the semicolon key to indicate the start/end of a sponsor segment and click the appostrophe to submit. +

+ +

I hate these buttons, they are so ugly

+ +

+ All player buttons can be hidden in the options. +

+ +

Can I get a copy of the Database? What happens if you disappear?

+ +

+ The database is public and available at https://sponsor.ajay.app/database.db. The source code is freely available. So, even if something happens to me, your submissions are not lost. +

+ +

News and how it is made

+ +

+ See https://sponsor.ajay.app/news. +

+ +

I want more features!

+ +

+ Ask on Discord or make an Issue on GitHub. I am happy to hear suggestions or improvements you want. You may also contribute code or graphics if you would like. +

+ +

Where can I get the source code

+ +

Client:

+ + + +

Server:

+ + + +

Credit

+ +

The awesome Invidious API is used to grab the time the video was published.

+ +

Some icons made by Gregor Cresnar from www.flaticon.com and are licensed by CC 3.0 BY

+ +

Some icons made by Freepik from www.flaticon.com and are licensed by CC 3.0 BY

+ +
+ + \ No newline at end of file diff --git a/help/styles.css b/help/styles.css new file mode 100644 index 00000000..338f1810 --- /dev/null +++ b/help/styles.css @@ -0,0 +1,176 @@ +:not(.hljs-keyword):not(.hljs-comment):not(.hljs-number):not(.hljs-string):not(pre):not(code) { + background-color: #333333; +} + +.projectPreview { + position: relative; +} + +.projectPreviewImage { + position: absolute; + left: -90; + width: 80; + top: 50%; + transform: translateY(-50%); +} + +.projectPreviewImageLarge { + position: absolute; + left: -210; + width: 200; + top: 50%; + transform: translateY(-20%); +} + +.projectPreviewImageLargeRight { + position: absolute; + right: -210; + width: 200; + top: 50%; + transform: translateY(-50%); +} + +.createdBy { + font-size: 14px; + text-align: center; + padding-top: 0px; + padding-bottom: 0px; +} + +#title { + background-color: #636363; + + text-align: center; + vertical-align: middle; + + font-family: sans-serif; + font-size: 50; + color: #212121; + + /* height: 100; */ + + padding: 20; + + text-decoration: none; + + transition: font-size 1s; +} + +#title:hover { + font-size: 60; + + transition: font-size 1s; +} + +.subtitle { + font-family: sans-serif; + font-size: 40; + color: #dad8d8; + + padding-top: 10; + + transition: font-size 0.4s; +} + +.subtitle:hover { + font-size: 45; + + transition: font-size 0.4s; +} + +.profilepic { + background-color: #636363 !important; + vertical-align: middle; +} + +a { + text-decoration: underline; + color: inherit; +} + +.link { + padding: 20; + + height: 80px; + + transition: height 0.2s; +} + +.link:hover { + height: 95px; + + transition: height 0.2s; +} + +#contact,.smalllink { + font-family: sans-serif; + font-size: 25; + color: #e8e8e8; + + text-align: center; + + padding: 10; +} + +#contact { + text-decoration: none; +} + +p,li { + font-family: sans-serif; + font-size: 20; + color: #c4c4c4; + + padding: 10; +} + +p,li,code,a { + max-width: 60%; + text-align: left; + overflow-wrap: break-word; +} + +@media screen and (orientation:portrait) { + p,li,code,a { + max-width: 100%; + } + + .projectPreviewImage { + position: unset; + width: 130; + display: block; + margin: auto; + transform: none; + } +} + +.previewImage { + max-height: 200px; +} + +img { + max-width: 100%; + + text-align: center; +} + +#recentPostTitle { + font-family: sans-serif; + font-size: 30; + color: #dad8d8; +} + +#recentPostDate { + font-family: sans-serif; + font-size: 15; + color: #dad8d8; +} + +h1,h2,h3,h4,h5,h6 { + font-family: sans-serif; + color: #dad8d8; +} + +svg { + text-decoration: none; +} \ No newline at end of file diff --git a/manifest.json b/manifest.json index b683f4d7..60a434a7 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "SponsorBlock for YouTube - Skip Sponsorships", "short_name": "SponsorBlock", - "version": "1.0.16", + "version": "1.0.23", "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" ] } ], @@ -29,7 +31,9 @@ "icons/downvote.png", "icons/PlayerInfoIconSponsorBlocker256px.png", "icons/PlayerDeleteIconSponsorBlocker256px.png", - "popup.html" + "popup.html", + "help/index.html", + "help/style.css" ], "permissions": [ "tabs", diff --git a/popup.css b/popup.css index a33f408a..d1efc61f 100644 --- a/popup.css +++ b/popup.css @@ -1,45 +1,84 @@ -* { - font-family: 'Source Sans Pro', sans-serif; +/* 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 { +h1.popupElement { + margin-block-start: 0.67em; + margin-block-end: 0.67em; + margin-inline-start: 0px; + margin-inline-end: 0px; + font-weight: bold; +} + +h2.popupElement { + margin-block-start: 0.83em; + margin-block-end: 0.83em; + margin-inline-start: 0px; + margin-inline-end: 0px; + font-weight: bold; +} + +h3.popupElement { + margin-block-start: 1em; + margin-block-end: 1em; + margin-inline-start: 0px; + margin-inline-end: 0px; + font-weight: bold; +} + +sub.popupElement { + font-size: smaller; +} +/* end reset */ + +.popupElement { + font-family: 'Source Sans Pro', sans-serif; + + color: black; +} + +h1.popupElement { margin-top: 0px; } -body { - font-size: 14px; - min-width: 300px; - background-color: #ffd9d9; +.popupBody { + font-size: 14px; + 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,8 +86,8 @@ body { cursor: pointer; } -.greenButton { - background-color:#ec1c1c; +.greenButton.popupElement { + background-color:#ec1c1c; -moz-border-radius:28px; -webkit-border-radius:28px; border-radius:28px; @@ -61,19 +100,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 +129,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 +158,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 +183,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; -} +} \ No newline at end of file diff --git a/popup.html b/popup.html index db0a1cdb..acdd455c 100644 --- a/popup.html +++ b/popup.html @@ -1,182 +1,184 @@ Set Page Color Popup - - + + -
-
- + +
+
+ -

SponsorBlock

+

SponsorBlock

- -

Loading...

+ +

Loading...

- -
+
+