A free, open source, and privacy-focused browser extension to block “not safe for work” content built using TypeScript and TensorFlow.js.
Home Page: https://nsfw-filter.com
License: GNU General Public License v3.0
![allcontributors[bot] avatar](https://avatars.githubusercontent.com/in/23186?v=4 "allcontributors[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
Only require permissions that are necessary.
Some permissions are redundant and are not being used.
Check all the permissions in the manifest and check if they are being used and are really necessary.
Redundant permissions without any uses could get the extension removed from the Chrome Webstore.
version: v1.0.0
When I open the www.notion.so, many important elements in the pages are not loaded.
The user should be able to select how the image should be filtered from the following options:
Currently, if the images are found to be NSFW, they are automatically replaced by images from Unsplash.
Add a popup.html file for the popup and add different options.
Based on this option change how the image would be processed in content.js
Transferring Ownership to NSFW Filter GitHub Organisation for easy code management.
It's not really a feature request and not a bug either, but here's my issue/question.
I'm using this extension in tandem with VBA and Selenium Webdriver in Chrome (using the newly released extension on the store) to make sure I'm not taking into account nsfw images when running my macro. The issue is that it usually takes the filter maybe 0.25 to 0.5 seconds to un-hide the images that are safe for work (i guess to change the visibility attribute), and i'm trying to optimize the macro duration, and I can't find an optimized way to detect when all sfw images have been made visible and not just some of them.
I have a bit of hacky code rn that checks if the number of visible items has changed after a second and loops if it has until it hasn't, but is there maybe a variable or something that the code uses that I could check to see if it's done re-displaying the safe images?
If there isn't, that's fine, I just wanted to make sure because if there is that'd be great.
(To the people that helped me for my last issue, sorry for not replying last time, I don't check github very often.)
Thanks! :)
There is currently little feedback to the user as to how many/where modifications are made to the page.
A counter to show the number of blocked images.
Example: uBlock Origin shows the number of items on the page blocked.
-
Would work well in combination with the watermark feature proposed in #2
When open pages with nsfw contents, the images are visible initially and then filtered out.
Contents should be filtered out immediately and not visible.
Small lag between images being visible and filtered. When the page is first loading, all unsafe contents are visible and after a few seconds, all images are filtered out.
It will be great to have a design in Figma.com so we can quickly edit future changes
What should be in the popup?
NSFW Filter titleSome examples
When I go to some page filter check images, after that if I return to the same page, the filter will check images again
So it would be great if we start caching images URLs and prediction result for recently visited pages
Lets store links and true/false results in Map on content script side. Max Map size is 100-200 URLs, Cache type LRU
See below.
It should not have the below errors in the Chrome extensions manager.
Chrome lists these issues after loading the unpacked dist directory
Overriding the gradient for 'Max'
Overriding the gradient for 'OneHot'
Overriding the gradient for 'PadV2'
Overriding the gradient for 'SpaceToBatchND'
Overriding the gradient for 'SplitV'
n/a
As a result, no NSFW images are blocked.
Block unsafe content in <video /> tag
Nothing, just showing unsafe content
Recently Apple announced that Safari adding support for JavaScript extensions on MacOS
It would be great to port our filter to Safari
The project tree is outdated and after v1.2.0 release is ready, update the tree.
In cases of websites where JS dynamically render DOM elements, we should somehow notice about new elements and filter them
How it works now - we just set timeout line in code
should notice when new DOm element was added and filter it
Extension Ignores new DOM elements
Probably related solution of it
setting to only picsWhen we send image to backgound script, we wait until its done. But what if it takes too long? 30 seconds? 1 minute?
Lets set 10 sec timeout for this case. Use Promise.race to get it done
Timeout after 10second of analyzing
Waiting as long as image is predicting
V1.0.0 is now officially complete. Let's look into how we can share this project with a more broad audience to get more awesome ideas and features. Here are some of the things I would like to check:
Properly handle lazy load in code
mark as safe content
mark as safe content but check in every scroll
handle img data-original attribute instead of classNames
load or lazy in urltaken this
Setup auto-update for Firefox https://extensionworkshop.com/documentation/manage/updating-your-extension/
Firefox auto-updates the extension
Firefox doesn't auto-update the extension
Hey!
I wanna ask if this extension can work in incognito window and in Porn website?
nsfw-filter
<img>nsfwjs
UPD1 Not sure that we should filter gif images. Webpage sends gif url to background worker and after that it loads gif image, depends on size, but approx it takes 0.5-4 seconds(and ~50-70ms to filter) for 1 gif image. So I decided to remove gif filtering in v1.3.0
It should show an alert box when nsfw images detected.
No alert. Extension will automatically filter nsfw images.
What @abhirammltr is talking about is that when the user enters a website, we check the images in the website as soon as it loads and gives an alert to the user saying that we have found NSFW content on it. The user could go back or continue to the website.
TypeScript adds static typing for JavaScript, a dynamically typed and interpreted language. This significantly improves the maintainability and quality of the code.
It would be readily accepted if you added a link to this project as a PR on NSFWJS
failed to hide all nsfw images
all nsfw images should be hidden
some nsfw images were not hidden
i like the idea of the extension and would like it to be improved
Could someone explain how I (or anyone else) could change the model the extension uses?
I have a pretty decent computer and I've found I get way better results with the "HUGE" Inception V3 Model than with the normal one when I use https://nsfwjs.com , especially when I try to filter smaller pictures. So I'd expect to also get better results if I could get the extension to use it as well.
Is there a somewhat simple way to do this? I'd like to try, anyway.
(This sort of information could also be put on the front page / Readme for the extension by the way, i'm sure other people could have this question in the future.)
Thanks!
Extension landed on https://chrome.google.com/webstore/category/extensions
There is no extension
Right now we use nsfw-model v1.0.0
But there are two more versions, needs to update to the last one and test its performance
You should share this work on https://madewithml.com/
You can even reference NSFWJS which is on there - https://madewithml.com/collections/3302/projects/?sortby=latest
Great work here! I hope you can share it with everyone!
Here are some changes I would suggest to the README. @YegorZaremba please check all that you think should be made and connect with me on the Slack Channel.
Add "Featured in Product Hunt" image- I think this is necessary because people will easily notice this and being featured makes this project more reputable.
Change the "NSFW Filter" text image- I will make a design with our original fonts. Also aligning this to the left would look good.
Make the shields badges flat-square
Improve the opening paragraph- The first lines should be made better.
Remove bold where it is not necessary
Download image quality improvement- I will make the GIFs in a better resolution.
Show the license at the bottom of the README- I think this is a good practice.
Improve the activity diagram- The activity diagram is not clear.
I will make the changes as necessary and make the PR.
Processing images faster
Slow, buggy for human eye
I see 2 bottlenecks:
DOMContentLoaded event instead of load line in codeWe should have some tools to check code quality in future PRs
Filter nsfw images smaller than 64px
Nothing is filtered
Dunno, but scope is here
We use redundant logic. Collect all urls in image.dataset https://github.com/nsfw-filter/nsfw-filter/blob/master/src/content/Filter/ImageFilter.ts#L86 and send to background worker, if image.src is non NSFW, we analyze all urls in dataset
When image is changed src(google images, bing images) attribute we should predict new src url. We can use observer to catch changes https://github.com/nsfw-filter/nsfw-filter/blob/master/src/content/DOMWatcher/DOMWatcher.ts#L89
Setup timer to waiting when src will be updated https://github.com/nsfw-filter/nsfw-filter/blob/master/src/content/Filter/ImageFilter.ts#L49 and analyze new url
Does anyone know which model (from https://github.com/infinitered/nsfwjs ) this extension uses? Because on https://nsfwjs.com/ there are three models, each with different results (the larger "huge" one being more accurate from what i can tell, even if it says it's the same % accuracy).
And what's the threshold % for being NSFW? Is it different if it gets classified as "sexy", "porn" or any of the categories?
Overall, maybe adding a bit of detail about how it works to the description could be nice.
Thanks!
Browser load page, if we have some NSFW images on page, in most cases we should wait more than 0.5 second to analize, fetch unsplash images and DOM redrawing. I mean our users have already seen NSFW content, however was not expected for them
How i see logic:
visibility: hidden), cause we don't know are images safe or notvisibility to visible. If not safe leave hiddenYeah, probably in some cases user still can see NSFW content for a while, but definitely time will decreased. Why I think its better? We increase performance due to not fetch random unsplash image and user doesn't wait(with NSFW content) so long to filter images
@navendu-pottekkat what do you think about it?
p.s. I can implement it with #9
I have no idea what's the difference between these licences, but most github repos use MIT License
Do we have any reasons to use GPL-3.0 License?
Not a problem, just a thought. Following up on #2, would it be possible to add a toggle so the extension only shows NSFW content? That could come in handy to hide all the crap on some sites.
An opt-in option to reverses the filtering ie if (nfsw) → if (!nsfw). The rest remains untouched.
Status quo.
What's expected:
What I get:
The model should be activated as soon as the web page is loaded. Possibly before anything is displayed on the screen.
Currently, the model is activated when the user scrolls through a website. And there is a noticeable lag.
Usage of DeepFakes type changes to an image but to clothe people.
N/A
N/A
Update icons in the extension package and in product pages.
The extension should not cause any lag and with our testing, it does not cause any lag. Need to test if this is a legitimate issue.
Smaller images should also be checked.
One user tested the extension out on a German imageboard https://pr0gramm.com/ and found that using the extension is causing the page to load significantly slower.
Also, the smaller images on the page were unfiltered.
I did test it on Reddit and a German imageboard that lists it content in 128x128 thumbnails within a grid. The NSFW section is for members only though =/
That's the site where I had most problems with images not being blocked. So I guess the AI doesn't seem to be trained well enough for such small images. This was the site with the longest loading times, but that site would probably be the worst case for this extension. I think another reason for the long loading times is the XHRs that load the images on that site which also leads to the problem of images being displayed before they eventually are blocked.
Check the website mentioned in the issue.
The extension makes Notion inaccessible and Reddit couldn't load properly
Notion web app went blank, and some parts of the Reddit website are broken
Lets say website has 2 or more images with same url, like avatar: main image, small image for comment section and etc. We analyze same image link twice or more. Lets get rid of redundant work to reduce time of filtering whole page
Image analyzed twice
Image analyzed once
No.
The extension could have a setting which is a scale, for example 1-100, that allows you to set how strict the filter should be. I believe the process that classifies an image as NSFW also has a confidence rating on it so you could basically allow users to choose how confident they'd like it to be.
N/A
I'm always frustrated when I want to report NSFW and if I show the screenshot the NSFW will be blank.
A solution is to Put an option where NSFW Content will have the "NSFW" in bold white.
Thanks.
Add a popup window with buttons to choose if the user likes to have the images replaced, blurred, or added a watermark.
No popup and by default the images are replaced.
If page has div element with background-image, we should filtered it too
<div style="background-image: url('https://example.com/image.jpg')"></div>Should be filtered
Nothing is filtered
Add a landing page for our extension. A simple one-page website should be enough.
Currently, the default README file in docs/ folder is used for creating the website.
Should we add this?
Setup auto-update for Google Chrome https://developer.chrome.com/apps/autoupdate
Google Chrome auto updates the extension
Google Chrome doesn't auto update the extension
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.