mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2025-12-08 20:47:11 +03:00
Added help page on install.
This commit is contained in:
Ajay Ramachandran
@@ -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
|
//gets the sponsor times from memory
|
||||||
function getSponsorTimes(videoID, callback) {
|
function getSponsorTimes(videoID, callback) {
|
||||||
|
|||||||
@@ -31,7 +31,9 @@
|
|||||||
"icons/downvote.png",
|
"icons/downvote.png",
|
||||||
"icons/PlayerInfoIconSponsorBlocker256px.png",
|
"icons/PlayerInfoIconSponsorBlocker256px.png",
|
||||||
"icons/PlayerDeleteIconSponsorBlocker256px.png",
|
"icons/PlayerDeleteIconSponsorBlocker256px.png",
|
||||||
"popup.html"
|
"popup.html",
|
||||||
|
"help/index.html",
|
||||||
|
"help/style.css"
|
||||||
],
|
],
|
||||||
"permissions": [
|
"permissions": [
|
||||||
"tabs",
|
"tabs",
|
||||||
|
|||||||
122
help/index.html
Normal file
122
help/index.html
Normal file
@@ -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>
|
||||||
176
help/styles.css
Normal file
176
help/styles.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
@@ -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.22",
|
"version": "1.0.23",
|
||||||
"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": [
|
||||||
{
|
{
|
||||||
@@ -31,7 +31,9 @@
|
|||||||
"icons/downvote.png",
|
"icons/downvote.png",
|
||||||
"icons/PlayerInfoIconSponsorBlocker256px.png",
|
"icons/PlayerInfoIconSponsorBlocker256px.png",
|
||||||
"icons/PlayerDeleteIconSponsorBlocker256px.png",
|
"icons/PlayerDeleteIconSponsorBlocker256px.png",
|
||||||
"popup.html"
|
"popup.html",
|
||||||
|
"help/index.html",
|
||||||
|
"help/style.css"
|
||||||
],
|
],
|
||||||
"permissions": [
|
"permissions": [
|
||||||
"tabs",
|
"tabs",
|
||||||
|
|||||||
Reference in New Issue
Block a user