LinkStart

🔗 LinkStart -- Browser Extension for Grouped Website Launching

Long-Form Project Summary for KNWS Showcase

LinkStart is a published browser extension for Firefox and Safari (with Chrome compatibility) that lets users launch groups of websites with a single click and optionally run per-site JavaScript automation scripts to handle login flows, startup routines, and repetitive navigation tasks automatically. Instead of manually opening tabs and typing credentials every morning, LinkStart opens all your daily sites at once and logs you in.

The extension is published on the Firefox Add-ons store and includes a Safari build converted via Xcode. It uses the WebExtensions API (Manifest V2) and includes a set of helper functions -- waitForElement(), fillInput(), clickElement(), waitForNavigation() -- that make writing per-site automation scripts straightforward even for non-developers.

Published: Firefox Add-ons GitHub: github.com/datagram1/linkstart Licence: GPL-3.0

---

🚀 Project Goals

1. Launch groups of websites with a single click from the browser toolbar.
2. Run per-site JavaScript automation -- auto-login, form filling, navigation sequences, and startup routines.
3. Provide helper functions that simplify common automation tasks without requiring deep DOM knowledge.
4. Support multiple browsers -- Firefox (primary), Safari (via Xcode conversion), and Chrome (Manifest V2 compatible).
5. Publish to official extension stores -- available on the Firefox Add-ons marketplace.
6. Keep the extension lightweight -- minimal permissions, fast popup UI, no background telemetry.
7. Open source the project under GPL-3.0 for community use and contribution.

---

🧠 Core Features

1. Website Groups

Organise sites into named launch groups:

• Create multiple groups (e.g., "Morning Routine", "Work Tools", "Social Media", "Finance")
• Each group contains an ordered list of URLs
• One-click launches all URLs in the group as new tabs
• Groups can be edited, reordered, and deleted from the popup interface
• Groups persist across browser sessions using extension storage

---

2. Per-Site JavaScript Automation Scripts

The signature feature -- attach custom JavaScript to individual URLs within a group:

• Scripts execute automatically when the tab finishes loading
• Common use cases:
  • Auto-login -- fill username and password fields, click the submit button
  • Cookie/banner dismissal -- automatically close consent popups
  • Navigation -- click through to a specific dashboard or page after login
  • Form pre-fill -- populate search fields, filters, or preferences
  • UI customisation -- hide distracting elements, expand collapsed sections
• Scripts run in the page context via content script injection
• Each URL in a group can have its own independent script

---

3. Automation Helper Functions

A built-in library of helper functions available to all automation scripts:

• waitForElement(selector, timeout) -- polls the DOM until an element matching the CSS selector appears, with configurable timeout. Essential for pages that load content dynamically via JavaScript
• fillInput(selector, value) -- finds an input element and sets its value, triggering appropriate change and input events so frameworks (React, Angular, Vue) recognise the change
• clickElement(selector) -- locates and clicks an element, handling cases where the element might be partially hidden or behind an overlay
• waitForNavigation() -- returns a promise that resolves when the page completes a navigation, useful for waiting after a form submission or link click

These helpers abstract away common pain points in browser automation -- waiting for dynamic content, triggering framework-aware input events, and handling asynchronous page transitions.

---

4. Popup Interface

The browser toolbar popup provides:

• List of all configured groups with launch buttons
• Quick-access icons for editing, deleting, and reordering groups
• Add new group and add URL forms
• Script editor for per-site automation code
• Settings panel for global preferences
• Compact, fast-loading design suitable for the browser popup constraint (limited dimensions)

---

5. Multi-Browser Support

Cross-browser compatibility:

• Firefox -- primary target, published on addons.mozilla.org, uses WebExtensions API (Manifest V2)
• Safari -- converted from the Firefox extension using Xcode's Safari Web Extension converter. Requires the companion macOS app wrapper as per Apple's extension requirements
• Chrome -- compatible with Manifest V2 (can be loaded unpacked or published to Chrome Web Store)
• All browsers share the same core JavaScript codebase
• Browser-specific differences (storage API, permission model) are handled via a thin compatibility layer

---

6. Extension Architecture

Clean separation of concerns:

• Background script -- manages group storage, handles toolbar icon clicks, orchestrates tab creation and script injection
• Popup UI -- HTML/CSS/JS interface rendered in the toolbar popup for group management
• Content scripts -- injected into target pages to execute per-site automation
• Helper library -- shared JavaScript module providing waitForElement(), fillInput(), clickElement(), waitForNavigation()
• Storage -- browser extension storage API (browser.storage.local) for persistent group and script data

---

🛠 Technical Architecture

Core Technologies

• Language: JavaScript (ES6)
• API: WebExtensions API (Manifest V2)
• UI: HTML5 + CSS3 for popup interface
• Build Tools:
  • web-ext -- Mozilla's CLI tool for building, linting, and packaging Firefox extensions
  • Xcode -- Apple's IDE for converting and signing the Safari version
• Storage: browser.storage.local for group and script persistence
• Permissions: Minimal -- tabs, storage, activeTab, and host permissions only for configured URLs

Project Structure

• manifest.json -- extension manifest defining permissions, scripts, and popup
• background.js -- service worker / background script handling group launches and script injection
• popup/ -- HTML, CSS, and JS for the toolbar popup interface
• content/ -- content scripts and helper function library
• helpers.js -- waitForElement(), fillInput(), clickElement(), waitForNavigation()
• icons/ -- extension icons at multiple resolutions
• safari/ -- Xcode project for Safari conversion

Build & Publish Pipeline

1. Develop and test using web-ext run for live-reloading in Firefox
2. Lint using web-ext lint to catch manifest and API issues
3. Build using web-ext build to create the .xpi package
4. Submit to addons.mozilla.org for review and publication
5. Safari conversion via Xcode's "Convert Web Extension" tool, then submit to App Store (or distribute directly)
6. Chrome -- load the same source as an unpacked extension or package as .crx

---

🔧 Use Case Examples

Morning Work Routine:

• Group: "Start of Day"
• URLs: Gmail, Jira, Slack, GitHub, internal dashboard
• Scripts: Auto-login to Jira (fill credentials, click submit), dismiss Slack's notification prompt, navigate GitHub to the team's PR page

Finance Check:

• Group: "Finance"
• URLs: Bank portal, accounting software, invoice tracker
• Scripts: Auto-login to bank, navigate to recent transactions, dismiss cookie banners on all sites

Development Environment:

• Group: "Dev"
• URLs: localhost:3000, database admin panel, CI/CD dashboard, documentation
• Scripts: None needed for localhost, auto-login to CI, expand the current pipeline view

---

📈 Outcome & Impact

LinkStart demonstrates:

• Browser extension development -- published, publicly available extension on the Firefox Add-ons store
• Cross-browser engineering -- single codebase supporting Firefox, Chrome, and Safari
• WebExtensions API expertise -- background scripts, content scripts, popup UI, storage API, and tab management
• JavaScript automation -- practical DOM manipulation with framework-aware input handling
• Developer tooling -- web-ext CLI for build, lint, and test workflows
• Safari conversion -- Xcode-based conversion from WebExtension to Safari App Extension
• Open source contribution -- GPL-3.0 licensed and publicly available on GitHub
• Real-world utility -- solves a genuine daily productivity problem for users who open the same sites every day

The extension is a compact but complete demonstration of browser extension architecture, cross-browser compatibility, and practical JavaScript automation.

---