diff --git a/_locales/en/messages.json b/_locales/en/messages.json index d5684bb0..e7f641aa 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -332,5 +332,8 @@ }, "userIDChangeWarning": { "message": "Warning: Changing the UserID is permanent. Are you sure you would like to do this? Make sure to backup your old one just in case." + }, + "createdBy": { + "message": "Created By" } } diff --git a/help/index_en.html b/help/index_en.html index ac3a0987..5db3c81f 100644 --- a/help/index_en.html +++ b/help/index_en.html @@ -13,7 +13,7 @@
-

Created By Ajay Ramachandran

+

Created By Ajay Ramachandran

Thanks for installing SponsorBlock. Here are some quick tips for getting started. Please join the Discord if you have any questions or suggestions. diff --git a/icons/newprofilepic.jpg b/icons/newprofilepic.jpg new file mode 100644 index 00000000..2ffbe7ba Binary files /dev/null and b/icons/newprofilepic.jpg differ diff --git a/manifest.json b/manifest.json index 611376a4..aea51e65 100644 --- a/manifest.json +++ b/manifest.json @@ -65,5 +65,6 @@ "128": "icons/LogoSponsorBlocker128px.png", "256": "icons/LogoSponsorBlocker256px.png" }, + "options_page": "options/options.html", "manifest_version": 2 } diff --git a/options/options.css b/options/options.css new file mode 100644 index 00000000..c92114c5 --- /dev/null +++ b/options/options.css @@ -0,0 +1,261 @@ +/* Options page CSS */ +body { + font-family: Sans-Serif; +} + +#options { + max-width: 60%; + text-align: left; +} + +.switch-container:after { + content: attr(label-name); + position: absolute; + padding: 4px; + width: max-content; + + font-size: 14px; + color: white; +} + +.switch { + position: relative; + display: inline-block; + width: 40px; + height: 24px; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #707070; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 16px; + width: 16px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #fc0303; +} + +input:checked + .slider:before { + -webkit-transform: translateX(16px); + -ms-transform: translateX(16px); + transform: translateX(16px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} + + +/* Boilerplate CSS from https://ajay.app */ + +body { + 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; +} + +.profilepiccircle { + vertical-align: middle; + overflow: hidden; + border-radius: 50%; +} + +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/options/options.html b/options/options.html new file mode 100644 index 00000000..e0f3b7d8 --- /dev/null +++ b/options/options.html @@ -0,0 +1,34 @@ + + Options - SponsorBlock + + + + + + + + + +

+ + SponsorBlock +
+ +
+ +

__MSG_createdBy__ Ajay Ramachandran

+ +

__MSG_Options__

+ +
+ +
+ +
+ + diff --git a/options/options.js b/options/options.js new file mode 100644 index 00000000..9e398588 --- /dev/null +++ b/options/options.js @@ -0,0 +1,5 @@ +window.addEventListener('DOMContentLoaded', init); + +function init() { + localizeHtmlPage(); +} \ No newline at end of file diff --git a/popup.html b/popup.html index dffd393d..334219c1 100644 --- a/popup.html +++ b/popup.html @@ -7,7 +7,7 @@
-
+

__MSG_Name__ diff --git a/utils.js b/utils.js index 838769a2..f739ce8d 100644 --- a/utils.js +++ b/utils.js @@ -49,23 +49,34 @@ function getYouTubeVideoID(url) { function localizeHtmlPage() { //Localize by replacing __MSG_***__ meta tags - var objects = document.getElementsByClassName("popupBody")[0].children; + var objects = document.getElementsByClassName("sponsorBlockPageBody")[0].children; for (var j = 0; j < objects.length; j++) { var obj = objects[j]; + + let localizedMessage = getLocalizedMessage(obj.innerHTML.toString()); + if (localizedMessage) obj.innerHTML = localizedMessage; - var valStrH = obj.innerHTML.toString(); - var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1) - { - return v1 ? chrome.i18n.getMessage(v1) : ""; - }); - - if(valNewH != valStrH) - { - obj.innerHTML = valNewH; + // Try on each attribute + let attributes = obj.getAttributeNames(); + for (const attribute of attributes) { + localizedMessage = getLocalizedMessage(obj.getAttribute(attribute).toString()); + if (localizedMessage) obj.setAttribute(attribute) = localizedMessage; } } } +function getLocalizedMessage(text) { + var valNewH = text.replace(/__MSG_(\w+)__/g, function(match, v1) { + return v1 ? chrome.i18n.getMessage(v1) : ""; + }); + + if(valNewH != text) { + return valNewH; + } else { + return false; + } +} + function generateUserID(length = 36) { let charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; let result = "";