- Create a Folder
- Name it:
DadJokes - This folder will hold all the essential files needed for your extension.
- Name it:
- Create
manifest.json- Inside the
DadJokesfolder, create a new file calledmanifest.json. - The
manifest.jsonfile defines the metadata of your extension, such as name, version, permissions, and scripts.
- Inside the
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”]
}
3. Create popup.html
- Next, create another file in the same folder and name it
popup.html. - This HTML file will serve as the UI that opens when you click on the extension icon in Chrome.
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>
4. Add a Logo (logo.png)
- Create an image file called
logo.pnginside theDadJokesfolder. - This will serve as the icon that appears in the Chrome toolbar when your extension is installed.
Note: Make sure the image is in PNG format and follows the size guidelines for Chrome extensions (usually 128×128 pixels).
5. Create script.js
- Now, create a file named
script.jsin theDadJokesfolder. - This JavaScript file will contain the logic to fetch and display a random dad joke.
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; // Corrected key ‘attachments’
const jokeElement = document.getElementById(‘jokeElement’);
jokeElement.innerHTML = jokeText;
})
.catch(error => {
console.error(‘Error fetching the joke:’, error);
});
-
- Open Chrome, go to
chrome://extensions/, and turn on Developer Mode (toggle in the top right). - Click Load unpacked and select the
DadJokesfolder. - Your Chrome extension will now be installed and visible in the toolbar!
- Open Chrome, go to
By following these steps, you’ll have a working Chrome extension that displays a random dad joke whenever you click its icon.
crisp blog