Contributing Guide

Welcome Contributors!

Thank you for your interest in contributing to Tab Closer! This guide will help you get started with development, testing, and submitting contributions.

Getting Started

Fork the Repository

Create a fork of the Tab Closer repository on GitHub to your personal account

Clone Your Fork

git clone https://github.com/YOUR_USERNAME/tab-closer.git
cd tab-closer

Load Extension in Chrome

See the Development Setup section below

Make Your Changes

Create a new branch, make changes, and test thoroughly

Submit Pull Request

Push your changes and open a PR with a clear description

Development Setup

Loading the Extension Locally

Enable Developer Mode

Open Chrome and navigate to chrome://extensions/
Toggle “Developer mode” ON in the top-right corner

Load Unpacked Extension

Click “Load unpacked” button
Select the directory containing the extension files (where manifest.json is located)

Verify Installation

The Tab Closer extension should now appear in your extensions list and toolbar

After making code changes, click the refresh icon on the extension card in chrome://extensions/ to reload the extension.

Development Tools

You’ll need:

Chrome Browser: Version 88 or higher (for Manifest V3 support)
Text Editor: VS Code, Sublime Text, or your preferred editor
Git: For version control
DevTools: Built into Chrome for debugging

No build process is required! This extension uses vanilla JavaScript and can be loaded directly.

Project Structure

Understanding the codebase organization:

tab-closer/
├── manifest.json          # Extension metadata and configuration
├── background.js          # Service worker (tab management logic)
├── popup.html            # Extension popup UI
├── script.js             # Popup interaction logic
├── style.css             # Popup styling
└── images/
    └── 48.png            # Extension icon (48x48px)

File Responsibilities

manifest.json - Configuration

Defines extension metadata, permissions, and entry points. Modify this when:

Adding new permissions
Changing version number
Adding new background scripts or content scripts
Updating extension description or name

background.js - Core Logic

Service worker that runs in the background. This file:

Listens for chrome.tabs.onCreated events
Queries tab counts using chrome.tabs.query()
Retrieves settings from chrome.storage.local
Closes excess tabs using chrome.tabs.remove()

Edit this file to change tab management behavior.

popup.html - User Interface

script.js - Popup Logic

style.css - Styling

CSS for popup appearance. Includes:

Custom toggle switch (flipswitch) styling
Button styles
Input field styles
Layout and spacing

Modify to change colors, sizes, or visual design.

Development Workflow

Making Changes

Create Feature Branch

git checkout -b feature/your-feature-name

Use descriptive branch names like feature/add-whitelist or fix/tab-order-bug

Make Code Changes

Edit the relevant files using your text editor

Reload Extension

Go to chrome://extensions/
Click the refresh icon on the Tab Closer card
Or use Ctrl+R (Cmd+R on Mac) in the extensions page

Test Thoroughly

See Testing Your Changes section

Testing Your Changes

Always test your changes thoroughly before submitting a PR. Extension bugs can affect user browsing experience.

Manual Testing Checklist

Popup loads correctly: Click extension icon, verify UI appears
Settings persist: Configure settings, close popup, reopen to verify values saved
Toggle works: Test ON and OFF states
Tab limit enforced: Open multiple tabs, verify oldest tabs close when limit exceeded
Minimum validation: Try setting tab limit to 1 or 0, verify alert appears
No console errors: Check DevTools console for both service worker and popup
Edge cases: Test with exactly 2 tabs, test with many tabs (50+)

Debugging the Service Worker

background.js

// Add console.log statements for debugging
chrome.tabs.onCreated.addListener(function (tab) {
    console.log('New tab created:', tab.id);
    chrome.tabs.query({}, function (tabs) {
        console.log('Total tabs:', tabs.length);
        // ... rest of logic
    });
});

To view service worker logs:

Navigate to chrome://extensions/
Click “Inspect views: service worker”
Check the Console tab

script.js

// Add console.log for debugging
function save() {
  const tabsallow = document.getElementById('tabsallow').value;
  console.log('Saving tabsallow:', tabsallow);
  // ... rest of logic
}

To view popup logs:

Open the extension popup
Right-click inside popup → Inspect
Check the Console tab

Code Style Guidelines

JavaScript Style

Naming Conventions

Use camelCase for variables and functions: tabsallow, save()
Use descriptive names: cantidadTabs is clear, ct is not
Use const for constants, let for variables that change

Code Formatting

Indent with 2 or 4 spaces (be consistent)
Add spaces around operators: if (tabs.length > cantidadTabs)
Use semicolons at end of statements
Add comments for complex logic

