Tag: chrome_extension

Easy Introduction to Chrome Extension.

  1. Create a Folder
    • Name it: DadJokes
    • This folder will hold all the essential files needed for your extension.
  1. Create manifest.json
    • Inside the DadJokes folder, create a new file called manifest.json.
    • The manifest.json file defines the metadata of your extension, such as name, version, permissions, and scripts.

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.png inside the DadJokes folder.
  • 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.js in the DadJokes folder.
  • 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 DadJokes folder.
    • Your Chrome extension will now be installed and visible in the toolbar!

By following these steps, you’ll have a working Chrome extension that displays a random dad joke whenever you click its icon.