An Interest In:
Web News this Week
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
Coding an extension that blocks Social Media Websites with HTML, CSS and JS.
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, LinkedIn, WhatsApp, Reddit etc. Add this extension into your browser and achieve better productivity.
Creating the project
Go ahead and initialise our new project using the CodePen playground or setup your own project on Visual Studio Code with the following file structure under your src folder.
Social Media Blocks |- assets |- css |- styles.css |- images |- logo16.png |- logo128.png |- /src |- popup.html |- popup.js |- manifest.json
Part 1: modifying our HTML file.
Before we get started let's replace our index.html
file with the following boilerplate code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="assets/css/styles.css"> <title>Social Media Blocks</title></head><body> <!--Generated inside our JS file--></body><script src="popup.js"></script></html>
Part 2: modifying our CSS file.
We won't be modifying our css file directly for this project and instead we will create the styling inside our JS file.
/*Just here for aesthetics!*/
Part 3: modifying our JS file.
Go to our JS file and edit the popup.js
file with the following:
const generateHTML = (pageName) => { return ` <head> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Arvo'> </head> <body> <section class="page_404"> <div class="container"> <div class="row"> <div class="col-sm-12 "> <div class="col-sm-10 col-sm-offset-1 text-center"> <div class="four_zero_four_bg"> <h1 class="text-center ">404</h1> </div> <div class="contant_box_404"> <h3 class="_1"> Get back to work </h3> <p class='_2'>STUDYING > ${pageName}</p> </div> </div> </div> </div> </div> </section>`; }; const generateSTYLING = () => { return `<style> body { margin: 0; padding: 0; font-family: "Tomorrow", sans-serif; height: 100vh; background-image: linear-gradient( to top, #2e1753, #1f1746, #131537, #0d1028, #050819 ); display: flex; justify-content: center; align-items: center; overflow: hidden; }.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;}.page_404 img{ width:100%;}.four_zero_four_bg{ background-image: url('https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif'); height: 400px; background-position: center; } ._1 { text-align: center; display: block; position: relative; letter-spacing: 12px; font-size: 4em; line-height: 80%; margin: 20px; } ._2 { text-align: center; display: block; position: relative; font-size: 20px; margin: 60px; } .four_zero_four_bg h1{ font-size:80px; } .four_zero_four_bg h3{ font-size:80px; } .link_404{ color: #fff!important; padding: 10px 20px; background: #39ac31; margin: 20px 0; display: inline-block;} .contant_box_404{ margin-top:-50px;} </style>`; }; switch (window.location.hostname){ case "www.youtube.com": document.head.innerHTML = generateSTYLING(); document.body.innerHTML = generateHTML('YOUTUBE'); break; case "www.facebook.com": document.head.innerHTML = generateSTYLING(); document.body.innerHTML = generateHTML('FACEBOOK'); break; case "www.netflix.com": document.head.innerHTML = generateSTYLING(); document.body.innerHTML = generateHTML('NETFLIX'); break; case "www.tiktok.com": document.head.innerHTML = generateSTYLING(); document.body.innerHTML = generateHTML('TIKTOK'); break; case "www.discord.com": document.head.innerHTML = generateSTYLING(); document.body.innerHTML = generateHTML('DISCORD'); break; case "www.instagram.com": document.head.innerHTML = generateSTYLING(); document.body.innerHTML = generateHTML('INSTAGRAM'); break; case "web.whatsapp.com": document.head.innerHTML = generateSTYLING(); document.body.innerHTML = generateHTML('WHATSAPP'); break; case "www.linkedin.com": document.head.innerHTML = generateSTYLING(); document.body.innerHTML = generateHTML('LINKEDIN'); break; case "www.twitter.com": document.head.innerHTML = generateSTYLING(); document.body.innerHTML = generateHTML('TWITTER'); break; case "www.reddit.com": document.head.innerHTML = generateSTYLING(); document.body.innerHTML = generateHTML('REDDIT'); break; };
Part 4: modifying our Manifest.Json file.
The manifest is a JSON file that contains all the meta information about our extension. Next step is to add the following lines of code and complete our Manifest.JSON
file.
{ "manifest_version": 3, "name": "Social Media Blocks", "description": "Developers don't talk much. Their code does all the talking. So here's a google chrome extension for developers that want to block big social media websites like Twitter: Facebook, Instagram, LinkedIn, WhatsApp, Reddit etc. Add this extension into your browser and achieve better productivity.", "version" : "1.0.0", "icons" : {"128": "./assets/images/logo128.png"}, "action": { "default_icon": "./assets/images/logo16.png", "default_popup": "./popup.html" }, "content_scripts": [ { "matches": ["<all_urls>"], "js": ["popup.js"] } ], "permissions": ["activeTab"]}
Note - Remember to check the chrome developer docs as manifest_version 3 is the latest version.
Deployment
Finally, we can load our extension in chrome developer mode like so:
Note - Remember to click on the load unpacked button and then choose your extensions route folder path.
You should now see this on WWW.YOUTUBE.COM
:
Recap
If you followed along then you should have completed the project and finished off your google chrome extension.
Now if you made it this far, then I am linking the code to my Github for you to fork or clone and then the job's done.
Original Link: https://dev.to/hr21don/coding-an-extension-that-blocks-social-media-websites-with-html-css-and-js-3bp
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To