Giter Club home page Giter Club logo

youtube-blacklist-chrome-extension's People

Contributors

gustafl avatar

Watchers

 avatar  avatar

youtube-blacklist-chrome-extension's Issues

Implement the contextMenus.onClicked event

This is where we want to store the blacklisting of a user. The wiki lists several things that could be stored along with the unique data-ytid, but let's start simple. Here's a sample record:

{ "UCCat0XxZRbkylcy2MRSv9vg": "B" }

B is for blacklist, and W for a future whitelist feature. Using this format, each record takes 33 double bytes of memory (uglified).

Replace avatar of hidden comments

I've just added the files hidden.png, hidden_75.png, and hidden_50.png to the project. The first is the original, the second is for top-level comments, and the third is for nested comments. Use these in the bit of code in the content script that hides comments.

Write a method that returns the extension user

The extension user is a Google Chrome user with this extension installed and enabled. We may want to know the data-ytid of this user if we add multi-user capability in the future. In a multi-user version, it would be useful to know who blacklisted who. Here's one way to find out the extension user:

var element = currentValue.querySelector('div.personal-item h3 a');
var userId = element.getAttribute('data-ytid');

This is a rather fragile path. Look for better options.

Make a short list of reasons for blacklisting

My best idea on "crowd-sourcing" blacklistings while preventing abuse involves keeping everything fully transparent. A person should be able to see who has blacklisted them, why, and for what. The why question is best answered with a list of reasons. Here's a draft:

  • irrelevant - spam
  • inappropriate - offensive, obscene
  • hateful - attacks on groups
  • insulting - attacks on individuals
  • misleading - blatant lies and propaganda
  • nonsensical - plain stupid, unintelligible

I'm undecided on whether it should be possible to select more than one of these when blacklisting a user for a comment. Also, let's make it clear that it's the comment, not the person that is described by these terms.

Make sure the extension is disabled in incognito mode

According to the docs, the extensions don't run in incognito windows by default. This suits our need well, because blacklisting a user could potentially give away what video a person has been watching. Make sure the extension is actually disabled in incognito mode.

To detect whether a window is in incognito mode, check the incognito property of the relevant tabs.Tab or windows.Window object.

Include jQuery

Include the minimized jQuery file and make sure it works with the content script.

Consider breaking up the background script into multiple files

Here's how to do it in the manifest.json file:

"background": {
    "scripts" : [
        "background/eventListeners.js",
        "background/storage.js",
        "background/contextMenu.js"
        "background/main.js",
    ]
}

Not necessary yet, but it will be if the background script keeps growing. Note that the order the scripts are written in is the actual loading order.

Add details to storage object

Here's how a blacklisting needs to be stored to meet all our future requirements:

UC5XLvCbmVi4avGZCbswnUvg : {
    action: "B",
    author: "Felipe M.",
    reason: "hateful",
    video: "YUnm7utcGbM",
    comment: "z12nsd1jhoynyrnwm04chrkijr30svewy1c",
    user: "UCOkC6DT4HYTbNNPDjyYM2dg",
    time: "2017-04-02T01:21:19"
}

Only the key, action, and author are mandatory. The other fields will probably depend on user options. Whitelistings are stored similarily. If we'll ever receive these objects to a central logging server (with the user's consent, of course) we should probably log the IP too, to prevent abuse.

Show a live data stream on the web page

Because it's fun and attractive. Ideally, we want to get the images from YouTube too. Websockets is probably the technology I need to learn to implement the live stream.

Show notification after blacklisting

If the blacklisting was successful (i.e. if the user ID was stored), show a success message. If the user clicked on something that is not a comment, or something happened so that the user ID was not found or couldn't be stored, tell the user that nothing was saved. Use a warning icon for the failure and a stop icon for success.

List single user features

There are a number of problems with a multi-user version:

  • Risk of abuse
  • Performance/scalability
  • Amount of work

Abuse

As the extension gains popularity​, it could become a tool for people to push an agenda, or to suppress dissidents. If the tool becomes sufficiently popular, some will use it to promote hate and propaganda. I can't think of a way to deal with this that will not include human moderators.

