wesleybranton/like-hider-for-facebook

This browser extension hides likes and reactions from appearing in your Facebook notifications.

Like Hider for Facebook

Although it is a feature that many people have asked for, there is no way to stop likes and reactions on your posts and comments from displaying in your Facebook notifications. This browser extension does just that. De-clutter your notification window by getting rid of those pointless notifications about likes and reactions.

But why not take it a step further? A common theory is that social media can increase depression and can become addictive. This is due, in part, to the liking system used by social media platforms, which provides gratification that keeps you coming back.

This browser extension also can hide the likes and reactions counter from posts and comments. You can also disable the “Like” button from Facebook entirely.

Contribute

Development

Visit the contributing guide if you want to contribute to the project

Localization

The Like Hider for Facebook add-on supports localization. Now it's just a matter of getting the add-on translated into as many languages as possible. If you would like to help translate the add-on into your language, it would be greatly appreciated.

Creating an issue

Issues are the ticketing system used on GitHub. It's used to track bugs and enhancements that developers can work on. Here are the 3 main types of issues and what to keep in mind when creating a new issue.

Bug

A bug is something that is not working properly in the add-on. Finding and fixing bugs is a very important part of maintaining this add-on.

When create a new issue for a bug, please make sure to include as much information as possible. This should include detailed steps on how to reproduce the problem and links to relevant website(s) (if applicable). Screenshots are also helpful, if an issue is visible.

Additional information about your computer operating system and the internet browser(s) that the issue occurs on is very helpful when trying to diagnose and fix problems.

Enhancement / Feature Request

We are always looking for ways to improve the Like Hider for Facebook add-on. We welcome feedback and suggestions on how we can improve the add-on and new features that could be introduced.

When creating an issue for an enhancement or feature request, it can often be helpful to provide some background about why you think a change is needed and how it would be helpful to other users. Please make sure to search through the other issues on this GitHub repository to make sure that the feature you are looking for hasn't already been filed by someone else.

Sometimes new features may take a long time to be added to the add-on. Sometimes they may not be added at all. Please don't take it personally if your feature request is rejected or given a low priority.

Documentation Change

Sometimes features of the add-on or browsers can change and the documentation on the add-on's wiki page may no longer be accurate. Sometimes the documentation may be written in a way that is confusing or incomplete.

If you notice a problem with the documentation available for this add-on, feel free to make the change. However, if you don't have the required access to make a change, you can create an issue.

When creating an issue about a change to the documentation, please make sure to provide a link to the document in question and include what any changes in the issue description.

Spread The Word

If you are enjoying the add-on, consider sharing it with your friends. New users are found almost entirely through word of mouth, so every little big of promotion helps.

Also, consider leaving a review on the add-on store page. These reviews help others find the add-on in the store search page.

Donate

