Skip to content

Commit 83b4bbc

Browse files
ajayyyajayyy
authored
Merge pull request #56 from ajayyy/experimental
Added help page on install
2 parents 9462886 + 585be8a commit 83b4bbc

File tree

5 files changed

+318
-3
lines changed

5 files changed

+318
-3
lines changed

‎background.js

+13
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,19 @@ chrome.runtime.onMessage.addListener(function (request, sender, callback) {
5757
}
5858
});
5959

60+
//add help page on install
61+
chrome.runtime.onInstalled.addListener(function (object) {
62+
chrome.storage.sync.get(["shownInstallPage"], function(result) {
63+
let shownInstallPage = result.shownInstallPage;
64+
if (shownInstallPage == undefined || !shownInstallPage) {
65+
//open up the install page
66+
chrome.tabs.create({url: chrome.extension.getURL("/help/index.html")});
67+
68+
//save that this happened
69+
chrome.storage.sync.set({shownInstallPage: true});
70+
}
71+
});
72+
});
6073

6174
//gets the sponsor times from memory
6275
function getSponsorTimes(videoID, callback) {

‎firefox_manifest.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,9 @@
3131
"icons/downvote.png",
3232
"icons/PlayerInfoIconSponsorBlocker256px.png",
3333
"icons/PlayerDeleteIconSponsorBlocker256px.png",
34-
"popup.html"
34+
"popup.html",
35+
"help/index.html",
36+
"help/style.css"
3537
],
3638
"permissions": [
3739
"tabs",

‎help/index.html

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
<head>
2+
<title> SponsorBlock </title>
3+
4+
<link href="styles.css" rel="stylesheet"/>
5+
</head>
6+
7+
<body>
8+
9+
<div id="title">
10+
<img src="https://github.com/ajayyy/SponsorBlock/raw/master/icons/LogoSponsorBlocker256px.png" height="80" class="profilepic"/>
11+
SponsorBlock
12+
</div>
13+
14+
<center>
15+
16+
<p class="createdBy">Created By <a href="https://ajay.app">Ajay Ramachandran</a></p>
17+
18+
<p>
19+
Thanks for installing SponsorBlock. Here are some quick tips for getting started. Please join the Discord if you have any questions or suggestions.
20+
</p>
21+
22+
<p class="projectPreview">
23+
<span class="projectPreviewImage">
24+
<a href="https://discord.gg/QnmVMpU"><img width="80" src="https://www.logolynx.com/images/logolynx/1b/1bcc0f0aefe71b2c8ce66ffe8645d365.png"/></a>
25+
</span>
26+
27+
Come contribute, make some suggestions and help out in the Discord: <a href="https://discord.gg/QnmVMpU">https://discord.gg/QnmVMpU</a>
28+
</p>
29+
30+
<h1>How skipping works</h1>
31+
32+
<p class="projectPreview">
33+
<span class="projectPreviewImageLarge">
34+
<img src="https://i.imgur.com/caf5Bju.png">
35+
</span>
36+
37+
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.
38+
39+
<br/>
40+
<br/>
41+
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.
42+
</p>
43+
44+
<center><img height="120px" src="https://i.imgur.com/1M0WZ99.gif"></center>
45+
46+
<h1>Submitting</h1>
47+
48+
<p class="projectPreview">
49+
<span class="projectPreviewImageLargeRight">
50+
<img src="https://i.imgur.com/A1ilk6x.gif">
51+
</span>
52+
53+
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.
54+
55+
<br/>
56+
<br/>
57+
58+
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.
59+
</p>
60+
61+
<h1>Editing</h1>
62+
63+
<p class="projectPreview">
64+
<span class="projectPreviewImageLarge">
65+
<img src="https://i.imgur.com/DZHqbsx.gif">
66+
</span>
67+
68+
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).
69+
70+
</p>
71+
72+
<h1>This is too slow</h1>
73+
74+
<p>
75+
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.
76+
</p>
77+
78+
<h1>I hate these buttons, they are so ugly</h1>
79+
80+
<p>
81+
All player buttons can be hidden in the options.
82+
</p>
83+
84+
<h1>Can I get a copy of the Database? What happens if you disappear?</h1>
85+
86+
<p>
87+
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.
88+
</p>
89+
90+
<h1>News and how it is made</h1>
91+
92+
<p>
93+
See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>.
94+
</p>
95+
96+
<h1>I want more features!</h1>
97+
98+
<p>
99+
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.
100+
</p>
101+
102+
<h1>Where can I get the source code</h1>
103+
104+
<h4 style="display: inline">Client:</h4>
105+
<!-- Github logo -->
106+
<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>
107+
108+
<h4 style="display: inline; padding-left: 20px">Server:</h4>
109+
<!-- Github logo -->
110+
<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>
111+
112+
<h1>Credit</h1>
113+
114+
<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>
115+
116+
<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>
117+
118+
<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>
119+
120+
</center>
121+
122+
</body>

