This content originally appeared on DEV Community and was authored by Ivy Chen
✨ What you'll be making
In this tutorial, I'll walk you through how to make a chrome extension with vanilla javascript in a few simple steps. The chrome extension that I made gives you a random Chinese idiom every time you open a new tab. But you can easily experiment with quotes or vocabs of another language you want to expose yourself to new words/affirming quotes more often!
✨ First things first: HTML
<body>
<div class = "container">
<div id = "chengyu">
<h1></h1>
</div>
<div id = "pingyin">
<h3></h3>
</div>
<div id = "definition">
<h2></h2>
</div>
</div>
</body>
Remember to link the script.js file and data.json in which you'll create later.
✨ Style it to your taste: CSS
Remember to select the id with a #. I added a line of webkit animation to the body to make the text flow in better.
body {
color: white;
font-size: 40px;
overflow: hidden; /* Hide scrollbars */
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
}
Then you'll need to add these lines in the css as well for the animation to take effect.
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
✨ The fun part: JS
Basically, you write the code in one big function. I first created an array in which I put in some hand-picked colors I'm going to use for the background. Then, there is a general randomize function that returns a random item in the array for you.
// randomize function
function randomize(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
To work with the json file, you use fetch to retrieve it. Underneath .then() is where the majority of the magic happens. You call the randomize function with the data from the json file and assign that to a variable for easier access later on. Then you manipulate the DOM to get the texts to show up randomly together on the HTML.
// loads the external json file
fetch('./data.json')
.then((response) => {
return response.json()
})
.then((data) => {
// work with JSON data here
var random = randomize(data);
// display the elements on the html
document.getElementById('chengyu').innerHTML = random.chengyu;
document.getElementById('definition').innerHTML = random.definition;
document.getElementById('pingyin').innerHTML = random.pingyin;
})
.catch((err) => {
// do something for an error here
})
Then the window.onload function is where you put the code for randomly picking a color from the array and displaying it as the background
//pick a random background color
window.onload = function() {
var randomColor = randomize(color);
document.getElementsByTagName("body")[0].style.background = randomColor;
};
Here's the overall code for the JS part!
(function(){
// array of colors
var color = [
"#d1495b",
"#edae49",
"#003d5b",
"#00509d",
"#3a5a40",
"#1f7a8c",
"#588157",
];
// randomize function
function randomize(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
// loads the external json file
fetch('./data.json')
.then((response) => {
return response.json()
})
.then((data) => {
// work with JSON data here
var random = randomize(data);
// display the elements on the html
document.getElementById('chengyu').innerHTML = random.chengyu;
document.getElementById('definition').innerHTML = random.definition;
document.getElementById('pingyin').innerHTML = random.pingyin;
})
.catch((err) => {
// do something for an error here
})
//pick a random background color
window.onload = function() {
var randomColor = randomize(color);
document.getElementsByTagName("body")[0].style.background = randomColor;
};
})();
✨ The chrome extension part: manifest.json
This is the file that makes the javascript a chrome extension. Customize this to your project needs. Make sure to create an icons folder in your directory and add png of icons in 16px by 16px, 48px by 48px, and 128px by 128px. The description is a one-liner that will show up as a short description when people browse for your extension.
{
"name": "chengyu",
"short_name": "chengyu",
"version": "0.0.1.2",
"description": "New tab, new Chinese idiom",
"icons": { "16": "icons/chengyu.png",
"48": "icons/chengyu-2png",
"128": "icons/chengyu-3.png"
},
"manifest_version": 2,
"chrome_url_overrides": {
"newtab": "index.html"
},
"web_accessible_resources": [
"data.json"
]
}
✨ Populating it with content: data.json
This is where you put your JSON objects. Here's an example snippet from my own JSON file to show you the syntax in which you would format it.
[
{"chengyu": "一了百了", "pingyin": "Yīliǎobǎiliǎo","definition": "When one thing is done, everything is done"},
{"chengyu": "一刀兩斷", "pingyin": "yīdāoliǎngduà", "definition": "End relationships"},
{"chengyu": "一口咬定", "pingyin": "yīkǒu yǎodìng", "definition": "Short of something"}
]
✨ Time to try out the extension locally
Go to your manage extensions page and turn on the developer mode. Next, click on load unpacked extension and navigate to the folder that contains your code. Then, you should be able to try out the extension on your Chrome browser. Every time you change the code, it will also be reflected in this developer mode.
? Put it on the Chrome store to share with friends*
To put your extension on the store, you'd need to pay a one-time $5 fee to register a developer account. You'll also need to upload your project to the developer dashboard as a zip file (if you're on mac, compress it and it'll be a zip file). You can follow the quick steps here. It'll take around 1-2 days for the submission to get reviewed and be released on the Chrome store.
This content originally appeared on DEV Community and was authored by Ivy Chen
Ivy Chen | Sciencx (2021-06-04T21:59:01+00:00) How to make a chrome extension with javascript. Retrieved from https://www.scien.cx/2021/06/04/how-to-make-a-chrome-extension-with-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.