alganzory / haramblur

A Browser extension that enables you to navigate the web with respect for your Islamic values, protect your privacy and reduce browsing distractions by auto detecting and blurring "Haram" content.

HaramBlur Extension

HaramBlur is a browser extension that allows you to navigate the web with respect for your Islamic values, privacy and reduce browsing distractions.

HaramBlur utilizes face detection and NSFW content detection and provides controls that allow you to uphold the Islamic gaze protection principle and tailor your online experience by automatically blurring images and videos that contain unwanted or impermissible content.

You can configure the type of detection you want and the amount of blur, the level of strictness, hover to unblur, choose a specific gender to blur, or turn the extension on and off via the interactive pop-up 😄

Features

• Works on images and videos that contain unwanted or impermissible content
• Works on most (if not all) websites and social media platforms
• Configurable detection settings to tailor your browsing experience
• Interactive pop-up for easy on/off toggling
• Customizable hover to unblur feature
• Decent speed and accuracy (continously improved)

How it Works

HaramBlur currently used face detection and recognition features provided by Human library to detect faces and blur them based on the user settings and preferences. It also uses NSFW detection provided by nsfwjs to further improve the accuracy. You can configure the type of detection you want and the amount of blur, hover to unblur, or turn the extension on and off via the interactive pop-up.

Installation Guide

Option 1: Using the Plugin from the extensions store

1. Visit the Haramblur extension on the Chrome Web Store or the Firefox Add-ons Store

2. Follow the installation instructions on the page.

Option 2: Compiling it On Your Own

If you want to compile the extension on your own, follow these steps:

Step 1: Clone the Repository

Clone the HaramBlur repository to your local machine:

Chromium

git clone https://github.com/alganzory/HaramBlur.git

Firefox

git clone -b firefox-main --single-branch https://github.com/alganzory/HaramBlur.git

Step 2: Install Dependencies

Navigate to the project directory and install the necessary dependencies:

npm install

Step 3: Code Your Magic

Make the necessary modifications or enhancements to the code.

Step 4: Build the Extension

• Build the extension by running:

  npm run build

Step 5: Generate a Release (Optional)

Generate a release zip file to be uploaded to the browser/store:

npm run release

Load the extension in Chromium browsers

• Go to chrome://extensions/.
• Enable "Developer mode".
• Click "Load unpacked" and select the project folder.

Load the extension in Firefox

• Go to about:addons
• Press the gear icon.
• Click "Install Add-on from file"
• Select the zip file that you generated in Step 5.

Improvements

Here are some planned improvements that could be made to HaramBlur:

• Support for more browsers
• Improve the speed of detection
• Improve the accuracy of NSFW detection to reduce false positives and negatives
• Make the extension more Shariah-compliant by adding additional privacy controls and customization options

Open Source

HaramBlur is an open-source project and I really appreciate any contributions. Feel free to open an issue or submit a pull request if you have any suggestions or improvements you would like to see.

Like the project?

If you like the project, please consider giving it a star ⭐️. If you wanna further support me, buy me a coffee ☕️, thank you! 😊

Don't forget us from your Du'a! 🤲

haramblur's Issues

Add blur on image initialization after page load

Some images aren't being blurred after page load

to reproduce:

• go to google
• search
• go to images
• scroll to the bottom
• new images are not being blurred before they're scanned

Bug: Something wrong with the crossorigin tactic

Details go here

Bug: crashes on old/low-end computers

Someone reported crashes due to running out of GPU memory, I'll add the details later

Linkedin doesn't load with Haram Blur enabled

I've encountered an issue where LinkedIn doesn't consistently load when the HaramBlur extension is enabled. Instead, it remains stuck on the splash screen indefinitely. You can see an example of the issue in this screenshot: HaramBlur Issue

Interestingly, when I disable the extension and refresh the page, LinkedIn loads normally.
I'm currently using version 0.1.5 of the extension. It's worth noting that this issue doesn't occur consistently, making it a bit challenging to troubleshoot.

Models run local (on browser) or on server ???

Does the model used for human detection run locally within the browser or on the server ?

whitelist and blacklist

It's possible to add lists feature?

Support for lazy loading images

Some sites load their images lazily (including google images I believe), so the mutation observer needs to observe changes in the src of elements to catch lazily loaded ones.

Detect on PIP videos

prioritize processing images that are in the current view

feature: Community knowledge base

suggestion: why should each client process every asset? we can gather knowledge to check for quick verification, and when a client sees a new image his device does the work and sends the result.
It can also be a DNS server. Or a distributed ledger ( blockchain ) as a source of truth to avoid centralization?
with this strategy, we can cluster the load to be able to classify content with high-accuracy models
What do you think?

How to overcome the limitations of Chrome Manifest v3

Manifest V3 is the main reason why this extension isn't as fast as some of the others out there that use manifest v2.
Simply because in manifest v3 we don't have persistent background scripts, that means all the model initialization happens on EVERY single tab/reload, which is such a waste of time and resources.
Even if somehow I manage to use background service of manifest v3 to run the detection, the process of sending images back and forth between them slows things down a lot, and won't easily work with videos, this is again because in Manifest v3, background service workers don't have direct access to DOM, so basically you have to convert the image data to be able to send them across and back, it's a hassle.

If we figure out a way to overcome this limitation -> we don't initiate and load models on every tab/page and ideally don't process things in content script -> speed increases significantly

I've looked into things like offscreen api, and others, but I quickly got confused and still haven't gotten the time to revisit them.

for references:
example issue report
offscreen api

Firefox bug: direct link to image doesn't get processed

          1. Media: [Image Link](https://images.confetticdn.com/images/scale/w_1000,f_auto/event-98593/image-f8e1860a-23e8-4eb5-b1e2-1ad8cb1b6f46/google-mingel.jpeg)

2. Settings: 100% strictness, female gender selected, firefox
3. Device: high end laptop

Originally posted by @EmberCraze in #64 (comment)

can you make it censor Pride flags.

Or any Flag that represents something that goes against the teachings in islam?

detect iframes

Bug: almost everything getting blurred when both genders are selected

HaramBlur/src/modules/detector.js

Line 301 in 3803b25

if (detectMale && detectFemale) return gender !== "unknown";

This line is probably the cause of the problem

Feature Request: Scheduled Activation/Deactivation of HARAM BLUR App

I'd like to propose a feature that could be incredibly beneficial to users who struggle with maintaining their discipline during the night. The ability to set a timer that automatically turns HARAM BLUR on and off at specified times could greatly assist in preventing lapses and help users keep their streaks intact.

GPU inferencing on Nvidia cards?

Asslamu Alikum

Is this feature available? I have also noticed there are a lot of false negatives, it would be better to just find any woman on the screen and blur it immediately.

Baarak'Allahu Feekum for this ya Akhi.

Ongoing: Enhance Accuracy

ideas:

• use better models
• train your own models (for body detection?)
• when face is too small in the image, somehow focus on it (enlarge it or something)

API for inferencing

Assalamu Alaykum ya akhi,

I'm wondering if it could be possible to make some sort of a self hosted webserver from which detection could be done. Some sort of API URL could be put inside the Extension with a key. I'm sure you know better.

Jazakallahu Khairan.

similar plugin

i just came across NSFW
https://github.com/nsfw-filter/nsfw-filter

Firefox extension

Assalamu alaikum

It would be great if you could publish the latest version of your extension to the Firefox extension store!

Jazak Allahu Khair.

Bug: Settings don't get saved when updated in certain cases

Basically when user tries to update settings when a tab isn't open (apparently many people do this, quite odd for me personally), the settings aren't synced

false negative reportb

cant blur the youtube short recommendation where a women is making fun of burqa

ADD FALSE POSITIVES HERE

Our definition of "Haram" content

Simply put, any display of Awrah for men or women is considered "Haram" and should be detected and blurred/removed by the extension. I am aware that there's controversy around what's considered Awrah and what's not so before you post here please make sure you understand our definition of "Haram" content. Please refer to these fatwas in order to understand our definition and before asking things like why do you consider "respectful" female picture as Haram??.
https://islamqa.info/en/answers/82994/what-is-a-womans-awrah
https://islamqa.info/en/answers/1774/is-the-first-look-at-women-allowed
https://islamqa.info/en/answers/163219/what-is-the-ruling-on-looking-at-the-faces-of-hijabi-women

What's a False Positive?

Any content that should not really be detected as Haram (according to the definition above) but is somehow detected by the extension is considered a false positive
Note: please try different levels of strictness to see if the content passes at a lower level in which case it wouldn't really be a false positive (unless it's greatly underrated or something)

How to report False Positives

