mirror of
https://github.com/lawrencehook/remove-youtube-suggestions.git
synced 2026-07-25 06:54:31 +00:00
Release 3.3.0
Refactor to use pure css paradigm Add another 'bonus' option to remove link to the trending page
This commit is contained in:
Lawrence Hook
@@ -0,0 +1,23 @@
|
||||
html[remove_homepage="true"] ytd-browse[page-subtype="home"],
|
||||
html[remove_sidebar="true"] #related,
|
||||
html[remove_end_of_video="true"] .html5-endscreen,
|
||||
|
||||
html[remove_trending="true"] a[href="/feed/trending"],
|
||||
html[remove_comments="true"] #comments,
|
||||
html[remove_comments="true"] #comment-secyoutubetion-renderer-items
|
||||
|
||||
{
|
||||
|
||||
display: none !important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* Using display: none on the sidebar messes with the video player's dimensions */
|
||||
html[remove_sidebar="true"] #secondary
|
||||
|
||||
{
|
||||
|
||||
visibility: hidden;
|
||||
|
||||
}
|
||||
|
||||
+18
-6
@@ -1,16 +1,28 @@
|
||||
#button_container {
|
||||
#reload_header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#help-box {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
border-style: ridge;
|
||||
#reload_container {
|
||||
text-align: center;
|
||||
|
||||
padding: 4px;
|
||||
border-width: 2px;
|
||||
border-style: groove;
|
||||
border-color: gray;
|
||||
|
||||
margin: 4px 2px 1px 2px;
|
||||
}
|
||||
|
||||
#help-header {
|
||||
#help_container {
|
||||
text-align: left;
|
||||
padding: 8px;
|
||||
border-width: 2px;
|
||||
border-style: groove;
|
||||
border-color: gray;
|
||||
|
||||
margin: 4px 2px 1px 2px;
|
||||
}
|
||||
|
||||
#help_header {
|
||||
text-align: center;
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
const HTML = document.documentElement;
|
||||
const DEFAULT_SETTINGS = {
|
||||
"remove_homepage": true,
|
||||
"remove_sidebar": true,
|
||||
"remove_end_of_video": true,
|
||||
"remove_trending": false,
|
||||
"remove_comments": false
|
||||
}
|
||||
|
||||
try {
|
||||
browser.storage.local.get(localSettings => {
|
||||
Object.keys(DEFAULT_SETTINGS).forEach(settingKey => {
|
||||
const isLocal = localSettings.hasOwnProperty(settingKey);
|
||||
const settingValue = isLocal ? localSettings[settingKey] : DEFAULT_SETTINGS[settingKey];
|
||||
if (!isLocal) browser.storage.local.set({ [settingKey] : settingValue });
|
||||
HTML.setAttribute(settingKey, settingValue);
|
||||
});
|
||||
});
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
// Update in real time, by receiving change events from the options menu
|
||||
browser.runtime.onMessage.addListener((data, sender) => {
|
||||
const settingKey = data.key;
|
||||
const settingValue = data.value;
|
||||
HTML.setAttribute(settingKey, settingValue);
|
||||
});
|
||||
+36
-44
@@ -1,47 +1,39 @@
|
||||
// document.querySelectorAll("RYS_setting_checkbox");
|
||||
const homepageCheckbox = document.getElementById('homepage');
|
||||
const sidebarCheckbox = document.getElementById('sidebar');
|
||||
const videoEndCheckbox = document.getElementById('videoEnd');
|
||||
const commentsCheckbox = document.getElementById('comments');
|
||||
homepageCheckbox.addEventListener("change", saveHomepageSetting);
|
||||
sidebarCheckbox.addEventListener("change", saveSidebarSetting);
|
||||
videoEndCheckbox.addEventListener("change", saveVideoEndSetting);
|
||||
commentsCheckbox.addEventListener("change", saveCommentsSetting);
|
||||
|
||||
document.addEventListener("DOMContentLoaded", restoreOptions);
|
||||
|
||||
function saveHomepageSetting(e) {
|
||||
browser.storage.local.set({ homepage: e.target.checked });
|
||||
const HTML = document.documentElement;
|
||||
const DEFAULT_SETTINGS = {
|
||||
"remove_homepage": true,
|
||||
"remove_sidebar": true,
|
||||
"remove_end_of_video": true,
|
||||
"remove_trending": false,
|
||||
"remove_comments": false
|
||||
}
|
||||
|
||||
function saveSidebarSetting(e) {
|
||||
browser.storage.local.set({ sidebar: e.target.checked });
|
||||
}
|
||||
|
||||
function saveVideoEndSetting(e) {
|
||||
browser.storage.local.set({ videoEnd: e.target.checked });
|
||||
}
|
||||
|
||||
function saveCommentsSetting(e) {
|
||||
browser.storage.local.set({ comments: e.target.checked });
|
||||
}
|
||||
|
||||
function restoreOptions() {
|
||||
|
||||
function setCurrentChoice(result) {
|
||||
for (let key in result) {
|
||||
document.getElementById(key).checked = result[key];
|
||||
}
|
||||
}
|
||||
|
||||
function onError(error) {
|
||||
console.log(`Error: ${error}`);
|
||||
}
|
||||
|
||||
const settings = ["homepage", "sidebar", "videoEnd", "comments"];
|
||||
settings.forEach(setting => {
|
||||
browser.storage.local.
|
||||
get(setting).
|
||||
then(setCurrentChoice, onError);
|
||||
// Make checkboxes reflect local settings
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
browser.storage.local.get(localSettings => {
|
||||
console.log(localSettings);
|
||||
Object.keys(localSettings).forEach(settingKey => {
|
||||
if (!Object.keys(DEFAULT_SETTINGS).includes(settingKey)) return;
|
||||
document.getElementById(settingKey).checked = localSettings[settingKey];
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Handle check/uncheck events
|
||||
Object.keys(DEFAULT_SETTINGS).forEach(settingKey => {
|
||||
const settingCheckbox = document.getElementById(settingKey);
|
||||
settingCheckbox.addEventListener("change", async e => {
|
||||
const settingKey = e.target.id;
|
||||
const settingValue = e.target.checked;
|
||||
|
||||
// 1. Save changes to local storage
|
||||
const saveObj = { [settingKey]: settingValue };
|
||||
browser.storage.local.set(saveObj);
|
||||
|
||||
// 2. Update running tabs with the changed setting
|
||||
const messageObj = { key: settingKey, value: settingValue };
|
||||
const tabs = await browser.tabs.query({});
|
||||
tabs.forEach(tab => {
|
||||
browser.tabs.sendMessage(tab.id, messageObj);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,108 +0,0 @@
|
||||
// Chrome
|
||||
if (typeof(chrome) !== 'undefined') {
|
||||
browser = chrome;
|
||||
|
||||
browser.storage.local.get("homepage", onGotHomepageSetting);
|
||||
|
||||
// Firefox
|
||||
} else {
|
||||
|
||||
const gettingHomepage = browser.storage.local.get("homepage");
|
||||
gettingHomepage.then(onGotHomepageSetting, onError);
|
||||
|
||||
}
|
||||
|
||||
|
||||
/***********
|
||||
* Homepage
|
||||
***********/
|
||||
const homepageSelectors = [
|
||||
"ytd-page-manager",
|
||||
"ytd-browse",
|
||||
"#feed",
|
||||
"ytd-rich-grid-renderer.style-scope",
|
||||
"#masthead-ad",
|
||||
"#spinner-container",
|
||||
"#home-container-skeleton",
|
||||
"#rich-shelves",
|
||||
".shelf-skeleton",
|
||||
".rich-shelf-videos"
|
||||
];
|
||||
const hompageSuggestionsSelector = homepageSelectors.join(', ');
|
||||
const hideHomepageNodes = node => {
|
||||
if (node.matches(hompageSuggestionsSelector)) {
|
||||
node.style.setProperty("display", "none");
|
||||
}
|
||||
};
|
||||
const removeHomepageObserver = new MutationObserver(mutations => {
|
||||
mutations.forEach(mutation => {
|
||||
hideHomepageNodes(mutation.target);
|
||||
});
|
||||
});
|
||||
removeHomepageObserver.observe(document, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
function onGotHomepageSetting(result) {
|
||||
const homepage = result.homepage === undefined ? true : result.homepage;
|
||||
browser.storage.local.set({ homepage });
|
||||
updateHomepageStyle(homepage);
|
||||
|
||||
// watch for url changes
|
||||
const updateHomepageObserver = new MutationObserver(mutations => updateHomepageStyle(homepage));
|
||||
updateHomepageObserver.observe(document, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
|
||||
removeHomepageObserver.disconnect();
|
||||
}
|
||||
|
||||
function updateHomepageStyle(homepage) {
|
||||
updateHomepage(homepage && onHomepage() ? "none" : "flex");
|
||||
}
|
||||
|
||||
function onHomepage() {
|
||||
try {
|
||||
// Test using path
|
||||
const pathIsHomepage = window.location.pathname.length <= 1;
|
||||
|
||||
// Test using right-sidebar icons
|
||||
const iconSelector = "span.title.style-scope.ytd-mini-guide-entry-renderer";
|
||||
const icons = document.querySelectorAll(iconSelector);
|
||||
const iconColors = Array.from(icons).map(icon => window.getComputedStyle(icon, null).getPropertyValue("color"));
|
||||
const iconColorCounts = getCounts(iconColors);
|
||||
const homeIcon = icons.length > 0 && icons[0];
|
||||
const homeIconColor = homeIcon && window.getComputedStyle(homeIcon, null).getPropertyValue("color");
|
||||
const iconColorIsHomepage = homeIconColor && iconColorCounts[homeIconColor] === 1;
|
||||
|
||||
return pathIsHomepage || iconColorIsHomepage;
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
}
|
||||
|
||||
function updateHomepage(property) {
|
||||
const updateDisplay = elt => elt.style.setProperty("display", property);
|
||||
const suggestions = document.querySelectorAll(hompageSuggestionsSelector) || [];
|
||||
suggestions.forEach(updateDisplay);
|
||||
}
|
||||
|
||||
|
||||
function removeSelectors(selectors) {
|
||||
const cssSheet = document.styleSheets.length > 0 && document.styleSheets[0];
|
||||
const displayNoneRule = " { display: none !important; }";
|
||||
const compoundSelector = selectors.join(", ");
|
||||
cssSheet && cssSheet.insertRule(compoundSelector + displayNoneRule);
|
||||
}
|
||||
|
||||
function onError(error) {
|
||||
console.log(`Error: ${error}`);
|
||||
}
|
||||
|
||||
function getCounts(arr) {
|
||||
return arr.reduce((acc, curr) => {
|
||||
acc[curr] = curr in acc ? acc[curr] + 1 : 1;
|
||||
return acc;
|
||||
}, {});
|
||||
}
|
||||
@@ -1,109 +0,0 @@
|
||||
// Chrome
|
||||
if (typeof(chrome) !== 'undefined') {
|
||||
browser = chrome;
|
||||
|
||||
try {
|
||||
browser.storage.local.get("sidebar", onGotSidebarSetting);
|
||||
browser.storage.local.get("videoEnd", onGotVideoEndSetting);
|
||||
browser.storage.local.get("comments", onGotCommentsSetting);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
// Firefox
|
||||
} else {
|
||||
|
||||
try {
|
||||
const gettingSidebar = browser.storage.local.get("sidebar");
|
||||
gettingSidebar.then(onGotSidebarSetting, onError);
|
||||
|
||||
const gettingVideoEnd = browser.storage.local.get("videoEnd");
|
||||
gettingVideoEnd.then(onGotVideoEndSetting, onError);
|
||||
|
||||
const gettingComments = browser.storage.local.get("comments");
|
||||
gettingComments.then(onGotCommentsSetting, onError);
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/**********
|
||||
* Sidebar
|
||||
**********/
|
||||
function onGotSidebarSetting(result) {
|
||||
const sidebar = result.sidebar === undefined ? true : result.sidebar;
|
||||
browser.storage.local.set({ sidebar });
|
||||
|
||||
if (sidebar) {
|
||||
removeSelectors([
|
||||
// video recommendations
|
||||
"#upnext",
|
||||
"ytd-compact-video-renderer.style-scope",
|
||||
"ytd-compact-radio-renderer.style-scope",
|
||||
|
||||
// ads
|
||||
"#companion",
|
||||
"ytd-compact-promoted-video-renderer",
|
||||
"#container.ytd-iframe-companion-renderer",
|
||||
"#dismissable.ytd-compact-movie-renderer", // movie recommendations
|
||||
"ytd-movie-offer-module-renderer", // movie recommendations
|
||||
"ytd-image-companion-renderer.style-scope",
|
||||
"ytd-compact-playlist-renderer.style-scope",
|
||||
"a.ytd-action-companion-renderer",
|
||||
"#google_companion_ad_div",
|
||||
"ytd-promoted-sparkles-web-renderer",
|
||||
"ytd-player-legacy-desktop-watch-ads-renderer",
|
||||
|
||||
"paper-button.yt-next-continuation", // show more button
|
||||
|
||||
// disable_polymer=true
|
||||
"li.video-list-item.related-list-item",
|
||||
"h4.watch-sidebar-head",
|
||||
"hr.watch-sidebar-separation-line",
|
||||
"button#watch-more-related-button",
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/***************
|
||||
* End of Video
|
||||
***************/
|
||||
function onGotVideoEndSetting(result) {
|
||||
const videoEnd = result.videoEnd === undefined ? true : result.videoEnd;
|
||||
browser.storage.local.set({ videoEnd });
|
||||
if (videoEnd) {
|
||||
removeSelectors([
|
||||
".html5-endscreen"
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
/***********
|
||||
* Comments
|
||||
***********/
|
||||
function onGotCommentsSetting(result) {
|
||||
const comments = result.comments === undefined ? false : result.comments;
|
||||
browser.storage.local.set({ comments });
|
||||
if (comments) {
|
||||
removeSelectors([
|
||||
// standard
|
||||
"ytd-comment-thread-renderer",
|
||||
|
||||
// for disable_polymer=true
|
||||
"#comment-secyoutubetion-renderer-items"
|
||||
]);
|
||||
}
|
||||
}
|
||||
|
||||
function removeSelectors(selectors) {
|
||||
const cssSheet = document.styleSheets.length > 0 && document.styleSheets[0];
|
||||
const displayNoneRule = " { display: none !important; }";
|
||||
const compoundSelector = selectors.join(", ");
|
||||
cssSheet && cssSheet.insertRule(compoundSelector + displayNoneRule);
|
||||
}
|
||||
|
||||
function onError(error) {
|
||||
console.log(`Error: ${error}`);
|
||||
}
|
||||
@@ -2,20 +2,15 @@
|
||||
"description": "Removes all suggestions from Youtube.",
|
||||
"manifest_version": 2,
|
||||
"name": "Remove Youtube Suggestions",
|
||||
"version": "3.2.2",
|
||||
"version": "3.3.0",
|
||||
"homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions",
|
||||
|
||||
"content_scripts": [
|
||||
{
|
||||
"js": ["js/remove-homepage-suggestions.js"],
|
||||
"js": ["js/main.js"],
|
||||
"matches": ["*://*.youtube.com/*"],
|
||||
"run_at": "document_start"
|
||||
},
|
||||
{
|
||||
"js": ["js/remove-other-suggestions.js"],
|
||||
"matches": ["*://*.youtube.com/*"],
|
||||
"run_at": "document_end"
|
||||
},
|
||||
{
|
||||
"css": ["css/main.css"],
|
||||
"all_frames": true,
|
||||
|
||||
+34
-25
@@ -11,40 +11,49 @@
|
||||
<legend>Choose which suggestions to remove</legend>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="homepage" class="RYS_setting_checkbox" name="feature"
|
||||
value="homepage" checked />
|
||||
<label for="homepage">Homepage</label>
|
||||
<input type="checkbox" id="remove_homepage" name="feature"
|
||||
value="remove_homepage" checked />
|
||||
<label for="remove_homepage">Homepage</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="sidebar" class="RYS_setting_checkbox" name="feature"
|
||||
value="sidebar" checked />
|
||||
<label for="sidebar">Sidebar</label>
|
||||
<input type="checkbox" id="remove_sidebar" name="feature"
|
||||
value="remove_sidebar" checked />
|
||||
<label for="remove_sidebar">Sidebar</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="videoEnd" class="RYS_setting_checkbox" name="feature"
|
||||
value="videoEnd" checked />
|
||||
<label for="videoEnd">End of Video</label>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="comments" class="RYS_setting_checkbox" name="feature"
|
||||
value="comments" unchecked />
|
||||
<label for="comments">Comments</label>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div id="button_container">
|
||||
<button id="reload_button">Reload</button>
|
||||
<input type="checkbox" id="remove_end_of_video" name="feature"
|
||||
value="remove_end_of_video" checked />
|
||||
<label for="remove_end_of_video">End of Video</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div id="help-box">
|
||||
<div id="help-header">
|
||||
<fieldset>
|
||||
<legend>Bonus options</legend>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="remove_trending" name="feature"
|
||||
value="remove_trending" unchecked />
|
||||
<label for="remove_trending">Link to Trending Page</label>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<input type="checkbox" id="remove_comments" name="feature"
|
||||
value="remove_comments" unchecked />
|
||||
<label for="remove_comments">Comments</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<div id="reload_container">
|
||||
<div id="reload_header">
|
||||
Not loading correctly?
|
||||
</div>
|
||||
<button id="reload_button">Refresh</button>
|
||||
</div>
|
||||
|
||||
<div id="help_container">
|
||||
<div id="help_header">
|
||||
Help us make this addon better!
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
Reference in New Issue
Block a user