Error Handling

Always wrap Chrome API calls that might fail in try-catch
Log errors to console for debugging

try {
    chrome.tabs.remove(tabs[i].id, function () { });
} catch (error) {
    console.log(error);
}

HTML/CSS Style

Use semantic HTML elements
Keep inline styles minimal (use CSS classes instead)
Maintain consistent indentation
Use descriptive class names: .flipswitch not .fs

Common Development Tasks

Adding a New Setting

Add UI Element in popup.html

<input type="text" class="css-input" id="new-setting"/>

Update script.js save() function

function save() {
  const newSetting = document.getElementById('new-setting').value;
  // Add validation
  chrome.storage.local.set({ newSetting: newSetting }).then(() => {
    // ... existing code
  });
}

Update script.js load() function

function load() {
  chrome.storage.local.get('newSetting', function (result) {
    document.getElementById('new-setting').value = result.newSetting || 'default';
  });
}

Use setting in background.js

chrome.storage.local.get('newSetting', function (result) {
  const newSetting = result.newSetting;
  // Use the setting in your logic
});

Improving the Tab Closing Logic

The current implementation in background.js closes the oldest tabs (lowest indices). To change this behavior:

background.js

// Current: Close oldest tabs
for (let i = 0; i < tabs.length - cantidadTabs; i++) {
    chrome.tabs.remove(tabs[i].id, function () { });
}

// Alternative: Close newest tabs
for (let i = tabs.length - 1; i >= cantidadTabs; i--) {
    chrome.tabs.remove(tabs[i].id, function () { });
}

// Alternative: Close tabs by last accessed time
tabs.sort((a, b) => a.lastAccessed - b.lastAccessed);
for (let i = 0; i < tabs.length - cantidadTabs; i++) {
    chrome.tabs.remove(tabs[i].id, function () { });
}

Consider making the closing strategy a user-configurable option!

Refactoring Nested Callbacks

The current background.js uses nested callbacks. Consider refactoring to async/await:

background.js

// Current nested callback style
chrome.storage.local.get('fs', function (result) {
    fs = result.fs;
    chrome.storage.local.get('tabsallow', function (result) {
        cantidadTabs = result.tabsallow;
        // ... more nesting
    });
});

// Refactored with async/await
chrome.tabs.onCreated.addListener(async function (tab) {
    const tabs = await chrome.tabs.query({});
    const { fs } = await chrome.storage.local.get('fs');
    
    if (!fs) return;
    
    const { tabsallow } = await chrome.storage.local.get('tabsallow');
    
    if (tabsallow >= 2 && tabs.length > tabsallow) {
        for (let i = 0; i < tabs.length - tabsallow; i++) {
            try {
                await chrome.tabs.remove(tabs[i].id);
            } catch (error) {
                console.log(error);
            }
        }
    }
});

Chrome Extension APIs support Promises as of Chrome 88+, making async/await available.

Feature Ideas & Improvements

Looking for contribution ideas? Consider these enhancements:

Priority Improvements

Add tab whitelist feature

Allow users to whitelist certain domains that should never be closed:

Add domain input field in popup
Store whitelist in chrome.storage.local
Check tab URL before closing in background.js
Use chrome.tabs permission to access tab.url

Improve tab closing strategy

Instead of always closing oldest tabs:

Add option to close by last accessed time
Add option to close duplicates first
Add option to never close pinned tabs
Make strategy user-configurable

Internationalization (i18n)

The UI currently has Spanish text mixed with English:

Implement chrome.i18n API
Create _locales/ directory with translations
Support multiple languages
Update popup.html to use chrome.i18n.getMessage()

Statistics and reporting

Track and display tab closing statistics:

Count tabs closed per day/week
Show most commonly closed domains
Display in popup or separate page
Store in chrome.storage.local

Improved error handling

Add user-visible error messages
Handle edge cases (all pinned tabs, protected tabs)
Add retry logic for failed API calls
Log errors to storage for debugging

UI/UX Improvements

Add dark mode support
Improve toggle switch accessibility
Add keyboard shortcuts
Show preview of which tabs would be closed
Add undo functionality
Improve success message animation

Code Quality

Refactor nested callbacks to async/await
Add JSDoc comments
Create unit tests
Add ESLint configuration
Remove commented-out code
Improve variable naming (e.g., fs → isEnabled, cantidadTabs → tabLimit)

Submission Guidelines

Before Submitting a PR

