Skip to content

Commit

Permalink
feat: add block buttons and use mutation_list
Browse files Browse the repository at this point in the history
  • Loading branch information
@xanderjakeq
xanderjakeq committed Jun 10, 2022
1 parent c63e1d1 commit fb148f5
Show file tree
Hide file tree
Showing 4 changed files with 104 additions and 35 deletions.
29 changes: 20 additions & 9 deletions src/background.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
let channels = new Set();
let CHANNELS = new Set();

const OPTIONS = {
type: 'basic',
title: 'Channel Blocker',
iconUrl: './icon.png',
};

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
switch (request.msg) {
case 'page_load': {
if (channels.size > 0) {
if (CHANNELS.size > 0) {
sendResponse({
channels: set_to_array(channels),
channels: set_to_array(CHANNELS),
});
} else {
get_data(sendResponse);
Expand All @@ -14,16 +20,21 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
}

case 'block_channel': {
if (!channels.has(request.channel)) {
channels.add(request.channel);
if (!CHANNELS.has(request.channel)) {
CHANNELS.add(request.channel);

chrome.notifications.create({
...OPTIONS,
message: `Blocked ${request.channel}`,
});

chrome.storage.sync.set({
//channels: JSON.stringify(set_to_array(channels)),
//channels: set_to_array(channels),
[request.channel]: '',
});

chrome.tabs.query({}, function(tabs) {
chrome.tabs.query({}, function (tabs) {
const data = {
message: 'updated_channels',
channel: request.channel,
Expand All @@ -41,7 +52,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
chrome.storage.sync.clear();
chrome.tabs.query(
{ active: true, currentWindow: true },
function(tabs) {
function (tabs) {
const data = {
message: 'reset',
};
Expand All @@ -66,9 +77,9 @@ const get_data = (sendResponse) => {
chrome.storage.sync.get(null).then((results) => {
const blocked_channels = Object.keys(results);
for (let channel of blocked_channels) {
channels.add(channel);
CHANNELS.add(channel);
}
sendResponse({ channels: set_to_array(channels) });
sendResponse({ channels: set_to_array(CHANNELS) });
}, on_error);
};

Expand Down
104 changes: 83 additions & 21 deletions src/content.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
/*----------------------------
GLOBALS
----------------------------*/
let data = null;
let should_reload = false;
let DATA = null;

const thumbnail_tags = {
const THUMBNAIL_TAGS = {
main: 'ytd-rich-item-renderer',
watch: 'ytd-compact-video-renderer',
};
Expand All @@ -30,28 +29,34 @@ window.onload = () => {

let timeout;
timeout = setInterval(() => {
if (data) {
if (DATA) {
clearTimeout(timeout);
return;
}

chrome.runtime.sendMessage({ msg: 'page_load' }, (response) => {
data = new Set(response.channels);
console.log('yt_blocker loaded:', data.size);
remove_features(data);
DATA = new Set(response.channels);
console.log('yt_blocker loaded:', DATA.size);
});
});
};

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
switch (request.message) {
case 'updated_channels':
data.add(request.channel);
remove_features(data);
DATA.add(request.channel);

const { page, channel_index } = get_location_data();

//Getting video elements here doesn't feel good?
const videos_elements = document.getElementsByTagName(
THUMBNAIL_TAGS[page]
);
remove_features(channel_index, DATA, videos_elements);
break;

case 'reset':
data.clear();
DATA.clear();
break;

default:
Expand All @@ -62,26 +67,83 @@ chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
});

const handle_mutation = (mutation_list, observer) => {
//TODO: use the mutation_list to only process new elements
remove_features(data);
};
const { page, channel_index } = get_location_data();

const remove_features = (data) => {
const page = !window.location.href.match('watch') ? 'main' : 'watch';
const videos = document.getElementsByTagName(thumbnail_tags[page]);
const nodes = mutation_list.flatMap((mut) => [
...mut.target.getElementsByTagName(THUMBNAIL_TAGS[page]),
]);

for (let i = 0; i < videos.length; i++) {
add_block_buttons(channel_index, nodes);
remove_features(channel_index, DATA, nodes);
};

const remove_features = (channel_index, data, video_elements) => {
for (let i = 0; i < video_elements.length; i++) {
const cn_containers =
videos[i].getElementsByTagName(channel_name_element);
video_elements[i].getElementsByTagName(channel_name_element);

if (cn_containers.length > 0) {
//watch page [0] cause there's only 1 'yt-formatted-string'
//main page [1] cause there's 2 'yt-formatted-string'
const channel_name = page === 'watch' ? 0 : 1;
const channel_name =
cn_containers[channel_index].innerText.split('\n')[1];

if (data.has(cn_containers[channel_name].innerText)) {
videos[i].remove();
if (data.has(channel_name)) {
video_elements[i].remove();
}
}
}
};

const add_block_buttons = (channel_index, video_elements) => {
for (let i = 0; i < video_elements.length; i++) {
const cn_container =
video_elements[i].getElementsByTagName(channel_name_element)[
channel_index
];

if (cn_container.getElementsByClassName('block_btn').length > 0)
continue;

if (cn_container.firstElementChild) {
cn_container.insertBefore(
create_button(cn_container.innerText),
cn_container.firstElementChild
);
}
}
};

const create_button = (channel_name) => {
let button = document.createElement('button');
button.innerText = 'block';
button.classList.add('block_btn');

button.style.backgroundColor = 'rgba(255, 16, 15, 0.8)';
button.style.borderRadius = '5px';
button.style.marginRight = '5px';
button.style.color = 'white';
button.style.border = 'none';

button.addEventListener('click', (e) => {
e.stopPropagation();

if (!confirm(`Block: ${channel_name}?`)) {
return;
}

chrome.runtime.sendMessage({
msg: 'block_channel',
channel: channel_name,
});
});

return button;
};

const get_location_data = () => {
const page = !window.location.href.match('watch') ? 'main' : 'watch';
const channel_index = page === 'watch' ? 0 : 1;

return { page, channel_index };
};
2 changes: 1 addition & 1 deletion src/manifest.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"name": "Channel Blocker",
"author": "1o1.wtf [https://github.com/thelostcreatives]",
"description": "Block irrelevant channels from the home page of youtube.",
"version": "1.0.1",
"version": "1.1.0",
"action": {
"default_popup": "popup.html",
"default_icon": {
Expand Down
4 changes: 0 additions & 4 deletions src/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,6 @@ block_button.addEventListener('click', () => {
channel: channel_input.value,
});

chrome.notifications.create({
...options,
message: `Blocked ${channel.value}`,
});
channel_input.value = '';
});

Expand Down

0 comments on commit fb148f5

Please sign in to comment.