Coding Challenges Chrome Extension

A custom Chrome extension that replaces the new tab page with a beautiful, functional dashboard featuring real-time clock, date display, and live GitHub pull requests from the Coding Challenges community.

!Extension Preview !Manifest Version !JavaScript

Features

✅ Step 1: Custom Branding

   git clone 
   cd 73-chrome-extension
   

2. Generate Icons (Optional)

If you have ImageMagick installed:

   ./generate-icons.sh
   

Or manually create three PNG files in the icons/ directory: - icon16.png (16x16 pixels) - icon48.png (48x48 pixels) - icon128.png (128x128 pixels)

You can use any image editor or online tool to create these icons.

3. Open Chrome Extensions Page - Navigate to chrome://extensions/ in Google Chrome - Or go to Menu → More Tools → Extensions

4. Enable Developer Mode - Toggle the "Developer mode" switch in the top-right corner

5. Load the Extension - Click "Load unpacked" - Select the 73-chrome-extension directory - The extension should now appear in your extensions list

6. Test the Extension - Open a new tab (Ctrl+T / Cmd+T) - You should see the custom new tab page with: - Coding Challenges branding - Current time and date - List of open pull requests

Project Structure

73-chrome-extension/
├── manifest.json          # Extension configuration (Manifest V3)
├── newtab.html           # New tab page HTML structure
├── styles.css            # Styling and animations
├── script.js             # JavaScript logic for time, date, and API calls
├── generate-icons.sh     # Script to generate placeholder icons
├── icons/                # Extension icons directory
│   ├── icon16.png       # 16x16 icon
│   ├── icon48.png       # 48x48 icon
│   └── icon128.png      # 128x128 icon
├── README.md            # This file
├── challenge.md         # Challenge requirements
└── docs/                # Detailed documentation
    ├── implementation.md  # Architecture and design decisions
    ├── examples.md       # Usage examples and customization
    └── api.md            # Chrome Extension API reference

Technical Details

Manifest V3

This extension uses Chrome's Manifest V3, which is the latest and required standard for Chrome extensions. Key features:

- chrome_url_overrides.newtab: Replaces the default new tab page

Refreshing Data

- Pull requests auto-refresh every 5 minutes

body {
    background-color: #04295B; / Change this to your preferred color /
}

Changing Time Format

Edit script.js:

// For 12-hour format
const timeString = now.toLocaleTimeString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: true
});

Changing Refresh Interval

Edit script.js:

// Change 300000 (5 minutes) to your preferred interval in milliseconds
setInterval(fetchPullRequests, 300000);

Adding Different Data Sources

See docs/examples.md for examples of integrating other APIs like:

Debugging

1. Open a new tab with the extension 2. Right-click anywhere on the page 3. Select "Inspect" to open Chrome DevTools 4. Check the Console tab for any errors or logs

Common Development Commands

Generate icons (requires ImageMagick)
./generate-icons.sh
Validate manifest.json
Use online validator: https://jsonlint.com/
Check for errors
Open chrome://extensions/ and check for error badges

Troubleshooting

Extension Not Loading

Problem: Extension doesn't appear after loading unpacked

Solutions:

---

Happy Coding! 🚀

For more coding challenges, visit CodingChallenges.fyi