mirror of
https://github.com/ajayyy/SponsorBlock.git
synced 2024-11-10 09:07:45 +01:00
Merge pull request #56 from ajayyy/experimental
Added help page on install
This commit is contained in:
Ajay Ramachandran
GitHub
commit
83b4bbc95a
5 changed files with 318 additions and 3 deletions
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
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",
|
||||
"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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue