aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorAjay Ramachandran <[email protected]>2019-07-31 00:12:02 -0400
committerAjay Ramachandran <[email protected]>2019-07-31 00:12:02 -0400
commit585be8adf40e98f29e7ede2fa48e8db9e71f918a (patch)
treed0830c4afa2dea2bf144de2eafe56258c2df0973
parent85518d8130367cca69484caaed0ebddc9acf1cdb (diff)
downloadSponsorBlock-585be8adf40e98f29e7ede2fa48e8db9e71f918a.tar.gz
SponsorBlock-585be8adf40e98f29e7ede2fa48e8db9e71f918a.zip
Added help page on install.
-rw-r--r--background.js13
-rw-r--r--firefox_manifest.json4
-rw-r--r--help/index.html122
-rw-r--r--help/styles.css176
-rw-r--r--manifest.json6
5 files changed, 318 insertions, 3 deletions
diff --git a/background.js b/background.js
index 55729fff..96e5a309 100644
--- a/background.js
+++ b/background.js
@@ -57,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) {
diff --git a/firefox_manifest.json b/firefox_manifest.json
index 3948c08a..e503a8e8 100644
--- a/firefox_manifest.json
+++ b/firefox_manifest.json
@@ -31,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..28a2be0b
--- /dev/null
+++ b/help/index.html
@@ -0,0 +1,122 @@
+<head>
+ <title> SponsorBlock </title>
+
+ <link href="styles.css" rel="stylesheet"/>
+</head>
+
+<body>
+
+ <div id="title">
+ <img src="https://github.com/ajayyy/SponsorBlock/raw/master/icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
+ SponsorBlock
+ </div>
+
+ <center>
+
+ <p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a></p>
+
+ <p>
+ Thanks for installing SponsorBlock. Here are some quick tips for getting started. Please join the Discord if you have any questions or suggestions.
+ </p>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImage">
+ <a href="https://discord.gg/QnmVMpU"><img width="80" src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png"/></a>
+ </span>
+
+ Come contribute, make some suggestions and help out in the Discord: <a href="https://discord.gg/QnmVMpU">https://discord.gg/QnmVMpU</a>
+ </p>
+
+ <h1>How skipping works</h1>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImageLarge">
+ <img src="https://i.imgur.com/caf5Bju.png">
+ </span>
+
+ 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.
+
+ <br/>
+ <br/>
+ 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.
+ </p>
+
+ <center><img height="120px" src="https://i.imgur.com/1M0WZ99.gif"></center>
+
+ <h1>Submitting</h1>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImageLargeRight">
+ <img src="https://i.imgur.com/A1ilk6x.gif">
+ </span>
+
+ 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.
+
+ <br/>
+ <br/>
+
+ 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.
+ </p>
+
+ <h1>Editing</h1>
+
+ <p class="projectPreview">
+ <span class="projectPreviewImageLarge">
+ <img src="https://i.imgur.com/DZHqbsx.gif">
+ </span>
+
+ 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).
+
+ </p>
+
+ <h1>This is too slow</h1>
+
+ <p>
+ 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.
+ </p>
+
+ <h1>I hate these buttons, they are so ugly</h1>
+
+ <p>
+ All player buttons can be hidden in the options.
+ </p>
+
+ <h1>Can I get a copy of the Database? What happens if you disappear?</h1>
+
+ <p>
+ The database is public and available at <a href="https://sponsor.ajay.app/database.db">https://sponsor.ajay.app/database.db</a>. The source code is freely available. So, even if something happens to me, your submissions are not lost.
+ </p>
+
+ <h1>News and how it is made</h1>
+
+ <p>
+ See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>.
+ </p>
+
+ <h1>I want more features!</h1>
+
+ <p>
+ 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.
+ </p>
+
+ <h1>Where can I get the source code</h1>
+
+ <h4 style="display: inline">Client:</h4>
+ <!-- Github logo -->
+ <a href="https://github.com/ajayyy/SponsorBlock"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+
+ <h4 style="display: inline; padding-left: 20px">Server:</h4>
+ <!-- Github logo -->
+ <a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
+
+ <h1>Credit</h1>
+
+ <p>The awesome <a href="https://github.com/omarroth/invidious/wiki/API">Invidious API</a> is used to grab the time the video was published.</p>
+
+ <p>Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
+
+ <p>Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
+
+ </center>
+
+</body> \ 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 8c43cd9d..60a434a7 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
{
"name": "SponsorBlock for YouTube - Skip Sponsorships",
"short_name": "SponsorBlock",
- "version": "1.0.22",
+ "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": [
{
@@ -31,7 +31,9 @@
"icons/downvote.png",
"icons/PlayerInfoIconSponsorBlocker256px.png",
"icons/PlayerDeleteIconSponsorBlocker256px.png",
- "popup.html"
+ "popup.html",
+ "help/index.html",
+ "help/style.css"
],
"permissions": [
"tabs",