Performance/scalability

There is a performance cost in removing the posts of blacklisted users, and highlighting the posts of whitelisted users. The most performant way I can think of would be to collect the distinct data-ytid attributes on each loaded page, send them to a central server, and get them back with a number (-1 for blacklisted, 0 for neutral, 1 for whitelisted). I'm not sure how well this would scale when you get to millions of users in the blacklist/whitelist table. Also, I'm not sure if the server request would stall page loading, or if the page is first loaded with bozo comments which are then hidden.

Amount of work

Building the multi-user features it a much larger project that building a single-user version.

Consider putting the multi-user features in its own extension

Extensions can call other extensions. Using the multi-user features should be optional, especially if blacklisting is not anonymous. The multi-user extension could even be an extension of the single-user extension, so that it uses the same code for hiding comments etc. It just serves the single-user extension with blacklisted users from the cloud, on top of the ones in chrome.storage.

Design the popup

It should contain the following, in order:

  • Logo
  • Title text
  • Version number
  • Disable/enable toggle button
  • Number of blacklisted users
  • Number of comments hidden on page
  • User's YouTube ID
  • Link to extension in Web Store

Specify options

What do we want to do the options page?

  • View blacklisted and whitelisted users (by username).
  • Remove users from list.
  • Completely hide nested blacklisted comments.

Replace inline CSS with classes

We use inline CSS for display: none and other things. More these styles into youtube.css instead. I've already confirmed that the youtube.css is "alive", thanks to its reference in the manifest file.

Add Disable button to popup page

The comment filtering can be temporarily disabled using the Disable button. After pressing the button it changes to an Enable button, to turn filtering on again.

Add blacklist option to the context menu on comment right-click

When a user right-clicks a comment (or possibly only the name or avatar parts of the comment), an extra option should be added to Chrome's context menu. The option should be named Blacklist and it should have a middle finger icon next to it.

This task does not include making the click listener, or anything else, other than showing the context menu option over YouTube comments.

Design a caching function for users per tab

Today, the getUsers() function is called repeatedly in a wasteful way. We need to cache the users for each open tab (with a YouTube watch page) for a configurable amount of time, so that whenever we're about to call getUsers() we first check the cache and compare the timestamps.

Handle the Show more button

This may be a total showstopper. Currently, we're able to handle the first batch of comments, but if the user loads more comments (using the button at the bottom of the page), we need to trigger a new call to getUsers(). I don't know if this is possible.

Handle whitelisting comment replacement

Whitelisted comments should have their username in orange (the opposite color to YouTube's blue). Other than that, there should be no difference to normal (non-blacklisted) comments. Less is more.

See #44 for a general discussion on whitelisting.

Replace text of hidden comments

Hidden comment text shall be replaced by this message, written in gray italic:

This comment was removed because the user is blacklisted.

In the future, we may want to indicate the reason for blacklisting, if there is one.

The getUsers response message is often empty

If you open a new tab and go to a YouTube watch page, the getUsers response message is often empty, even if there are comments on the page. But if you click another video, the getUsers response message will be populated as expected.

Also, even if the response message is not completely empty, the body part will often be empty. These two phenomenas are probably related.

When you look at a YouTube watch page loading, you can see that the comments load when you scroll down to see them. So perhaps there is no comment section when the page first loads (but that doesn't explain why it works on subsequent pages).

Show, enable and disable the context menu

Due to an unfortunate design flaw in the chrome.contentmenu API, you get an error if you attempt to create a context menu item with an ID that already exists. I've had this happen many times as I've tried to deal with the loading of comments, where some event listeners will attempt to add the context menu in case it's not already added. Maybe this won't be a problem now, as I prune the event listeners to a minimum.

In any case, it seems best to always show the the context menu on YouTube watch pages, but to show it disabled when using it makes no sense. So show it once, then toggle between enable and disable. That shouldn't raise any errors. First I need to specify when to add it, when to enable it and when to disable it.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.