diff options
| -rw-r--r-- | background.js | 13 | ||||
| -rw-r--r-- | firefox_manifest.json | 4 | ||||
| -rw-r--r-- | help/index.html | 122 | ||||
| -rw-r--r-- | help/styles.css | 176 | ||||
| -rw-r--r-- | manifest.json | 6 |
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", |