64 lines
2.2 KiB
Markdown
64 lines
2.2 KiB
Markdown
# Empty Link Fixer
|
|
|
|
A Chrome extension (Manifest V3) that automatically fixes empty `<a>` tags on a
|
|
website you configure at build time — links with an `href` but no visible
|
|
content get the href inserted as their text:
|
|
|
|
```html
|
|
<!-- before -->
|
|
<a href="/docs/api"></a>
|
|
|
|
<!-- after -->
|
|
<a href="/docs/api">/docs/api</a>
|
|
```
|
|
|
|
It also works on **dynamically rendered sites** (SPAs, virtual DOM, infinite
|
|
scroll, web components): a content script watches the live DOM and fills empty
|
|
links as soon as they appear.
|
|
|
|
## Install
|
|
|
|
1. Open `chrome://extensions`, enable **Developer mode**.
|
|
2. Click **Load unpacked** and select this directory.
|
|
3. Visit the configured site — empty links are filled automatically.
|
|
|
|
## Configuration
|
|
|
|
Edit **`config.js`** before loading the extension (no runtime UI), then reload
|
|
the extension in `chrome://extensions`:
|
|
|
|
```js
|
|
globalThis.LINK_FIX_CONFIG = {
|
|
hosts: ["example.com"], // website(s), matched against location.hostname
|
|
includeSubdomains: true, // also www., docs., app. example.com
|
|
rescanIntervalMs: 3000, // safety-net re-scan; 0 disables it
|
|
debug: false, // verbose console logging
|
|
};
|
|
```
|
|
|
|
`hosts: ["*"]` fixes every site (debugging only). For local testing, serve a
|
|
page over HTTP and set `hosts: ["localhost"]` (hostname only — the port is
|
|
ignored).
|
|
|
|
## How it works
|
|
|
|
1. **Initial pass** — empty anchors already on the page are fixed at startup.
|
|
2. **`MutationObserver`** over the whole document reacts to nodes added/removed,
|
|
text emptied in place, and `href` attributes appearing later.
|
|
3. **Open shadow roots** (web components) are watched recursively.
|
|
4. **Periodic re-scan** catches changes with no observable DOM mutation.
|
|
|
|
An anchor is touched only if it has a real `href` (not `#` or
|
|
`javascript:`/`data:`/`vbscript:`), no visible text, and no media content
|
|
(`img`, `svg`, `canvas`, …). Links with text or icons are left alone, as are
|
|
`contenteditable` regions.
|
|
|
|
## Layout
|
|
|
|
```
|
|
manifest.json MV3 declaration (injects the content script on all sites)
|
|
config.js site configuration — the only file you normally edit
|
|
content.js the fixer (initial scan + MutationObserver + shadow DOM)
|
|
tests/smoke.mjs smoke test: npm install --no-save jsdom && node tests/smoke.mjs
|
|
```
|