Using api in building chrome extension #107

rkadam61001 · 2022-01-17T19:27:43Z

rkadam61001
Jan 17, 2022

Will you please tell me how can I use ur API in building chrome extension.Actually I want to build a extension whch when clicked will show a randome quote.Will u pls guide me.

lukePeavey · 2022-01-20T20:55:11Z

lukePeavey
Jan 20, 2022
Maintainer

If you are new to building chrome extensions, I would start by reading the developer documentation

The Getting Started Guide covers all the steps to building a basic extension.

Here is an example of a simple extension that uses the Quotable API ...

When the extension icon is clicked in the browser toolbar, it open a popup component that displays a random quote from the Quotable API.

quotable-chrome-extension-screencast.mp4

Files

manifest.json
popup.html
popup.js
popup.css

`manifest.json`

See developer.chrome/docs/manifest-v3

{
  "name": "Random Quote Extension",
  "description": "Displays a random quote from the Quotable API",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["webRequest"],
  "host_permissions": ["https://api.quotable.io/*"],
  "action": {
    "default_popup": "popup.html"
  }
}

`popup.html`

This file contains the html for the popup component that is displayed when the user clicks the extension icon in the toolbar.

There are two empty elements (#content and #author) that will be used to display the quote.
It loads an external javascript file (popup.js) and a stylesheet (popup.css).

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="popup.css" />
  </head>
  <body>
    <div class="container">
      <img src="/images/logo.png" class="logo" />
      <blockquote class="quote">
        <div id="content"></div>
        <cite id="author"></cite>
      </blockquote>
      <button>Get new Quote</button>
    </div>
    <script src="popup.js"></script>
  </body>
</html>

`popup.js`

This script runs within the popup component. It handles the logic of fetching quotes and updating the DOM elements inside the popup view.

// HTML elements
const button = document.querySelector('#updateQuote');
const contentNode = document.querySelector('#content');
const authorNode = document.querySelector('#author');

// Fetches a quote from the API and displays it within the popup
async function updateQuote() {
  contentNode.textContent = '';
  authorNode.textContent = '';
  try {
    // Fetch a quote from the API
    const response = await fetch(
      `https://api.quotable.io/random?maxLength=130`
    );
    const { content, author } = await response.json();
    // Update the html content of the elements in the popup component
    contentNode.textContent = `"${content}"`;
    authorNode.textContent = `- ${author}`;
  } catch (error) {
    console.log(error);
    contentNode.textContent = 'Something went wrong...';
  }
}

// Execute the function when the popup component is opened
window.addEventListener('DOMContentLoaded', updateQuote);
// Update the quote again when the user clicks the "update quote"
// button inside the popup view.
button.addEventListener('click', updateQuote);

`popup.css`

Your custom styles for the popup component

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using api in building chrome extension #107

{{title}}

Replies: 1 comment

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Using api in building chrome extension #107

rkadam61001 Jan 17, 2022

Replies: 1 comment

lukePeavey Jan 20, 2022 Maintainer

manifest.json

popup.html

popup.js

popup.css

rkadam61001
Jan 17, 2022

lukePeavey
Jan 20, 2022
Maintainer

`manifest.json`

`popup.html`

`popup.js`

`popup.css`