Add two new options: skip_ads, disable_autoplay

Rearrange the options menu
This commit is contained in:
Lawrence Hook
2022-02-22 20:47:03 -05:00
parent 765fc14650
commit 402d6cab25
9 changed files with 223 additions and 86 deletions
+12 -6
View File
@@ -1,31 +1,37 @@
html[global_enable="true"] #masthead-ad,
html[global_enable="true"] ytd-mealbar-promo-renderer,
/* Main */
html[global_enable="true"][remove_homepage="true"] ytd-browse[page-subtype="home"],
html[global_enable="true"][remove_sidebar="true"] #secondary > div.circle,
html[global_enable="true"][remove_sidebar="true"] #related,
html[global_enable="true"][remove_end_of_video="true"] .html5-endscreen,
/* Site Navigation */
/* Left Bar Navigation */
html[global_enable="true"][remove_home_link="true"] a:not(#logo)[href="/"],
html[global_enable="true"][remove_explore_link="true"] a[href="/feed/trending"],
html[global_enable="true"][remove_shorts_link="true"] a[title="Shorts"],
html[global_enable="true"][remove_explore_link="true"] a[href="/feed/trending"],
html[global_enable="true"][remove_shorts_link="true"] ytd-mini-guide-entry-renderer[aria-label="Shorts"],
html[global_enable="true"][remove_explore_link="true"] a[href="/feed/explore"],
/* More Removal Options */
html[global_enable="true"][remove_entire_sidebar="true"] #secondary,
/* Homepage */
html[global_enable="true"][remove_infinite_scroll="true"] ytd-rich-grid-renderer > #contents > ytd-continuation-item-renderer,
html[global_enable="true"][remove_all_but_one="true"] ytd-rich-grid-renderer > #contents > ytd-rich-grid-row:nth-child(n+2),
html[global_enable="true"][remove_all_but_one="true"] ytd-rich-grid-renderer > #contents > ytd-continuation-item-renderer,
html[global_enable="true"][remove_extra_rows="true"] ytd-rich-grid-renderer > #contents > ytd-rich-grid-row + ytd-rich-section-renderer,
html[global_enable="true"][remove_thumbnail_mouseover_effect="true"] #mouseover-overlay,
/* Video Player */
html[global_enable="true"][remove_entire_sidebar="true"] #secondary,
html[global_enable="true"][remove_play_next_button="true"] a.ytp-next-button,
html[global_enable="true"][remove_comments="true"] #comments,
html[global_enable="true"][remove_comments="true"] #comment-teaser,
html[global_enable="true"][remove_comments="true"] ytd-engagement-panel-section-list-renderer[target-id="engagement-panel-comments-section"],
html[global_enable="true"][remove_chat="true"] #chat,
html[global_enable="true"][remove_info_cards="true"] .ytp-ce-element.ytp-ce-element,
/* Search Results Page */
html[global_enable="true"][remove_thumbnail_mouseover_effect="true"] #mouseover-overlay,
html[global_enable="true"][foo=bar]
{
+42 -9
View File
@@ -17,6 +17,15 @@ html[dark_mode='true'] body { background-color: #393939 }
html[dark_mode='true'] body * { color: #B9B9B9 }
html[dark_mode='true'] .footer-path { fill: #B9B9B9 }
html[dark_mode='true'] {
--hover-box-shadow-color: rgba(0, 0, 0, 0.95);
--hover-fieldset-legend-color: white;
}
html[dark_mode='false'] {
--hover-box-shadow-color: rgba(0, 0, 0, 0.30);
--hover-fieldset-legend-color: black;
}
/* Begin Main styling */
html, body { height: 100% }
@@ -28,7 +37,7 @@ body {
min-width: 349px;
max-width: 350px;
height: fit-content;
max-height: 600px;
max-height: 700px;
padding: 2px 2px 2px 2px;
margin: 2px 2px 2px 2px;
@@ -39,9 +48,23 @@ body, body * {
font-family: Helvetica;
}
.minor_text {
font-size: 10px;
font-style: italic;
label {
position: relative;
}
.tooltip {
position: absolute;
height: 95%;
/* center vertically */
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: 1px;
}
.tooltip:hover {
height: 110%;
}
/* Begin header */
@@ -113,20 +136,30 @@ body, body * {
-moz-transition: box-shadow 0.1s;
-o-transition: box-shadow 0.1s;
transition: box-shadow 0.1s;
padding: 2px;
}
#primary_options:hover {
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.30);
padding: 1px;
}
#primary_options div {
height: 16px;
height: 15px;
}
#primary_options fieldset:not(:nth-child(1)) {
margin-top: 5px;
}
fieldset {
padding-bottom: 5px;
box-sizing: border-box;
}
fieldset:hover legend, fieldset:hover legend * {
font-weight: bold;
color: var(--hover-fieldset-legend-color);
}
fieldset:hover {
box-shadow: 10px 5px 10px 1px var(--hover-box-shadow-color);
box-sizing: border-box;
}
.option_name_container {
cursor: default;
}
+1
View File
@@ -1,6 +1,7 @@
/* Personalized search results. */
html[global_enable="true"][remove_extra_results="true"] ytd-shelf-renderer,
html[global_enable="true"][foo=bar]
{
+10
View File
@@ -0,0 +1,10 @@
<!-- https://upload.wikimedia.org/wikipedia/commons/e/e4/Infobox_info_icon.svg -->
<svg xmlns="http://www.w3.org/2000/svg" height="160" width="160" version="1.0">
<g fill="#4b4b4b">
<circle cx="80" cy="80" r="70" fill="white" />
<path d="m80 15c-35.88 0-65 29.12-65 65s29.12 65 65 65 65-29.12 65-65-29.12-65-65-65zm0 10c30.36 0 55 24.64 55 55s-24.64 55-55 55-55-24.64-55-55 24.64-55 55-55z"/>
<path d="m57.373 18.231a9.3834 9.1153 0 1 1 -18.767 0 9.3834 9.1153 0 1 1 18.767 0z" transform="matrix(1.1989 0 0 1.2342 21.214 28.75)"/>
<path d="m90.665 110.96c-0.069 2.73 1.211 3.5 4.327 3.82l5.008 0.1v5.12h-39.073v-5.12l5.503-0.1c3.291-0.1 4.082-1.38 4.327-3.82v-30.813c0.035-4.879-6.296-4.113-10.757-3.968v-5.074l30.665-1.105"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 750 B

+38 -4
View File
@@ -8,33 +8,43 @@ const HTML = document.documentElement;
const SETTINGS_LIST = {
"dark_mode": { defaultValue: false, eventType: 'click' },
"global_enable": { defaultValue: true, eventType: 'click' },
"remove_homepage": { defaultValue: true, eventType: 'change' },
"remove_sidebar": { defaultValue: true, eventType: 'change' },
"remove_end_of_video": { defaultValue: true, eventType: 'change' },
"remove_all_but_one": { defaultValue: false, eventType: 'change' },
"remove_infinite_scroll": { defaultValue: false, eventType: 'change' },
"remove_extra_rows": { defaultValue: false, eventType: 'change' },
"remove_logo_link": { defaultValue: false, eventType: 'change' },
"remove_home_link": { defaultValue: false, eventType: 'change' },
"remove_shorts_link": { defaultValue: false, eventType: 'change' },
"remove_explore_link": { defaultValue: false, eventType: 'change' },
"remove_extra_results": { defaultValue: false, eventType: 'change' },
"remove_shorts_link": { defaultValue: false, eventType: 'change' },
"auto_skip_ads": { defaultValue: true, eventType: 'change' },
"remove_entire_sidebar": { defaultValue: false, eventType: 'change' },
"disable_autoplay": { defaultValue: false, eventType: 'change' },
"remove_info_cards": { defaultValue: false, eventType: 'change' },
"remove_play_next_button": { defaultValue: false, eventType: 'change' },
"remove_comments": { defaultValue: false, eventType: 'change' },
"remove_extra_results": { defaultValue: false, eventType: 'change' },
"remove_thumbnail_mouseover_effect": { defaultValue: false, eventType: 'change' },
"remove_chat": { defaultValue: false, eventType: 'change' },
"redirect_off": { defaultValue: true, eventType: 'change' },
"redirect_to_subs": { defaultValue: false, eventType: 'change' },
"redirect_to_wl": { defaultValue: false, eventType: 'change' },
};
// Initialize HTML attributes with local settings, or default.
const cache = {};
try {
browser.storage.local.get(localSettings => {
Object.entries(SETTINGS_LIST).forEach(([key, { defaultValue }]) => {
HTML.setAttribute(key, localSettings[key] ?? defaultValue);
cache[key] = localSettings[key] ?? defaultValue;
});
});
} catch (e) {
@@ -44,6 +54,30 @@ try {
// Update HTML attributes in real time.
// receive messages from options.js
browser.runtime.onMessage.addListener((data, sender) => {
data.forEach(({ key, value }) => HTML.setAttribute(key, value));
data.forEach(({ key, value }) => {
HTML.setAttribute(key, value);
cache[key] = value;
});
return true;
});
// Dynamic settings (i.e. js instead of css)
document.addEventListener("DOMContentLoaded", event => {
const observer = new MutationObserver(mutations => {
if (cache['global_enable'] !== true) return;
if (cache['disable_autoplay'] === true) {
document.querySelectorAll('.ytp-autonav-toggle-button[aria-checked=true]')?.[0]?.click();
}
if (cache['auto_skip_ads'] === true) {
document.querySelectorAll('.ytp-ad-skip-button')?.[0]?.click();
}
// if (cache['change_playback_speed']) {
// document.getElementsByTagName("video")[0].playbackRate = Number(cache['change_playback_speed']);
// }
});
observer.observe(document.body, { subtree: true, childList: true });
});
+5 -7
View File
@@ -2,14 +2,12 @@ if (typeof browser === 'undefined') {
browser = typeof chrome !== 'undefined' ? chrome : null;
}
const uninstallUrl = "http://lawrencehook.com/rys/👋";
browser.runtime.setUninstallURL(uninstallUrl);
browser.runtime.onInstalled.addListener(function (object) {
const installUrl = "http://lawrencehook.com/rys/welcome";
const uninstallUrl = "http://lawrencehook.com/rys/👋";
browser.runtime.onInstalled.addListener(object => {
const url = "http://lawrencehook.com/rys/welcome";
if (object.reason === browser.runtime.OnInstalledReason.INSTALL) {
browser.runtime.setUninstallURL(uninstallUrl);
browser.tabs.create({ url: installUrl }, tab => {});
browser.tabs.create({ url }, tab => {});
}
});
+14 -7
View File
@@ -6,25 +6,32 @@ if (typeof browser === 'undefined') {
// Some global constants.
const HTML = document.documentElement;
const SETTINGS_LIST = {
"dark_mode": { defaultValue: false, eventType: 'click' },
"dark_mode": { defaultValue: false, eventType: 'click' },
"global_enable": { defaultValue: true, eventType: 'click' },
"remove_homepage": { defaultValue: true, eventType: 'click' },
"remove_sidebar": { defaultValue: true, eventType: 'click' },
"remove_end_of_video": { defaultValue: true, eventType: 'click' },
"remove_logo_link": { defaultValue: false, eventType: 'click' },
"remove_home_link": { defaultValue: false, eventType: 'click' },
"remove_shorts_link": { defaultValue: false, eventType: 'click' },
"remove_explore_link": { defaultValue: false, eventType: 'click' },
"remove_infinite_scroll": { defaultValue: false, eventType: 'click' },
"remove_all_but_one": { defaultValue: false, eventType: 'click' },
"remove_extra_rows": { defaultValue: false, eventType: 'click' },
"remove_extra_results": { defaultValue: false, eventType: 'click' },
"remove_logo_link": { defaultValue: false, eventType: 'click' },
"remove_home_link": { defaultValue: false, eventType: 'click' },
"remove_explore_link": { defaultValue: false, eventType: 'click' },
"remove_shorts_link": { defaultValue: false, eventType: 'click' },
"auto_skip_ads": { defaultValue: false, eventType: 'click' },
"remove_entire_sidebar": { defaultValue: false, eventType: 'click' },
"disable_autoplay": { defaultValue: false, eventType: 'click' },
"remove_info_cards": { defaultValue: false, eventType: 'click' },
"remove_play_next_button": { defaultValue: false, eventType: 'click' },
"remove_comments": { defaultValue: false, eventType: 'click' },
"remove_extra_results": { defaultValue: false, eventType: 'click' },
"remove_thumbnail_mouseover_effect": { defaultValue: false, eventType: 'click' },
"remove_chat": { defaultValue: false, eventType: 'click' },
"redirect_off": { defaultValue: true, eventType: 'click' },
"redirect_to_subs": { defaultValue: false, eventType: 'click' },
"redirect_to_wl": { defaultValue: false, eventType: 'click' },
+1 -1
View File
@@ -3,7 +3,7 @@
"description": "Stop the YouTube rabbit hole. Customize YouTube's user interface to be less engaging.",
"homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions",
"manifest_version": 2,
"version": "4.2.7",
"version": "4.2.8",
"icons": {
"16": "images/16.png",
+100 -52
View File
@@ -48,24 +48,30 @@
<div id="primary_options">
<fieldset>
<legend></legend>
<legend>Basic</legend>
<div>
<input type="checkbox" id="remove_homepage" class="remove_homepage"
value="remove_homepage" checked />
<label for="remove_homepage">Homepage</label>
<label for="remove_homepage">
Homepage
</label>
</div>
<div>
<input type="checkbox" id="remove_sidebar" class="remove_sidebar"
value="remove_sidebar" checked />
<label for="remove_sidebar">Sidebar</label>
<label for="remove_sidebar">
Sidebar
</label>
</div>
<div>
<input type="checkbox" id="remove_end_of_video" class="remove_end_of_video"
value="remove_end_of_video" checked />
<label for="remove_end_of_video">End of video</label>
<label for="remove_end_of_video">
End of video
</label>
</div>
</fieldset>
@@ -75,20 +81,28 @@
<div>
<input type="checkbox" id="remove_all_but_one" class="remove_all_but_one"
value="remove_all_but_one" unchecked />
<label for="remove_all_but_one">All but first row</label>
<label for="remove_all_but_one">
All but first row
</label>
</div>
<div>
<input type="checkbox" id="remove_infinite_scroll" class="remove_infinite_scroll"
value="remove_infinite_scroll" unchecked />
<label for="remove_infinite_scroll">Infinite scroll</label>
<label for="remove_infinite_scroll">
Infinite scroll
</label>
</div>
<div>
<input type="checkbox" id="remove_extra_rows" class="remove_extra_rows"
value="remove_extra_rows" unchecked />
<label for="remove_extra_rows">Extra rows <a class='minor_text'>shorts, trending, etc.</a></label>
<label for="remove_extra_rows">
Extra rows
<img class="tooltip" src="images/tooltip.svg" title="Shorts, trending, etc.">
</label>
</div>
</fieldset>
<fieldset>
@@ -97,106 +111,157 @@
<div>
<input type="checkbox" id="remove_logo_link" class="remove_logo_link"
value="remove_logo_link" unchecked />
<label for="remove_logo_link">Logo link</label>
<label for="remove_logo_link">
Logo link
<img class="tooltip" src="images/tooltip.svg" title="Shortcut to the homepage from the YouTube logo.">
</label>
</div>
<div>
<input type="checkbox" id="remove_home_link" class="remove_home_link"
value="remove_home_link" unchecked />
<label for="remove_home_link">Home link</label>
</div>
<div>
<input type="checkbox" id="remove_shorts_link" class="remove_shorts_link"
value="remove_shorts_link" unchecked />
<label for="remove_shorts_link">Shorts link</label>
<label for="remove_home_link">
Home link
</label>
</div>
<div>
<input type="checkbox" id="remove_explore_link" class="remove_explore_link"
value="remove_explore_link" unchecked />
<label for="remove_explore_link">Explore link</label>
<label for="remove_explore_link">
Explore link
</label>
</div>
<div>
<input type="checkbox" id="remove_shorts_link" class="remove_shorts_link"
value="remove_shorts_link" unchecked />
<label for="remove_shorts_link">
Shorts link
</label>
</div>
</fieldset>
<fieldset>
<legend>More</legend>
<legend>Video Player</legend>
<div>
<input type="checkbox" id="remove_extra_results" class="remove_extra_results"
value="remove_extra_results" unchecked />
<label for="remove_extra_results">Extra search results <a class='minor_text'>for you, also watched, etc.</a></label>
<input type="checkbox" id="auto_skip_ads" class="auto_skip_ads"
value="auto_skip_ads" unchecked />
<label for="auto_skip_ads">
Auto-skip ads
<img class="tooltip" src="images/tooltip.svg" title="Clicks the 'skip-ad' button if it exists.">
</label>
</div>
<div>
<input type="checkbox" id="remove_entire_sidebar" class="remove_entire_sidebar"
value="remove_entire_sidebar" checked />
<label for="remove_entire_sidebar">Entire Sidebar <a class='minor_text'>centers the video player</a></label>
value="remove_entire_sidebar" unchecked />
<label for="remove_entire_sidebar">
Center contents
<img class="tooltip" src="images/tooltip.svg" title="Removes the entire sidebar.">
</label>
</div>
<div>
<input type="checkbox" id="disable_autoplay" class="disable_autoplay"
value="disable_autoplay" unchecked />
<label for="disable_autoplay">
Disable autoplay
<img class="tooltip" src="images/tooltip.svg" title="Always toggles 'autoplay' to off.">
</label>
</div>
<div>
<input type="checkbox" id="remove_info_cards" class="remove_info_cards"
value="remove_info_cards" unchecked />
<label for="remove_info_cards">Info cards <a class='minor_text'>in-video</a></label>
<label for="remove_info_cards">
Info cards
<img class="tooltip" src="images/tooltip.svg" title="Often appear at the end of a video.">
</label>
</div>
<div>
<input type="checkbox" id="remove_play_next_button" class="remove_play_next_button"
value="remove_play_next_button" unchecked />
<label for="remove_play_next_button">Play next button</label>
<label for="remove_play_next_button">
Play next button
</label>
</div>
<div>
<input type="checkbox" id="remove_comments" class="remove_comments"
value="remove_comments" unchecked />
<label for="remove_comments">Comments</label>
<label for="remove_comments">
Comments
</label>
</div>
</fieldset>
<fieldset>
<legend>Search Results Page</legend>
<div>
<input type="checkbox" id="remove_extra_results" class="remove_extra_results"
value="remove_extra_results" unchecked />
<label for="remove_extra_results">
Extra search results
<img class="tooltip" src="images/tooltip.svg" title="For you, also watched, etc.">
</label>
</div>
<div>
<input type="checkbox" id="remove_thumbnail_mouseover_effect" class="remove_thumbnail_mouseover_effect"
value="remove_thumbnail_mouseover_effect" unchecked />
<label for="remove_thumbnail_mouseover_effect">Thumbnail slideshow</label>
<label for="remove_thumbnail_mouseover_effect">
Thumbnail slideshow
<img class="tooltip" src="images/tooltip.svg" title="Loop of images when hovering over a thumbnail.">
</label>
</div>
<div>
<input type="checkbox" id="remove_chat" class="remove_chat"
value="remove_chat" unchecked />
<label for="remove_chat">Chat <a class='minor_text'>streaming</a></label>
</div>
</fieldset>
<fieldset>
<legend>Redirect the<a class="redirect_link" href="https://www.youtube.com/" target="_blank"> homepage ↗️</a></legend>
<legend>Redirect the<a class="redirect_link" href="https://www.youtube.com/" target="_blank"> Homepage ↗️</a></legend>
<div>
<input type="radio" id="redirect_to_subs" class="redirect_to_subs" name="redirect"
value="redirect_to_subs" unchecked />
<label for="redirect_to_subs">to Subscriptions</label>
<label for="redirect_to_subs">
to Subscriptions
</label>
<a class="redirect_link" href="https://www.youtube.com/feed/subscriptions" target="_blank">↗️</a>
</div>
<div>
<input type="radio" id="redirect_to_wl" class="redirect_to_wl" name="redirect"
value="redirect_to_wl" unchecked />
<label for="redirect_to_wl">to Watch Later </label>
<label for="redirect_to_wl">
to Watch Later
</label>
<a class="redirect_link" href="https://www.youtube.com/playlist/?list=WL" target="_blank">↗️</a>
</div>
<div>
<input type="radio" id="redirect_off" class="redirect_off" name="redirect"
value="redirect_off" checked />
<label for="redirect_off">off</label>
<label for="redirect_off">
off
</label>
</div>
</fieldset>
</div>
<div id='manage_history_container'>
<a id='manage_history' href='https://myactivity.google.com/product/youtube' title="Too many cat video suggestions? Try removing cat videos from your watch history." target="_blank">Manage YouTube History</a>
</div>
<div id='footer'>
<a id='info_button' href='https://lawrencehook.com/rys/' title='Info' target="_blank">
@@ -222,23 +287,6 @@
</div>
<!-- <div id="reload_container"> -->
<!-- <div id="reload_header"> -->
<!-- Not loading correctly? -->
<!-- </div> -->
<!-- <button id="reload_button">Refresh</button> -->
<!-- </div> -->
<!-- <div id="help_container"> -->
<!-- <a href="https://addons.mozilla.org/en-US/firefox/addon/remove-youtube-s-suggestions/" target="_blank">Reviews</a> and <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=FF9K9YD6K6SWG&currency_code=USD&source=url&amount=5" target="_blank">donations</a> appreciated. -->
<!-- <br> -->
<!-- <br> -->
<!-- btc <a id='bitcoin' class='crypto_address'>bc1qkypls3kpr73sncxag5h6z9vr6xg27nranf22ve</a> -->
<!-- <br> -->
<!-- eth <a id='ethereum' class='crypto_address'>0xDC40d2Ac2DBC76cd9507A9f578e3166e3ae1292D</a> -->
<!-- </div> -->
<script src="js/reload.js"></script>
<script src="js/options.js"></script>
</body>