While donations are certainly not required, they are very much appreciated. Financial support (even if it's just the cost of a cup of coffee) helps fund future development of this add-on. To make sure that you are donating to a legitimate source, please use this link.

Release Notes

Release notes can be found on this GitHub repository or the Firefox add-ons listing.

like-hider-for-facebook's Issues

Add uninstall feedback survey

When a user uninstalls the add-on, it would be helpful to ask them to fill out a survey. This will help to see where improvements could be made and detect issues with the add-on.

Settings are not saving

Options are always set to hide items, even if the toggle displays correctly in the options UI. It's potentially because the option values are now saved as strings instead of booleans.

Apply new settings without having to refresh page

It's possible that the code could be changed from CSS files to CSS code that's generated by JavaScript. Then, a content script on the page would create a <style> element with a specific ID. The CSS code could be injected into there and the content script could have a message listener to capture settings updates from the background JavaScript file.

This would be a dramatic change of how the add-on handles the styles on pages, but it could be nice to change it to this method. Then there would be one content script in the manifest file instead of having to handle registering and unregistering them dynamically.

Posts with location tags are labelled as sponsored posts

To fix a previous issue with the CSS selector for the better sponsors feature, the CSS selector was changed to highlight anything in the timestamp section of a post that does not have a number in it. The issue is that location tags also appear in the timestamp section and do not typically have a number.

It looks like to get around this issue, the code to detect the link href property needs to be added back again, as Facebook appears to be populating those links when the post is loaded, not when the user hovers the link like the sponsored label, which was previously the issue with the CSS code.

Add support for localization

Currently, the add-on does not support i18n. Support should be added to the add-on so that it can eventually be localized into other languages.

Facebook CSS values have changed

Once again, Facebook has changed some of the classes on the elements on the website, so all of the add-on features are broken.

Change GitHub repository name

The GitHub repository name should be changed on May 1 to "Like Hider for Facebook".

The redirection link on my server will need to be updated to the new GitHub Pages URL. The links on the GitHub repository's README file will need to be updated along with the AMO listing's GitHub links.

Add privacy policy

A privacy policy page needs to be added to the wiki. The link to the policy needs to be published to the Chrome Web Store listing and the text version of the policy should be updated on the Firefox AMO listing.

Translate add-on

Currently, this add-on is available in English only, but it does have the ability to be translated into other languages.

To translate the add-on, copy the messages.json file from the src/_locales/en folder to src/_locales/LANGUAGE_YOU_ARE_TRANSLATING. Translate the messages in the JSON file to your language. These can then be submitted via a pull request.

Any language is welcome.

Does this extension hide reactions on Facebook posts?

Just want to be sure that by reactions you mean something like this:

Because I could still see reactions from those kinds of posts.

Publish to Google Chrome

This add-on should be published to the Chrome Web Store. Depends on #33.

Add settings popup

Since there are not many settings for the add-on, it would be nice to have a settings popup that appears when clicking the page action instead of launching the options page in a new tab. This will allow for quick changes.

The full settings page should stay in the add-on, since that's what opens when the add-on is first installed and it has a nice preview feature. Add a button to open the full options page within the settings popup.

Post times being styled as sponsored

Facebook has yet again changed the formatting of the website and the sponsored post detection is no longer working. The date elements on posts are being highlighted as sponsored posts until the user hovers over the link.

Likes/reactions are back

Buttons and counters, notifications and feed. Firefox 104.0 Seems like fb codebase changed?

Add setting validation or fallback

Some users have issues with the proper settings not being set when the add-on is installed. This is because settings are only initialized when the user first installs the add-on. If that doesn't trigger for some reason, the user cannot change or add the settings.

This also creates issues with adding new features and settings to the add-on.

Either, a validation should run to check the user settings on each startup and create any missing settings in the Storage API or fallback settings should be applied to the add-on.

Update for WCAG 2.2 compliance

In an effort to make the content of the internet more accessible to everyone, all of my repositories will be reviewed to ensure that they fulfil the WCAG 2.2 requirements. This will take time. The current goal is to make all projects comply with level AA, including as many level AAA standards as possible.

Items that are bold are new to WCAG 2.2. Items that do not apply to the project will be marked as completed and marked with a strikethrough.

Guideline 1.1 – Text Alternatives

• 1.1.1 - Non-text Content (A)

Guideline 1.2 – Time-based Media

• 1.2.1 - Audio-only and Video-only (Prerecorded) (A)
• 1.2.2 - Captions (Prerecorded) (A)
• 1.2.3 - Audio Description or Media Alternative (Prerecorded) (A)
• 1.2.4 - Captions (Live) (AA)
• 1.2.5 - Audio Description (Prerecorded) (AA)
• 1.2.6 - Sign Language (Prerecorded) (AAA)
• 1.2.7 - Extended Audio Description (Prerecorded) (AAA)
• 1.2.8 - Media Alternative (Prerecorded) (AAA)
• 1.2.9 - Audio-only (Live) (AAA)

Guideline 1.3 – Adaptable

• 1.3.1 - Info and Relationships (A)
• 1.3.2 - Meaningful Sequence (A)
• 1.3.3 - Sensory Characteristics (A)
• 1.3.4 - Orientation (AA)
• 1.3.5 - Identify Input Purpose (AA)
• 1.3.6 - Identify Purpose (AAA)

Guideline 1.4 – Distinguishable

• 1.4.1 - Use of Color (A)
• 1.4.2 - Audio Control (A)
• 1.4.3 - Contrast (Minimum) (AA)
• 1.4.4 - Resize text (AA)
• 1.4.5 - Images of Text (AA)
• 1.4.6 - Contrast (Enhanced) (AAA)
• 1.4.7 - Low or No Background Audio (AAA)
• 1.4.8 - Visual Presentation (AAA)
• 1.4.9 - Images of Text (No Exception) (AAA)
• 1.4.10 - Reflow (AA)
• 1.4.11 - Non-text Contrast (AA)
• 1.4.12 - Text Spacing (AA)
• 1.4.13 - Content on Hover or Focus (AA)

Guideline 2.1 – Keyboard Accessible

• 2.1.1 - Keyboard (A)
• 2.1.2 - No Keyboard Trap (A)
• 2.1.3 - Keyboard (No Exception) (AAA)
• 2.1.4 - Character Key Shortcuts (A)

Guideline 2.2 – Enough Time

• 2.2.1 - Timing Adjustable (A)
• 2.2.2 - Pause, Stop, Hide (A)
• 2.2.3 - No Timing (AAA)
• 2.2.4 - Interruptions (AAA)
• 2.2.5 - Re-authenticating (AAA)
• 2.2.6 - Timeouts (AAA)

Guideline 2.3 – Seizures and Physical Reactions

• 2.3.1 - Three Flashes or Below Threshold (A)
• 2.3.2 - Three Flashes (AAA)
• 2.3.3 - Animation from Interactions (AAA)

Guideline 2.4 – Navigable

• 2.4.1 - Bypass Blocks (A)
• 2.4.2 - Page Titled (A)
• 2.4.3 - Focus Order (A)
• 2.4.4 - Link Purpose (In Context) (A)
• 2.4.5 - Multiple Ways (AA)
• 2.4.6 - Headings and Labels (AA)
• 2.4.7 - Focus Visible (AA)
• 2.4.8 - Location (AAA)
• 2.4.9 - Link Purpose (Link Only) (AAA)
• 2.4.10 - Section Headings (AAA)
• 2.4.11- Focus Appearance (Minimum) (AA)
• 2.4.12 - Focus Appearance (Enhanced) (AAA)
• 2.4.13 - Fixed Reference Points (A)

Guideline 2.5 – Input Modalities

• 2.5.1 - Pointer Gestures (A)
• 2.5.2 - Pointer Cancellation (A)
• 2.5.3 - Label in Name (A)
• 2.5.4 - Motion Actuation (A)
• 2.5.5 - Target Size (AAA)
• 2.5.6 - Concurrent Input Mechanisms (AAA)
• 2.5.7 - Dragging (AA)
• 2.5.8 - Pointer Target Spacing (AA)

Guideline 3.1 – Readable

• 3.1.1 - Language of Page (A)
• 3.1.2 - Language of Parts (AA)
• 3.1.3 - Unusual Words (AAA)
• 3.1.4 - Abbreviations (AAA)
• 3.1.5 - Reading Level (AAA)
• 3.1.6 - Pronunciation (AAA)

Guideline 3.2 – Predictable

• 3.2.1 - On Focus (A)
• 3.2.2 - On Input (A)
• 3.2.3 - Consistent Navigation (AA)
• 3.2.4 - Consistent Identification (AA)
• 3.2.5 - Change on Request (AAA)
• 3.2.6 - Findable Help (A)
• 3.2.7 - Hidden Controls (AA)

Guideline 3.3 – Input Assistance

• 3.3.1 - Error Identification (A)
• 3.3.2 - Labels or Instructions (A)
• 3.3.3 - Error Suggestion (AA)
• 3.3.4 - Error Prevention (Legal, Financial, Data) (AA)
• 3.3.5 - Help (AAA)
• 3.3.6 - Error Prevention (All) (AAA)
• 3.3.7 - Accessible Authentication (A)
• 3.3.8 - Redundant Entry (A)

Guideline 4.1 – Compatible

• 4.1.1 - Parsing (A)
• 4.1.2 - Name, Role, Value (A)
• 4.1.3 - Status Messages (A)

Add visual post demo to settings page

A demo post should be added to the options UI that will update based on the user settings to better represent what the UI changes will look like.

Add first-run page

A first-run page should be added that will allow the user to easily setup their settings. This page can also be used to promote donations, encourage AMO reviews and offer bug reporting and code contribution links.

Prevent add-on from breaking when Facebook updates

Currently, changes to Facebook frequently break some or all of the add-on's functionality. This is because the framework that Facebook uses appears to use randomly generated classes and IDs, which seem to change often and breaks the CSS that the add-on is using.

If possible, it would be cool if there was a better way to deploy CSS changes to the add-on or, better yet, a way to prevent the add-on from breaking when there are changes.

Improved sponsorship banner doesn't appear unless hovered over

The styling for the improved sponsorship banner on sponsored posts does not get applied until the user hovers over the label with the mouse. The style rule is using the URL on the link as part of the selector. Facebook is now waiting to populate this link until the user hovers over the link, probably to try to circumvent some ad blocking and modification programs, like this add-on. Until the user hovers over the link, the element's href is just "#".

Some alternate detection method will need to be added to the add-on's CSS to combat this.

Donation link missing from new feature landing page

The feature announcement page for the new "Better sponsor banner" feature is missing a donation link.

Collect general feedback

User should be able to send feedback about the add-on at any time. This will help to detect issues with the add-on or potential improvements that can be made.

Increased sponsored post awareness

Unfortunately, Facebook does a poor job indicating what posts are sponsored advertisements and what posts comes from a user's actual feed. While the intention of this add-on is not to remove ads or even prevent users from clicking on ads, a useful feature would be increasing the visibility of the small "Sponsored" label that appears on the post.

Comment like button still showing

The like button for post comments are still showing, even when the settings are set to hide them.

Update add-on branding

The icon that's used for the page action button looks a little nicer than the current add-on icon. The add-on icon should be changed to the page action icon.

Additionally, consider filling in the hand to a solid color instead of an outline.

Remove sponsored posts feature

The sponsored posts feature is becoming more difficult to maintain because Facebook changes their code frequently to prevent add-ons from detecting sponsored posts. I am removing this feature from the add-on, as it doesn't really fit into the core function of the add-on and it is not a feature that can be made available on the Chromium-based version of the add-on anyway.

Make add-on compatible with Chromium

This add-on should be compatible with Chromium-based browsers.

Live notifications

hi, thanks for this great add-on!
would it be possible to block "live notifications" (i.e. when you are browsing fb and someone likes something you shared and a tooltip pops up in the bottom left corner + notification counter in the top right corner updates)?

Migrate to Manifest V3

Google Chrome will stop accepting updates for add-ons that are running Manifest V2 in June 2022. This add-on will need to be migrated to Manifest V3 to continue to work.

Currently, Firefox does not support Manifest V3, which would pose a slight challenge. However, they are supposed to start accepting Manifest V3 submissions in "early 2022", so it may be possible to wait until then if it becomes an issue of too many required changes.

Change add-on name to "Like Hider for Facebook"

This is the standard naming convention for products that are related to a specific service but are not affiliated with that service. The repository should also be moved. GitHub will redirect to the new repository name, with the only issue being the URL for the deployed GitHub Pages. That link should be changed in the add-on and potentially it will be better to point to a redirection server so that the URL can easily be changed in the future.

Breaking the GitHub Pages link so not that concerning, since it would only impact users that are (for some reason) updating from a version older than 3 to a version that's not the most recent.

Phase two of this change is covered by #25.

Update README file to include build instructions

This add-on was recently ported to Chromium instead of just Firefox. Because of this, there is now a build script that needs to be run to build the add-on and ensure that platform-specific files are in the correct folder for testing.

The development instructions in the README file are outdated and do not include information about running this build script. That needs to be added to the README. The instructions are similar to those found on the Custom Scrollbars repository.

CSS rules not consistently being applied

In some cases, the page needs to be reloaded in order for the injected CSS rules to be applied to the page.

Publish to Microsoft Edge store

This add-on should be published on the Microsoft Edge store. Depends on #33.

Hiding like counters also hides notification icons

When the like counters are hidden, the icon in the lower corner of profile images in the notification popup is hidden.

Settings not properly applying unless browser is restarted

When testing the option to hide the like buttons, I noticed that the setting will be applied when the page is reloaded, but it doesn't want to stop being applied when the option is disabled. This forces the user to restart the browser to get Facebook to act normal again.

I noticed a similar issue when using the sponsorship setting. I was able to remove it when the page was refreshed, but it will not apply itself again unless I restart the browser.

There's clearly an issue here.

Comment like counter still showing

The like counter area on the comments are still showing, even if the settings are set to hide them.

Post like button not being hidden

When the option to hide the like buttons is enabled, the like button for posts is not being hidden. The like button on comments is though.

Hiding like button on comments no longer working

The like button is still appearing on comments, even when it's disabled.

Move update pages to website

The GitHub Pages deployment should be hosted on my website instead. I have set up a common theme on my website that all add-ons can share, which will make future changes to those pages easier.