Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
July 22, 2022 11:09 am GMT

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:

Socialblocks.gif

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 :

Socialblocks.gif

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

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To