How to Create Your Own Stock Analysis Chrome Extension

What You'll Build

• Enter a stock ticker (like AAPL for Apple) and your API key.
• View stock news, financial statement estimates (annual or quarterly), and price target news.

What You'll Need

• A computer with Google Chrome.
• A text editor (like VS Code).
• A FinancialModelingPrep API key (I'll show you how to get one).
• Basic knowledge of HTML, CSS, and JavaScript (don't worry, I'll keep it simple).
• A 128x128 pixel image for the extension icon (you can make one in Canva).

Step 1: Set Up Your Project Folder

1. Create a folder called stock-extension on your computer (e.g., on your Desktop).
2. Inside this folder, you'll add five files as shown in the below picture:
   • manifest.json: Tells Chrome what your extension does.
   • popup.html: The popup window users see.
   • popup.css: Styles the popup to look nice.
   • popup.js: Handles the logic, like fetching data.
   • icon.png: A 128x128 image for the extension's icon.

Step 2: Get Your FinancialModelingPrep API Key

Step 3: Create the Manifest File

1. Open VScode and create a file named manifest.json in the stock-extension folder.
2. Write the below code:

3. Save the file.

• "manifest_version": uses the latest Chrome extension format.
• "permissions": "storage" lets the extension save your API key.
• "default_popup": "popup.html" shows the popup when you click the icon.
• "icons" points to your 128x128 icon image.

Step 4: Create the Popup HTML

1. Create a file named popup.html in the stock-extension folder.
2. Write the below code:

What this does:

• Creates a popup with a title, API key input, and three sections for stock data.

Step 5: Style the Popup with CSS

1. Create a file named popup.css in the stock-extension folder.
2. Copy write the below code:

• Sets a 400px-wide popup with a light gray background.
• Styles buttons as black with white text, with a darker hover effect.

Step 6: Add the JavaScript Logic

1. Create a file named popup.js in the stock-extension folder.
2. Copy and paste this code:

• Listens for button clicks and input changes.
• Fetches stock data from FinancialModelingPrep using the user's API key and ticker.

Step 7: Add an Icon

1. Create or find an image (e.g., a stock chart or logo) using tools like Canva, Paint, or Photoshop.
2. Give it a name "icon" and save it in "png" format in the stock-extension folder.
3. Ensure it's exactly 128x128 pixels to avoid errors.

Step 8: Test Your Extension

1. Open Chrome and go to chrome://extensions/.
2. Turn on Developer mode (top-right toggle).
3. Click Load unpacked and select the stock-extension folder.
4. The extension should appear with your icon. Click it to open the popup.
5. Test each feature:
   • Enter your FinancialModelingPrep API key and a ticker (e.g., AAPL).
   • Click “Show Analysis” for Stock News, Financial Estimates (try both annual and quarterly), and Price Target News. Check that data appears.

Step 9: Share Your Extension

1. Go to the Chrome Web Store Developer Dashboard.
2. Sign in, pay a one-time $5 fee, and create a developer account.
3. Zip your stock-extension folder (right-click > Compress).
4. In the Dashboard, click New Item, upload the ZIP, and fill out details:
   • Name: Stock Analysis Extension.
   • Description: Explain what it does and that users need their own API key.
   • Screenshots: Take 1-5 screenshots (1280x800 or 640x400) of the popup in action.
   • Category: Productivity or Business Tools.
   • Privacy: Note that the API key is stored locally and no data is collected.
5. Submit for review. It may take a few days. Choose Unlisted to share with specific people or Public for everyone.

• Customize It: Change the button colors in popup.css or add more API features from FinancialModelingPrep's docs.
• Icon Design: A clear icon (like a dollar sign or stock chart) makes your extension look pro.
• Share Safely: Don't include your API key in the code—it's safe now because users add their own.

If you don't want to build your own extension like described above, you can download my extension from the Chrome Store, it's called the Stock News and Forecast Extension.