Tabsome Widget Creator Guide

🎨 What are Tabsome Widgets?

Tabsome widgets are custom HTML/CSS/JavaScript components that display in the spotlight section of your new tab page. They allow you to show dynamic content like quotes, countdowns, custom animations, or anything you can build with web technologies!

📐 Widget Specifications

✨ Best Practices

• Keep it simple: Focus on one main piece of information or functionality
• Use relative units: Use %, em, or rem instead of fixed pixels for better responsiveness
• Test thoroughly: Preview your widget before publishing to ensure it works perfectly
• Optimize performance: Avoid heavy animations or excessive API calls that might slow down the new tab
• Consider readability: Use sufficient contrast and legible fonts (minimum 14px for body text)
• Handle errors gracefully: If fetching external data, show a friendly message if it fails
• Respect privacy: Don't collect or transmit user data without explicit permission
• Make it accessible: Use semantic HTML and provide alt text for images

🏗️ Widget Structure

Every Tabsome widget consists of three components:

{
  "id": "unique-widget-id",
  "title": "My Awesome Widget",
  "description": "A cool widget that does amazing things",
  "labels": ["productivity", "quotes", "custom"],
  "widget": {
    "html": "<div class=\"widget\">...</div>",
    "css": ".widget { ... }",
    "js": "// Your JavaScript code here"
  }
}

🎯 Ready-to-Use Templates

Get started quickly with these pre-built templates. Click a tab to view the code, then copy and customize!

<div class="widget-container">
  <h1 class="widget-title">Stay Focused & Ship It! 🚀</h1>
</div>

.widget-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.widget-title {
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

// No JavaScript needed for this simple widget!
console.log('Widget loaded successfully!');

<div class="quote-widget">
  <div class="quote-icon">"</div>
  <p class="quote-text" id="quote"></p>
  <p class="quote-author" id="author"></p>
</div>

.quote-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  padding: 20px 40px;
  position: relative;
}

.quote-icon {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 48px;
  color: rgba(255, 255, 255, 0.2);
  font-family: Georgia, serif;
}

.quote-text {
  font-size: 18px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
  margin: 0 0 8px 0;
  line-height: 1.4;
}

.quote-author {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
  font-style: italic;
  margin: 0;
}

const quotes = [
  { text: "The only way to do great work is to love what you do.", author: "Steve Jobs" },
  { text: "Innovation distinguishes between a leader and a follower.", author: "Steve Jobs" },
  { text: "Stay hungry, stay foolish.", author: "Steve Jobs" },
  { text: "Simplicity is the ultimate sophistication.", author: "Leonardo da Vinci" },
  { text: "The future belongs to those who believe in their dreams.", author: "Eleanor Roosevelt" }
];

function displayRandomQuote() {
  const randomQuote = quotes[Math.floor(Math.random() * quotes.length)];
  document.getElementById('quote').textContent = randomQuote.text;
  document.getElementById('author').textContent = '— ' + randomQuote.author;
}

displayRandomQuote();

<div class="countdown-widget">
  <div class="countdown-label">Time Until New Year 🎉</div>
  <div class="countdown-display" id="countdown"></div>
</div>

.countdown-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

.countdown-label {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 12px;
}

.countdown-display {
  font-size: 36px;
  font-weight: 700;
  color: #ffffff;
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

// Set your target date here (YYYY, MM-1, DD)
const targetDate = new Date(2026, 0, 1).getTime();

function updateCountdown() {
  const now = new Date().getTime();
  const distance = targetDate - now;

  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);

  document.getElementById('countdown').textContent = 
    `${days}d ${hours}h ${minutes}m ${seconds}s`;

  if (distance < 0) {
    document.getElementById('countdown').textContent = "🎉 It's here!";
  }
}

updateCountdown();
setInterval(updateCountdown, 1000);

🧪 Testing Your Widget

Before sharing your widget, make sure to test it thoroughly:

1. Preview Locally: Create an HTML file with your widget code and open it in a browser
2. Test in the Extension: Import your widget into Tabsome and verify it displays correctly
3. Check Responsiveness: Ensure it looks good at the exact 800×120px size
4. Verify Functionality: Test all interactive elements and API calls
5. Browser Compatibility: Test in Chrome and other Chromium-based browsers

🌟 Sharing Your Widget

Ready to share your creation with the community? Here's how:

🚀 Advanced Tips

Using External APIs

You can fetch data from external APIs, but remember:

• The API must support CORS (Cross-Origin Resource Sharing)
• Use HTTPS endpoints only
• Handle loading states and errors gracefully
• Consider caching to reduce API calls

Performance Optimization

• Minimize DOM manipulation
• Use CSS animations instead of JavaScript when possible
• Debounce frequent updates (like countdown timers)
• Lazy load heavy resources

Styling Tips

• Use CSS variables for easy theme customization
• Implement smooth transitions for a polished feel
• Consider using flexbox or grid for layout
• Test with different background images (the new tab has custom backgrounds)

Ready to Create?

Start building your amazing widget now and make your new tab experience truly yours!