?? How to Build Your First Chrome Extension: Dad Jokes Edition
Mani Bhaskar Edula
? IIT Hyderabad Technology Incubation Hub | Being able to technically implement your thoughts is the actual skill
Want to create a fun Chrome extension that displays random dad jokes? Follow these simple steps and you'll have your own working extension in no time!
Step 1: Create the Folder Structure
?? Create a Folder
Name the folder: DadJokes. This folder will store all the essential files needed for your Chrome extension.
Step 2: Add the manifest.json File
?? Create manifest.json
Inside the DadJokes folder, create a new file named manifest.json.
This file defines the metadata for your extension such as its name, version, and permissions.
Sample manifest.json content:
{
"name": "Dad Jokes",
"version": "0.0.1",
"manifest_version": 3,
"action": {
"default_popup": "popup.html",
"default_icon": {
"128": "logo.png"
}
},
"permissions": ["activeTab"]
}
Step 3: Create the popup.html File
?? Create popup.html
This file will serve as the user interface (UI) when you click on the extension's icon.
Sample popup.html content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dad Jokes</title>
</head>
<body>
<p id="jokeElement">Loading...</p>
<script src="script.js"></script>
</body>
</html>
领英推荐
Step 4: Add a Logo
??? Create logo.png
Add a logo image to your DadJokes folder, named logo.png.
This image will serve as the extension's icon in the Chrome toolbar.
?? Tip: Make sure the image is in PNG format and ideally sized at 128×128 pixels.
Step 5: Add the script.js File
?? Create script.js
This JavaScript file will fetch and display a random dad joke when the extension is clicked.
Sample script.js content:
fetch('https://icanhazdadjoke.com/slack', {
headers: {
'Accept': 'application/json'
}
})
.then(response => response.json())
.then(jokeData => {
const jokeText = jokeData.attachments[0].text;
const jokeElement = document.getElementById('jokeElement');
jokeElement.innerHTML = jokeText;
})
.catch(error => {
console.error('Error fetching the joke:', error);
});
Step 6: Load the Extension into Chrome
?? Install the Extension
Open Chrome and go to chrome://extensions/.
Toggle Developer Mode (top-right corner).
Click Load unpacked and select the DadJokes folder.
?? Your Chrome extension is now installed and visible in the toolbar! Just click on it to display a random dad joke.
By following these steps, you'll have your own fun and fully functional Chrome extension. Start building and enjoy some good laughs while you’re at it! ???