DEV Community

Cover image for Coding an extension that blocks Social Media Websites with HTML, CSS and JS.

Coding an extension that blocks Social Media Websites with HTML, CSS and JS.

Helitha Rupasinghe on July 22, 2022

In this post, I will show you how you can create a Google Chrome extension that will block social media websites like Twitter: Facebook, Instagram,...
Collapse
 
joelbonetr profile image
JoelBonetR 🥇

That's nice as initial concept! 😁

I see you're looking for contributors, if I don't forget about it (can't promise) I'll add some PRs for useful features I mind during my vacations.

Have a great weekend! :)

Collapse
 
joelbonetr profile image
JoelBonetR 🥇 • Edited

@helitha nevermind, already did a PR, check it out.

Now it also checks for embedded content of those blocked sites inside other websites.

Sorry for the formatting thingy, prettier took care of it nicely 😁

Hope it suits you, cheers!

Collapse
 
hr21don profile image
Helitha Rupasinghe

Merged your pr request. 👍 @joelbonetr

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇 • Edited

Np, it was fun 😂 i wanted to toy a bit with Chrome extensions for a while so it was a good opportunity.

Btw I've first tried to set different files instead getting everything inside the main JS, it was breaking in errors because it doesn't consider it as module so I couldn't use import statements. Despite this, I'm pretty sure it should be a way to workaround that. Didn't have more time to make some tests, thought.

Collapse
 
hr21don profile image
Helitha Rupasinghe

Thank you for making a contribution! 🤓

Collapse
 
metammodern profile image
Buniamin Shabanov

Found your article through google recommendations. The code, idea and implementation is really nice, however I'd also point out that if you're having such trouble like distracting from work to social media then blocking websites will not help much. When your brains seeks for dopamine it'll do whatever it can to gain it, like opening another browser, disabling extension or using mobile phone. So as one single solution to addiction it definitely won't work, but it may work in complex with other stuff, like having more controlled and planned rest and getting more outdoor activity. Anyway, if someone has such problem find a local therapist or contact your HR, they usually know how to solve such issues)
(The article is good by the way, just enable syntax highlighting)

Collapse
 
davidteren profile image
David Teren

@metammodern Thanks for this comment. It got me thinking.

Collapse
 
hr21don profile image
Helitha Rupasinghe

Appreciate your feedback!

Collapse
 
tiru5 profile image
Tyrus Malmström

Hey @hr21don

Ti here --

I was able to find some time today, and I've implemented a few changes.
This PR mainly handles:

  • The addition of a build tool, I chose to use Vite since it's really awesome and blazing fast!
    • I have created and added a README.md to the root of the project, explaining the different commands to run for development, and building the extension.
    • This also adds the ability for utilizing ES6 modules, HMR, and much more.
  • Necessary code restructure and configuration needed in order to utilize Vite.
  • Fixed a bug specifically with these two hostnames:
    • discord
    • twitter
      • in the code prior -- we were checking for www.discord.com and www.twitter.com, however, this check failed since the hostname for those sites didn't have the www.

And that is pretty much it for now. Later, I'm going to work on a few feature ideas I have in mind!

Warmest regards,
Tyrus Malmstrom 🚀

Collapse
 
hr21don profile image
Helitha Rupasinghe

Very nice! I appreciate the contribution your making to the repo. @tiru5

Collapse
 
jacksonkasi profile image
Jackson Kasi

Really impressive

Collapse
 
vbarzana profile image
Victor A. Barzana

Lol, I use youtube for learning too hahaha, but maybe we could block anything that is not tech related using some Google Vision to determine the labels? or maybe if it contains some specific words in the description we let it pass :) Well done, I was thinking of doing something similar to reduce distraction!!!

Collapse
 
tiru5 profile image
Tyrus Malmström

Awesome concept for a Chrome extension, and well executed! 😃

I really like the updated animation you implemented, looks really clean and fluid.

I'd also love to contribute to this project -- when I have some free time, I'm going to implement a few features / thoughts I have and if all looks good, submit a PR.

Thanks for sharing, greatly appreciate it.

Onwards and upwards 🚀

Collapse
 
fegroders profile image
Fernando Groders

I liked the animation. Nice job

Collapse
 
hr21don profile image
Helitha Rupasinghe

I found my inspiration from this little snippet found here on codepen.

Collapse
 
lucidsamuel profile image
Samuel Akinosho

This is interesting, also contributed and would make more meaningful addons later on.

Collapse
 
manojtr profile image
Manoj VR

Thanks for sharing.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Fun concept idea.

Collapse
 
hr21don profile image
Helitha Rupasinghe

Thanks!

Collapse
 
drawdethepotato profile image
Edward

Thanks!!

I'm going to create a free adult site blocker, so anyone can install it!!!!!