Are you a Pokémon fan looking for a fun project? In this blog post, I’ll guide you through creating a simple yet powerful Pokémon image fetcher Chrome extension. With just three files, you can build an extension that lets you search for Pokémon and see their images instantly. Let’s dive in!
- Manifest document
Every Chrome extension needs a manifest.json file. This file tells Chrome about your extension’s details and settings. For our Pokémon fetcher, the manifest.json file looks like this:
"manifest_version": 3,
"name": " Pokémon Image Fetcher",
"version": "1.0.0"
2. HTML file
The popUp.html file is where the magic happens. This file defines the user interface of your extension’s popup. Here’s the code for the HTML file:
<body>
<div class="container m-3">
<div class="field">
<label> Pokemon Finder</label>
<div class="field">
<input id="pokemonName" type="text" placeholder="Enter your Pokemon name ">
<button id="button" class="button has-background-link-light" >Confirm</button>
<img src="" alt="Pokemon Sprite" id="pokemonSprite" />
</div>
</div>
</div>
</body>
3. JavaScript code
Finally, let’s write the JavaScript code to interact with the Pokémon API and fetch the data. Save this code in a file named api.js:
async function fetchData(){
try{
const pokemonName = document.getElementById("pokemonName").value
const response = await fetch (`https://pokeapi.co/api/v2/pokemon/${pokemonName}/`)
if (!response.ok){
throw new Error ("Could not be fetched")
}
const data = await response.json();
const pokemonSprite = data.sprites.front_default;
const imgElement = document.getElementById("pokemonSprite")
imgElement.src = pokemonSprite
console.log(data)
}
catch (error){
console.log(error)
}
}Conclusion
So there you have it your very own chrome extension for fetching pokemon images, useful to have whenever you are bored! Full code provided in link below:
