iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
DevToolbox discovers browser utilities from folders under src/tools/ using Vite’s import.meta.glob. Each tool exports a ToolDefinition from its index.ts; the registry gathers those definitions, checks required fields, excludes the starter template, and sorts accepted tools by name. Adding a tool therefore means adding a module in the expected shape—not adding another branch to a central router.
How the tool-module contract works
The described project organizes utilities independently in src/tools/<id>/. Each folder provides an index.ts that exports a ToolDefinition. The interface described for DevToolbox includes:
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Search+ For Google | Buy on Amazon | |
| 2 |
|
Amazon Silk - Web Browser | Buy on Amazon | |
| 3 |
|
Web Browser Engineering | $50.00 | Buy on Amazon |
| 4 |
|
Web Browser Surfer 3rd Edition (Web Surfer Series Book 1) | $0.99 | Buy on Amazon |
| 5 |
|
Downloader for Fire, Browser... | Buy on Amazon |
id,name,description, andcategory- Optional
keywords - A
mount(container)function that constructs the tool’s panel UI and may return a cleanup function
Keeping transformations in a sibling module such as logic.ts separates the work from DOM setup. Pure logic can then be tested without mounting a panel, while mount focuses on connecting that logic to the interface.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsHow Vite builds the registry
The described registry uses this pattern:
const modules = import.meta.glob('../tools/*/index.ts', { eager: true });
const tools = Object.entries(modules)
.filter(([path]) => !path.includes('/_template/'))
.map(([, mod]) => mod.default ?? mod.tool)
.filter(Boolean)
.sort((a, b) => a.name.localeCompare(b.name));Vite processes the glob during development or build and provides a map of matching module paths. This is not a browser scanning directories at runtime. The project description says its implementation also validates that a definition has an id and a mount function before accepting it. The code above illustrates the reported pattern; it is not a verification of the current repository implementation.
#1 Best Overall
- google search
- google map
- google plus
- youtube music
- youtube
Vite’s official glob-import guide documents the behavior and constraints. Patterns must be valid import specifiers, and glob arguments must be literals rather than runtime variables or expressions. Vite also notes that glob import is “a Vite-only feature and is not a web or ES standard.”
When to use eager or lazy glob imports
Vite’s default glob behavior is lazy: the map contains functions that perform dynamic imports, and matched modules can be split into build chunks. With { eager: true }, Vite generates direct imports and the map contains the imported modules instead. The practical differences are:
Rank #2
- Easily control web videos and music with Alexa or your Fire TV remote
- Watch videos from any website on the best screen in your home
- Bookmark sites and save passwords to quickly access your favorite content
| Choice | What the registry contains | Effect on loading and code | When it fits |
|---|---|---|---|
| Default, lazy glob | Functions that dynamically import matched modules | Modules load on demand and can be split into chunks; accessing a tool involves asynchronous loading | A larger catalog where deferring modules is useful |
{ eager: true } |
Imported module objects | Direct imports make registry access straightforward and synchronous, but matched modules are included in the eager import set | The small catalog described for DevToolbox, where a simple registry is the priority |
The project article favors eager loading for its small utility catalog because it avoids maintaining an asynchronous import map. It suggests considering lazy imports as the catalog grows, but gives no numerical threshold, bundle-size measurement, or performance benchmark. Choose based on loading needs and runtime simplicity rather than assuming one mode is always faster.
Recommended Free Tools
How to add a tool without editing a central switch
- Create the folder: copy
src/tools/_template/tosrc/tools/<id>/, using the new tool’s identifier for<id>. - Separate logic from UI: put transformations in pure functions, for example in
logic.ts, and add tests for those functions. - Export the definition: implement a valid
ToolDefinitioninindex.ts, including the required fields andmount(container). - Use shared project utilities where appropriate: the described app keeps shared styles and DOM helpers in
src/core/. - Run and submit the project’s checks: the article reports Vitest coverage for seed-tool logic and says CI expects tests for new tools. It reports no coverage percentage or test-run result here.
The registry pattern matches each tool’s index.ts automatically, so this workflow does not require a new entry in a central switch statement. The project article describes this contributor flow; its current repository state has not been independently verified.
Rank #3
What the browser-local processing claim means
The DevToolbox article describes the app as a static Vite site deployed to GitHub Pages, with utility inputs processed by page JavaScript rather than sent to an application backend. It names encoding, formatting, parsing, and Web Crypto hashing where available as examples of work suited to the browser. It also describes theme preference as the seed app’s only intentional client-side persistence, stored in localStorage.
That is a stated data-flow description, not a security audit or a blanket privacy guarantee. It does not establish that browser extensions, screenshots, or the network stack cannot expose data. The article’s claims describe the project as presented there; they do not independently confirm the live deployment or current code.
Quick Recap
Best Value
- Directly enter the URL of the desired file
- Store frequently visited URLs in the favorites section for easy retrieval
- Open the downloaded files in the file manager
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