If you encounter a false positive (something that's not haram but is detected as such) please follow the following steps:

1. add a link to the media or a screenshot (you can use any image upload service but don't post it here directly so people don't accidentally see what they don't want to see)
2. add your settings (strictness, gender) and browser
3. if possible, please add your pc specs or at least let us know if it's a high-end/lower-end device
4. explanation or any additional comments

Please check the example below

Add password lock to settings

Some users have requested that settings (toggle on and off) should be password protected so the user doesn't disable the extension whenever they want (to resist themselves essentially) .

Support Internationalization (other languages)

Incorrect License Information on Mozilla Addons Website

Jazaakallaahu khairan for creating this useful extension brother. On the Mozilla Addons page, it does not mention that the addons is licensed under AGPL-3.0 which could deter many people from using it.

https://addons.mozilla.org/en-US/firefox/addon/haramblur/

Would be great if you could update that. Thanks.

ADD FALSE NEGATIVES HERE

Our definition of "Haram" content

Simply put, any display of Awrah for men or women is considered "Haram" and should be detected and blurred/removed by the extension. I am aware that there's controversy around what's considered Awrah and what's not so before you post here please make sure you understand our definition of "Haram" content. Please refer to these fatwas in order to understand our definition and before asking things like why do you consider "respectful" female picture as Haram??.
https://islamqa.info/en/answers/82994/what-is-a-womans-awrah
https://islamqa.info/en/answers/1774/is-the-first-look-at-women-allowed
https://islamqa.info/en/answers/163219/what-is-the-ruling-on-looking-at-the-faces-of-hijabi-women

What's a False Negative?

Any content that should be detected as Haram (according to the definition above) but is somehow not detected by the extension is considered a false negative.
Note: please try different levels of strictness to see if the image is detected at a higher level in which case it wouldn't really be a false negative (unless it's greatly underrated or something)

How to report False Negatives

If you encounter a false negative (something that's haram but isn't detected as such) please follow the following steps:

1. add a link to the media or a screenshot (you can use any image upload service but don't post it here directly so people don't accidentally see what they don't want to see)
2. add your settings (strictness, gender) and browser
3. if possible, please add your pc specs or at least let us know if it's a high-end/lower-end device

Please check the example below

Google Meet is always blurred

When I have google meet meetings, the screen is always blurred, and I have to disable the extension to unblur it.

Check this:

Here are my enabled settings for reference:

Blur Media on Load: true
Blur amount: 10px
Strictness: 10%
Media to Blur: [images, videos]
Faces to Blur: [female]
Unblur on hover: [images, videos]

Detection of queued images doesn't on some sites

On some websites, the images don't pass the data-processed flag, they don't get a data-blurred flag which probably indicates the detection didn't run on them or the result wasn't used, need to investigate why this happens and resolve it,
Also need to rename and standardise the dataset flags to avoid confusion:
queued -> loaded -> processing -> processed -> blurred

Adding way to allow user feedback

Al slam aalaykum,

Since the detection is sometimes not accurate, why not give the user a way to blur undetected content and unblur falsely blurred content. (And maybe use that input to improve the AI model)

Blurry initialization needs timeout if no detection for whatever reason

There are some cases where detection doesn't start on an image and so the detectionStarted event doesn't fire such as in #30 and this means if blurry start mode is on, the image remains blurred. Ideally, this should not happen in the first place (detection not starting) but also if it does there should be a timeout that unblurs the image and maybe displays a console error

BUG: NSFW detection does not detect on Kiwi Browser

My settings:

• Extension is on
• Blur media on load, on
• Blur amount, 30px
• Greyscale, off
• Strictness, 100%
• Media to blur, images and videos
• Faces to blur, female
• Unblur on hover, disabled

Android 13, Kiwi Browser 120.0.6099.26

It blurs all the media on load, but unblurs all images after a bit.
The same website images are blurred on desktop (Chromium and Firefox)
My guess is that there is an issue with the detection, because the image is blurred on load

Does detection work on Ads?

Problem with google drive pdfs.

For some reason whenever the extension is enabled no pdfs on google drives loads.
it all shows like this:

To reproduce just open any pdf on google drive.

Rethink blurry start mode

Users don't seem to like blurry start mode because they don't understand why images blur then go unblurred,
The whole point of blurry start is to avoid seeing the undesirable content briefly before it gets detected, but it seems I need to either make it more understandable to the user or get rid of it entirely by enhancing the speed of detection..

Detect Images that come from background-img not from img tags

Images from background-img need to also be analyzed

This seems to do the job: https://blog.crimx.com/2017/03/09/get-all-images-in-dom-including-background-en/

new functionality + enhance performance

Assalamu alaikum

This looks great! May Allah (swt) reward you. If you need help with things related to AI/ML I am can do that in shaa Allah since I am experienced in that area. But I don't have much experience in the webdev area.

I find that the extension does not work in some cases, as you were saying in the issue in fushatech/tahir#15.

Perhaps it would be better to use a model that simply detects males or females and is not only a face detection model. I would prefer for myself for example to simply block all images of a certain gender instead of only just faces or nudity.

Second, is that I think it would be good, if we have an option to do the reverse of the way you set it up right now. This would improve performance. Instead of having a somewhat slow procedure to detect and blur out items, it could start as default blurred, and then unblur that based on the detection.

Open to collaboration! (Although I may not get significant time until a couple of weeks later)

Replacing Intersection Observer approach

I am thinking to replace the intersection observer approach by either:
1- relying solely on the mutation observer, the drawbacks are that it doesn't prioritize the current view, it doesn't respond to images being resized/expanded, etc.
2- intercepting network requests and processing them in the background script: I am currently not very clear (rather confused) about the persistence of the background script in manifest v3, so much conflicting and confusing info online about this so I am not sure, also videos are not going to work well with this cause it's hard to send video data between background and content scripts so I'll have to load the models once in the background script and then once for every tab (content script) to handle videos

Feature Request: Local Cache

The extension should remember which images are haram so that it does not need to spend time going through every one again and again.
This would probably make the experience a lot more smooth and save system usage.

AI-Based Content Filtering for Movies using Audio Recognition

Many people enjoy watching videos and movies, but often encounter inappropriate content, such as nudity, kissing, explicit scenes, or offensive language. I propose two solutions:

• Develop or train a model that can recognize and filter out swear words in the audio, muting or beeping them.
• Create or train a model to detect inappropriate content in the audio accompanying nudity, kissing, explicit scenes, and mute or beep the audio, while also blurring the video.

Also, in the future, would we be able to add this to Smart TVs? it would be a great move if it's possible.

Bug: Blurry start mode still noticeable

Problems:

1. The settings that I have chosen are not always saved.
2. The settings that I have chosen are saved, but not all (or not correctly).
3. The settings are applied (blurring works), and then the blurring disappears.

Video demonstration:
https://monosnap.com/file/8lCQQJJrX1KaHBV9xpGolGgkjvKfEE

Blur only the "Haram" part of the picture

This is quite highly requested because people still wanna see relevant info in "bad" pictures.
This would probably require drawing over the photos /videos which could be resource intensive

Incompatibility with Certain Websites on Firefox Linux

After installing the plugin, some websites, such as codeforces.com, fail to load properly on Firefox (Linux). on Chrome every thing went well.

Steps:

• Disabled the plugin, and the websites returned to normal functionality.
• Tested the plugin in Chrome, and it worked without any issues.
• Tried the plugin in Firefox's private mode (with no other pluing), but the issue persisted.

I'm unsure if its a browser settings or the compatibility with the Firefox version plugin problem.

Video blur performance improvements

Assalamu alaikum,

Here is a suggestion for the video blurring:
When you take the video frames and process it in the detector, if it needs to be blurred, set it to blur for at least 2 seconds. This will avoid any scenarios where the video flickers in and out when sometimes there are false negatives and improve the performance in shaa Allah. That means after it blurs the video, even if in a subsequent frame it detects nothing to blur, it will still continue to have the video blurred as it is within the 2 seconds. Hope this makes sense!

Jazak Allahu Khair.

Blur Media on Load needs better implementation

Blurring works, but this happens

1. on page load pictures gets blurred then gets unblurred
2. extension blurs the pictures again one by one till the row finishes
3. proceeds to blur next row and so on...

• Media blur on load is on
• Strictness is on 100%
• I am using Chrome
• Internet is good
  Jazaka-Allahu khairan

Add documentation for Firefox extension

Right now, only the Chrome extension is in the README.MD file, documentation should be added about the Firefox extension as well.

Add sensitivity control

Add ability to increase and decrease sensitivity of detection

App

Is there a chance that there is going to be an app made on either iOS or Android? I think it would benefit a lot more people if it was put out on smartphones. Is that possible?

WebGL crashing issue

Sometimes the extension crashes due to some webgl issue and doesn't recover from it, there should be some way for it to recover if that happens