Test Thoroughly

Complete the manual testing checklist above

Check for Errors

No console errors in either service worker or popup

Update Version

If appropriate, increment version in manifest.json

Clean Up Code

Remove debugging console.log statements, commented code, etc.

Write Clear Commit Messages

Use descriptive commit messages that explain the “why” not just the “what”

Pull Request Template

When opening a PR, include:

## Description
Brief description of what this PR does

## Type of Change
- [ ] Bug fix
- [ ] New feature
- [ ] Enhancement
- [ ] Documentation update

## Testing
- [ ] Tested in Chrome (version: ___)
- [ ] No console errors
- [ ] Popup loads correctly
- [ ] Settings persist
- [ ] Tab closing works as expected

## Screenshots
If UI changes, include before/after screenshots

## Additional Notes
Any other context or information

Code Review Process

After submitting:

Automated checks: Ensure any CI checks pass
Maintainer review: A project maintainer will review your code
Feedback: Address any requested changes
Approval: Once approved, your PR will be merged
Release: Changes will be included in the next release

Be patient! Maintainers review PRs in their spare time. Expect 1-7 days for initial review.

Chrome Web Store Publishing

Only project maintainers can publish to the Chrome Web Store. Contributors should focus on code contributions.

For maintainers, the publishing process:

Update Version

Increment version in manifest.json following semantic versioning

Create Release Package

Zip all extension files (excluding .git, README, etc.)

Upload to Chrome Web Store Developer Dashboard

Navigate to Chrome Web Store Developer Dashboard

Submit for Review

Google reviews extensions before publishing (usually 1-3 days)

Getting Help

If you need assistance:

Documentation: Review the Technical Architecture page
Issues: Check existing GitHub issues for similar problems
Questions: Open a GitHub issue with the “question” label
Chrome Extension Docs: Official Chrome Extension Documentation

Code of Conduct

Be respectful and inclusive
Provide constructive feedback
Focus on the code, not the person
Help others learn and grow
Follow project guidelines

License

By contributing, you agree that your contributions will be licensed under the same license as the project.

Thank you for contributing to Tab Closer! Your efforts help make the web browsing experience better for everyone.

Overview

User Guide

Development

Welcome Contributors!

Getting Started

Development Setup

Loading the Extension Locally

Development Tools

Project Structure

File Responsibilities

Development Workflow

Making Changes

Testing Your Changes

Manual Testing Checklist

Debugging the Service Worker

Code Style Guidelines

JavaScript Style

HTML/CSS Style

Common Development Tasks

Adding a New Setting

Improving the Tab Closing Logic

Refactoring Nested Callbacks

Feature Ideas & Improvements

Priority Improvements

UI/UX Improvements

Code Quality

Submission Guidelines

Before Submitting a PR

Pull Request Template

Code Review Process

Chrome Web Store Publishing

Getting Help

Code of Conduct

License

Build docs developers (and LLMs) love

Overview

User Guide

Development

Documentation Index

​Welcome Contributors!

​Getting Started

​Development Setup

​Loading the Extension Locally

​Development Tools

​Project Structure

​File Responsibilities

​Development Workflow

​Making Changes

​Testing Your Changes

​Manual Testing Checklist

​Debugging the Service Worker

​Debugging the Popup

​Code Style Guidelines

​JavaScript Style

​HTML/CSS Style

​Common Development Tasks

​Adding a New Setting

​Improving the Tab Closing Logic

​Refactoring Nested Callbacks

​Feature Ideas & Improvements

​Priority Improvements

​UI/UX Improvements

​Code Quality

​Submission Guidelines

​Before Submitting a PR

​Pull Request Template

​Code Review Process

​Chrome Web Store Publishing

​Getting Help

​Code of Conduct

​License

Build docs developers (and LLMs) love

Welcome Contributors!

Getting Started

Development Setup

Loading the Extension Locally

Development Tools

Project Structure

File Responsibilities

Development Workflow

Making Changes

Testing Your Changes

Manual Testing Checklist

Debugging the Service Worker

Debugging the Popup

Code Style Guidelines

JavaScript Style

HTML/CSS Style

Common Development Tasks

Adding a New Setting

Improving the Tab Closing Logic

Refactoring Nested Callbacks

Feature Ideas & Improvements

Priority Improvements

UI/UX Improvements

Code Quality

Submission Guidelines

Before Submitting a PR

Pull Request Template

Code Review Process

Chrome Web Store Publishing

Getting Help

Code of Conduct

License