I've made a personal Chrome extension for financial news, and I was surprised at how easy it is to make extensions. You can do it in just 2 steps.

Step 1

You need to create a folder and include a mandatory manifest.json file specifically for Chrome Extensions.

Here's an example of the manifest.json file:

{
    "name":"Trending Stocks",
    "version":"0.0.1",
    "manifest_version":2 ,
}

Using this, you can create a Chrome extension, although it won't perform any actions. If you want to see it in action on Chrome, follow these steps: open the extensions page in Chrome, enable the developer mode, and load this folder as an unpacked extension.

The full JSON file looks like this :

{
    "name":"Trending Stocks",
    "version":"0.0.1",
    "manifest_version":2 ,
    "browser_action":{
        "default_popup":"popup.html",
        "default_icon":"logo.png"
    },
    "icons":{
        "128":"logo.png"
    },
    "permissions":["activeTab"]
}

Explanation of this file :
"name": "Trending Stocks": Specifies the name of the extension.
"version": "0.0.1": Specifies the version number of the extension.
"manifest_version": 2: Indicates the manifest file format version. The number 2 refers to the newer format.
"browser_action": Defines the behavior of the browser action (the extension's icon displayed in the toolbar).
- "default_popup": "popup.html": Specifies the HTML file that will be displayed in a popup when the extension's icon is clicked.
- "default_icon": "logo.png": Sets the default icon for the extension displayed in the toolbar.
"icons": Specifies icons for the extension
- "128": "logo.png": Sets the icon file with a size of 128x128 pixels for use in different contexts.
"permissions": ["activeTab"]: Requests permission to access the currently active tab in the browser. This allows the extension to interact with the webpage displayed in the active tab.

Also, create a boilerplate HTML file with the name of the file specified above in this case popup.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Name it whatever you want</title>
</head>
<body>

</body>
</html>

Step 2

Create the script.js file and specify what it needs to do for example in this I have fetched an API for news and that's it. Your Chrome extension is ready.

fetch(
  "https://www.alphavantage.co/query?function=NEWS_SENTIMENT&tickers=AAPL&apikey=Y431ITMYNB45WYH9"
)
  .then((response) => response.json())
  .then((stockData) => {
    const links = [
      document.getElementById("visit1"),
      document.getElementById("visit2"),
      document.getElementById("visit3"),
      document.getElementById("visit4"),
      document.getElementById("visit5"),
    ];

    const stockTextElements = [
      document.getElementById("stockText1"),
      document.getElementById("stockText2"),
      document.getElementById("stockText3"),
      document.getElementById("stockText4"),
      document.getElementById("stockText5"),
    ];

    for (let i = 0; i < 5; i++) {
      const newsText = stockData.feed[i].title;
      const url = stockData.feed[i].url;
      stockTextElements[i].innerHTML = newsText;

      // Assign click event handler to each link
      links[i].addEventListener("click", () => {
        window.open(url, "_blank"); // Open the URL in a new tab/window
      });
    }
  })
  .catch((error) => {
    console.error("Error:", error);
  });

You can check the source code here: https://github.com/harshlancer/Stock-News-Chrome-Extension

Make Chrome Extension in 2 steps

Table of contents

Step 1

Step 2

Subscribe to my newsletter

Harsh Rajan Dwivedi

Harsh Rajan Dwivedi