On this put up, I’ll present you how one can create a Google Chrome extension that may block social media web sites like Twitter: Fb, Instagram, LinkedIn, WhatsApp, Reddit and so on. Add this extension into your browser and obtain higher productiveness.
Creating the mission
Go forward and initialise our new mission utilizing the CodePen playground or setup your personal mission on Visible Studio Code with the next file construction beneath your src folder.
Social Media Blocks
|- property
|- css
|- types.css
|- pictures
|- logo16.png
|- logo128.png
|- /src
|- popup.html
|- popup.js
|- manifest.json
Half 1: modifying our HTML file.
Earlier than we get began let’s substitute our index.html file with the next boilerplate code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Suitable" content material="IE=edge" />
<meta title="viewport" content material="width=device-width, initial-scale=1.0" />
<hyperlink rel="stylesheet" href="https://dev.to/hr21don/property/css/types.css">
<title>Social Media Blocks</title>
</head>
<physique>
<!--Generated inside our JS file-->
</physique>
<script src="popup.js"></script>
</html>
Half 2: modifying our CSS file.
We can’t be modifying our css file straight for this mission and as a substitute we’ll create the styling inside our JS file.
/*Simply right here for aesthetics!*/
Half 3: modifying our JS file.
Go to our JS file and edit the popup.js file with the next:
const generateHTML = (pageName) => {
return `
<head>
<hyperlink rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<hyperlink rel="stylesheet" href="https://fonts.googleapis.com/css?household=Arvo">
</head>
<physique>
<part 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 again to work
</h3>
<p class="_2">STUDYING > ${pageName}</p>
</div>
</div>
</div>
</div>
</div>
</part>`;
};
const generateSTYLING = () => {
return `<fashion>
physique {
margin: 0;
padding: 0;
font-family: "Tomorrow", sans-serif;
peak: 100vh;
background-image: linear-gradient(
to high,
#2e1753,
#1f1746,
#131537,
#0d1028,
#050819
);
show: flex;
justify-content: middle;
align-items: middle;
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/customers/285475/screenshots/2083086/dribbble_1.gif');
peak: 400px;
background-position: middle;
}
._1 {
text-align: middle;
show: block;
place: relative;
letter-spacing: 12px;
font-size: 4em;
line-height: 80%;
margin: 20px;
}
._2 {
text-align: middle;
show: block;
place: relative;
font-size: 20px;
margin: 60px;
}
.four_zero_four_bg h1{
font-size:80px;
}
.four_zero_four_bg h3{
font-size:80px;
}
.link_404{
shade: #fff!vital;
padding: 10px 20px;
background: #39ac31;
margin: 20px 0;
show: inline-block;}
.contant_box_404{ margin-top:-50px;}
</fashion>`;
};
swap (window.location.hostname){
case "www.youtube.com":
doc.head.innerHTML = generateSTYLING();
doc.physique.innerHTML = generateHTML('YOUTUBE');
break;
case "www.fb.com":
doc.head.innerHTML = generateSTYLING();
doc.physique.innerHTML = generateHTML('FACEBOOK');
break;
case "www.netflix.com":
doc.head.innerHTML = generateSTYLING();
doc.physique.innerHTML = generateHTML('NETFLIX');
break;
case "www.tiktok.com":
doc.head.innerHTML = generateSTYLING();
doc.physique.innerHTML = generateHTML('TIKTOK');
break;
case "www.discord.com":
doc.head.innerHTML = generateSTYLING();
doc.physique.innerHTML = generateHTML('DISCORD');
break;
case "www.instagram.com":
doc.head.innerHTML = generateSTYLING();
doc.physique.innerHTML = generateHTML('INSTAGRAM');
break;
case "internet.whatsapp.com":
doc.head.innerHTML = generateSTYLING();
doc.physique.innerHTML = generateHTML('WHATSAPP');
break;
case "www.linkedin.com":
doc.head.innerHTML = generateSTYLING();
doc.physique.innerHTML = generateHTML('LINKEDIN');
break;
case "www.twitter.com":
doc.head.innerHTML = generateSTYLING();
doc.physique.innerHTML = generateHTML('TWITTER');
break;
case "www.reddit.com":
doc.head.innerHTML = generateSTYLING();
doc.physique.innerHTML = generateHTML('REDDIT');
break;
};
Half 4: modifying our Manifest.Json file.
The manifest is a JSON file that incorporates all of the meta details about our extension. Subsequent step is so as to add the next strains of code and full our Manifest.JSON file.
{
"manifest_version": 3,
"title": "Social Media Blocks",
"description": "Builders do not discuss a lot. Their code does all of the speaking. So this is a google chrome extension for builders that need to block massive social media web sites like Twitter: Fb, Instagram, LinkedIn, WhatsApp, Reddit and so on. Add this extension into your browser and obtain higher productiveness.",
"model" : "1.0.0",
"icons" : {"128": "./property/pictures/logo128.png"},
"motion": {
"default_icon": "./property/pictures/logo16.png",
"default_popup": "./popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["popup.js"]
}
],
"permissions": ["activeTab"]
}
Word 💡 – Bear in mind to examine the chrome developer docs as manifest_version 3 is the newest model.
Deployment
Lastly, we will load our extension in chrome developer mode like so:
Word 💡 – Bear in mind to click on on the load unpacked button after which select your extensions route folder path.
You must now see this on WWW.YOUTUBE.COM ✅:
Recap
Should you adopted alongside then you need to have accomplished the mission and completed off your google chrome extension.
Now should you made it this far, then I’m linking the code to my Github so that you can fork or clone after which the job’s executed.