‎help/styles.css

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
:not(.hljs-keyword):not(.hljs-comment):not(.hljs-number):not(.hljs-string):not(pre):not(code) {
2+
background-color: #333333;
3+
}
4+
5+
.projectPreview {
6+
position: relative;
7+
}
8+
9+
.projectPreviewImage {
10+
position: absolute;
11+
left: -90;
12+
width: 80;
13+
top: 50%;
14+
transform: translateY(-50%);
15+
}
16+
17+
.projectPreviewImageLarge {
18+
position: absolute;
19+
left: -210;
20+
width: 200;
21+
top: 50%;
22+
transform: translateY(-20%);
23+
}
24+
25+
.projectPreviewImageLargeRight {
26+
position: absolute;
27+
right: -210;
28+
width: 200;
29+
top: 50%;
30+
transform: translateY(-50%);
31+
}
32+
33+
.createdBy {
34+
font-size: 14px;
35+
text-align: center;
36+
padding-top: 0px;
37+
padding-bottom: 0px;
38+
}
39+
40+
#title {
41+
background-color: #636363;
42+
43+
text-align: center;
44+
vertical-align: middle;
45+
46+
font-family: sans-serif;
47+
font-size: 50;
48+
color: #212121;
49+
50+
/* height: 100; */
51+
52+
padding: 20;
53+
54+
text-decoration: none;
55+
56+
transition: font-size 1s;
57+
}
58+
59+
#title:hover {
60+
font-size: 60;
61+
62+
transition: font-size 1s;
63+
}
64+
65+
.subtitle {
66+
font-family: sans-serif;
67+
font-size: 40;
68+
color: #dad8d8;
69+
70+
padding-top: 10;
71+
72+
transition: font-size 0.4s;
73+
}
74+
75+
.subtitle:hover {
76+
font-size: 45;
77+
78+
transition: font-size 0.4s;
79+
}
80+
81+
.profilepic {
82+
background-color: #636363 !important;
83+
vertical-align: middle;
84+
}
85+
86+
a {
87+
text-decoration: underline;
88+
color: inherit;
89+
}
90+
91+
.link {
92+
padding: 20;
93+
94+
height: 80px;
95+
96+
transition: height 0.2s;
97+
}
98+
99+
.link:hover {
100+
height: 95px;
101+
102+
transition: height 0.2s;
103+
}
104+
105+
#contact,.smalllink {
106+
font-family: sans-serif;
107+
font-size: 25;
108+
color: #e8e8e8;
109+
110+
text-align: center;
111+
112+
padding: 10;
113+
}
114+
115+
#contact {
116+
text-decoration: none;
117+
}
118+
119+
p,li {
120+
font-family: sans-serif;
121+
font-size: 20;
122+
color: #c4c4c4;
123+
124+
padding: 10;
125+
}
126+
127+
p,li,code,a {
128+
max-width: 60%;
129+
text-align: left;
130+
overflow-wrap: break-word;
131+
}
132+
133+
@media screen and (orientation:portrait) {
134+
p,li,code,a {
135+
max-width: 100%;
136+
}
137+
138+
.projectPreviewImage {
139+
position: unset;
140+
width: 130;
141+
display: block;
142+
margin: auto;
143+
transform: none;
144+
}
145+
}
146+
147+
.previewImage {
148+
max-height: 200px;
149+
}
150+
151+
img {
152+
max-width: 100%;
153+
154+
text-align: center;
155+
}
156+
157+
#recentPostTitle {
158+
font-family: sans-serif;
159+
font-size: 30;
160+
color: #dad8d8;
161+
}
162+
163+
#recentPostDate {
164+
font-family: sans-serif;
165+
font-size: 15;
166+
color: #dad8d8;
167+
}
168+
169+
h1,h2,h3,h4,h5,h6 {
170+
font-family: sans-serif;
171+
color: #dad8d8;
172+
}
173+
174+
svg {
175+
text-decoration: none;
176+
}

‎manifest.json

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "SponsorBlock for YouTube - Skip Sponsorships",
33
"short_name": "SponsorBlock",
4-
"version": "1.0.22",
4+
"version": "1.0.23",
55
"description": "Skip over sponsorship on YouTube videos. Report sponsors on videos you watch to save the time of others.",
66
"content_scripts": [
77
{
@@ -31,7 +31,9 @@
3131
"icons/downvote.png",
3232
"icons/PlayerInfoIconSponsorBlocker256px.png",
3333
"icons/PlayerDeleteIconSponsorBlocker256px.png",
34-
"popup.html"
34+
"popup.html",
35+
"help/index.html",
36+
"help/style.css"
3537
],
3638
"permissions": [
3739
"tabs",

0 commit comments

Comments
 (0)