After some googling and looking at tutorials, I have code along these lines:
File: background.js:
chrome.tabs.onUpdated.addListener( function (tabId, changeInfo, tab) {
if (changeInfo.status == 'complete' && tab.active) {
chrome.tabs.executeScript(tab.ib, {
file: 'inject.js'
});
}
})
File: inject.js
(function() {
function remove_by_class(className) {
var elem = document.getElementsByClassName(className)[0];
elem.parentNode.removeChild(elem);
}
function remove_by_title(itemTitle) {
var elem = document.querySelector('[title = itemTitle]');
elem.parentNode.removeChild(elem);
}
if (url.includes('SOME_URL_SUBSTRING')){
remove_by_class('CLASS_NAME');
remove_by_title('ITEM_TITLE');
}
})();
This removes certain elements, usually a second or two after I see them load in. And if I understand correctly, it can only remove elements from the page as it 'initially' exists, when it is first loaded - elements created later (by future Javascript actions on the page) are unaffected, because my extension's code is only injected & executed once.
What I'm looking for instead is some sort of 'always-on' extension that proactively watches for the loading of certain elements. Basically, I want to have a function which is called every time an HTML element is loaded/created in the page, and only allow the element to actually be placed if the function returns 'true'.
What is the easiest way to accomplish something like this?
EDIT: as an example, say I wanted to block the YouTube logo (class name style-scope ytd-topbar-logo-renderer from loading). I guess I would like a MWE that stops it from loading.
(For context: I am completely new to both Chrome extensions in particular and Javascript in general, but otherwise somewhat familiar with programming. I am mostly just curious/playing around right now, but there is a vague goal of making a kind of 'productivity tool' for myself, allowing me to use Facebook, Youtube etc for exactly what I need them for, with distracting or extraneous (to me) elements, such as Recommended Videos, redacted.)
