BetterWeb ブラウザ拡張機能

bewrt

BetterWeb

GitHub

Home Features Architecture Store License

Open Source — v1.0.0

BetterWeb

Advanced Browser Intelligence

by leon.cgn.lx @leon.cgn.lx

G Google

G Google D DuckDuckGo Y Yahoo

Import BetterWeb Project View Architecture

0 Core Features

V3 Manifest

MIT License

0 Open Source

Features

Built for power users

Four core modules — galaxy UI, media inspection, element overlay, and remote extensions

Galaxy New Tab

Premium animated starfield with parallax, shooting stars, nebula overlays. Glassmorphism search bar with multi-engine dropdown. 4K optimized.

Starfield Canvas Parallax Glassmorphism 4K Ready

Media Source Inspector

Detect all <video> and <audio> elements. Live dashboard shows currentSrc, duration, currentTime, paused state, playbackRate, readyState, networkState, MIME type. Updates every second.

VIDEO #1

StatusPlaying

Duration12:34

Resolution1920 × 1080

MIMEvideo/mp4

ShowMode Developer Overlay

Hover to inspect any element. Floating tooltip shows tag, id, classes, dimensions, position, z-index, inline attributes, and tracked event listeners. Monitors dynamically injected scripts.

<div#main.container.flex>

Size1200 × 800px

Positionrelative (0, 120)

z-index10

role="main" click scroll

Remote Extension Installer

GitHub-powered registry. Fetch extensions from raw.githubusercontent.com. Permission modal with privacy policy and accept flow. IIFE-sandboxed execution. Enable/disable toggle per extension.

GitHub Registry Sandboxed IIFE chrome.storage Permission Modal

Architecture

Project Structure

Complete Manifest V3 extension with modular architecture

Manifest V3 Configuration

Chrome's latest extension standard with scoped permissions:

manifest.json

{
  "manifest_version": 3,
  "name": "BetterWeb",
  "permissions": [
    "storage",
    "scripting",
    "activeTab"
  ],
  "host_permissions": [
    "<all_urls>",
    "https://raw.githubusercontent.com/Heybrono/*"
  ],
  "chrome_url_overrides": {
    "newtab": "extension/newtab.html"
  }
}

Full Project Structure

Modular file layout under github.com/Heybrono/BetterWeb:

BetterWeb/

📁 website/
   ├── index.html          ← Landing page
   ├── styles.css
   └── main.js
📁 extension/
   ├── manifest.json       ← Manifest V3
   ├── background.js       ← Service worker
   ├── content-bridge.js   ← Media + ShowMode
   ├── newtab.html          ← New tab UI
   ├── newtab.css
   ├── newtab.js
   ├── registry.js         ← Store fetcher
   ├── installer.js        ← Install logic
   └── storage.js          ← Persistence
📁 store/
   └── extensions.json     ← Registry manifest
📄 README.md
📄 LICENSE

Load the Extension

Load BetterWeb as an unpacked extension in Chrome Developer Mode:

1Open chrome://extensions

2Enable Developer mode (toggle top-right)

3Click Load unpacked

4Select the /extension folder from the repo

5Open a new tab — BetterWeb is live!

Extension Store Registry

On startup, BetterWeb fetches extensions from a separate GitHub repository:

github.com/Heybrono/BetterWeb-Store

Fetch URL

https://raw.githubusercontent.com/
  Heybrono/BetterWeb-Store/
  main/extensions.json

extensions.json Template

Each extension entry requires an id, metadata, and raw GitHub entry URL:

extensions.json

{
  "extensions": [
    {
      "id": "example-app",
      "name": "Example App",
      "publisher": "BetterWeb Store",
      "version": "1.0.0",
      "description": "Example extension.",
      "privacy": "No data stored.",
      "permissions": ["storage"],
      "entry": "https://raw.githubusercontent.com/
  Heybrono/BetterWeb-Store/main/
  extensions/example-app/main.js"
    }
  ]
}

Security

All remote JS is wrapped in a scoped IIFE — (function(){'use strict'; ...})(); — no global namespace pollution. Scripts are size-limited to 500KB. Stored in chrome.storage.local.

Content Script Architecture

A single content bridge (content-bridge.js) handles both Media Inspector and ShowMode:

content-bridge.js — Message Router

chrome.runtime.onMessage.addListener((msg) => {
  if (msg.action === 'toggleMediaInspector')
    toggleMediaInspector(msg.enabled);
  if (msg.action === 'toggleShowMode')
    toggleShowMode(msg.enabled);
});

// Media: scans <video> <audio> every 1s
// ShowMode: hooks mousemove + addEventListener

Store

Extension Registry

Preview the community extension store

Registry URL

Fetch

Fetching extensions...

No Extensions Found

Create the store repo at github.com/Heybrono/BetterWeb-Store

License

MIT License

Free and open source — use, modify, distribute

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.

Commercial use

Modification

Distribution

Private use

Liability

Warranty

Import BetterWeb Project

GitHub Repository

The BetterWeb project is hosted on GitHub under the Heybrono organization. Create or fork the repository to get started.

Target Repository

First time?

If this repository doesn't exist yet, click below to create it. Then come back to continue the setup.

Create Repository on GitHub

Project Structure

Your repository should contain this file structure with the extension, website, and store directories:

BetterWeb/

📁 website/
   ├── index.html
   ├── styles.css
   └── main.js
📁 extension/
   ├── manifest.json
   ├── background.js
   ├── content-bridge.js
   ├── newtab.html / .css / .js
   ├── registry.js
   ├── installer.js
   └── storage.js
📁 store/
   └── extensions.json
📄 README.md
📄 LICENSE (MIT)

Website Extension (MV3) Store Registry MIT License

Back Next

README.md Preview

Add this README to your repository root:

🌌 BetterWeb

Advanced Browser Intelligence
by leon.cgn.lx · @leon.cgn.lx

Overview

BetterWeb is a Chrome extension (Manifest V3) with a galaxy-themed new tab, media source inspector, ShowMode developer overlay, and a GitHub-powered remote extension store.

Features

• Galaxy New Tab — Animated starfield, glassmorphism search
• Media Inspector — Detect video/audio, live playback stats
• ShowMode — Hover inspect elements, event listeners, scripts
• Extension Store — GitHub-hosted registry with IIFE sandboxing

Load Extension

Open chrome://extensions
Enable Developer mode
Click Load unpacked
Select the /extension folder

Extension Store

Create a separate repo: github.com/Heybrono/BetterWeb-Store

Registry URL:
https://raw.githubusercontent.com/Heybrono/BetterWeb-Store/main/extensions.json

Security

All remote JS wrapped in scoped IIFE. 500KB size limit. No global pollution. Stored in chrome.storage.local.

License

Copy README.md

Back Open on GitHub

Extension

Publisher—

Version—

—

Privacy

—

Permissions

I understand the permissions and accept

Cancel Install Extension