Installation

Feather is a private unpacked extension — it never goes through the Chrome Web Store. You load it directly from your files. Works the same in Chrome, Edge, Brave, and Arc.

1

Put all files in one folder

Create a folder somewhere permanent — e.g. C:\Users\you\feather\. Place all six files and the icons\ subfolder inside it. Don't move the folder after loading or the extension will break.

2

Add your credentials to background.js

Open background.js in any text editor. Fill in the three constants at the top — your webhook URL, Supabase URL, and Supabase anon key. Save the file. See Configuration for details.

3

Open Chrome Extensions

In Chrome's address bar type chrome://extensions and press Enter.

4

Enable Developer mode

In the top-right corner of the extensions page, toggle Developer mode on. The page will refresh and show new buttons.

5

Click "Load unpacked"

Click the Load unpacked button that appeared. Navigate to your feather\ folder and click Select Folder.

6

Pin the extension

Click the 🧩 puzzle-piece icon in the Chrome toolbar and pin Feather so you can always reach the popup.

7

Open Discord and verify

Navigate to discord.com/app. Within a couple of seconds the Feather overlay indicator should appear in the bottom-right corner showing watching.

Reloading after edits

Every time you change any file: go to chrome://extensions, click the ↺ refresh icon on the Feather card, then reload the Discord tab. Chrome does not auto-reload unpacked extensions.

copymkdir -p ~/.local/share/feather
cp -r /path/to/feather/* ~/.local/share/feather/

copynano ~/.local/share/feather/background.js

Configuration

Everything lives in four constants at the very top of background.js. Open the file, fill them in, save, reload the extension. That's it.

copy// ── background.js — top of file ──────────────────────────

const DISCORD_WEBHOOK_URL = "https://discord.com/api/webhooks/YOUR_ID/YOUR_TOKEN";
const SUPABASE_URL        = "https://your-project-id.supabase.co";
const SUPABASE_ANON_KEY   = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";
const SUPABASE_TABLE      = "feather_logs"; // change if you renamed your table

Both integrations are fully optional. Leave a value as the placeholder string and that integration is silently skipped — no errors. The popup's Overview tab shows live status dots so you can see what's configured.

Chrome storage keys

Feather stores runtime state in chrome.storage.local. You never manage these directly, but it's useful to know they exist:

Wipe all of this cleanly using the Full reset button in the popup Settings tab.

manifest.json — why host_permissions matter

Chrome MV3 requires outbound fetch() targets to be explicitly listed in host_permissions. Without this, requests to Supabase and Discord are silently blocked from the service worker.

copy"host_permissions": [
  "https://discord.com/*",
  "https://*.supabase.co/*"
]

Both are already in the current manifest.json. Don't remove them.

Webhook

On every detected message, Feather fires a POST to a Discord webhook URL with the author, channel, a message preview, and the running count.

Getting a webhook URL

1

Open a server you manage

You need Manage Webhooks permission on the target channel. It can be any server — a private logging server works great.

2

Open channel settings

Click the ⚙️ gear icon next to the channel name → Integrations → Webhooks → New Webhook. Name it "Feather".

3

Copy the Webhook URL

Click Copy Webhook URL. It looks like:
https://discord.com/api/webhooks/1234567890/abc123xyz...

4

Paste into background.js

Set DISCORD_WEBHOOK_URL to this value and reload the extension.

What the webhook message looks like

# feather-logs

feather webhook Today at 14:32

🔔 New Discord Message · 14:32:07
Author: username123
Channel: general
Message: hey has anyone seen the new update yet
Total count: 7

Message content is capped at 200 characters. For full content, use Supabase instead.

Testing your webhook

copycurl -X POST YOUR_WEBHOOK_URL \
  -H "Content-Type: application/json" \
  -d '{"content": "Feather test 🪶"}'

If your logging channel gets a message, the URL is correct.

Supabase

Every detected message is inserted as a row into your Supabase database — a permanent, queryable log of everything Feather has ever seen.

Step 1 — Create a project

Go to supabase.com, sign in, click New project. Give it a name, set a database password, pick a region. Free tier is more than enough — 500MB and unlimited API calls.

Step 2 — Create the table

In your project sidebar, click SQL Editor. Paste this block and click Run:

copycreate table feather_logs (
  id         bigint generated always as identity primary key,
  author     text,
  content    text,
  channel    text,
  count      integer,
  timestamp  timestamptz default now()
);

-- Enable row-level security (required to use the anon key)
alter table feather_logs enable row level security;

-- Allow the anon key to INSERT rows
create policy "Allow anon insert"
  on feather_logs for insert to anon
  with check (true);

-- Allow the anon key to SELECT rows
create policy "Allow anon select"
  on feather_logs for select to anon
  using (true);

Step 3 — Get your credentials

In your project sidebar go to Project Settings → API:

Step 4 — Paste into background.js

copyconst SUPABASE_URL      = "https://abcdefgh.supabase.co";
const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...";
const SUPABASE_TABLE    = "feather_logs";

Step 5 — Verify it's working

Trigger a detection, then go to Table Editor → feather_logs in Supabase. A new row should appear within one second.

Useful queries

copy-- All messages, newest first
select timestamp, author, channel, content
from feather_logs
order by timestamp desc;

-- Messages per author (leaderboard)
select author, count(*) as total
from feather_logs
group by author
order by total desc;

-- Last 24 hours only
select * from feather_logs
where timestamp > now() - interval '24 hours'
order by timestamp desc;

-- Search by author
select * from feather_logs
where author ilike '%username%'
order by timestamp desc;

Popup UI

Click the Feather icon in the Chrome toolbar to open the popup. Three tabs — Overview, Log, and Settings — all updating live as messages come in.

Overview tab

Log tab

Shows the last 50 detected messages in reverse chronological order from feather_recent. Each entry shows author (green mono), channel (blue pill), time (HH:MM), and message preview up to 200 characters.

Clear all wipes the local log. This does not delete rows from Supabase.

Settings tab

Detection Logic

How Feather identifies real messages, suppresses false triggers, deduplicates, and extracts author and channel metadata — all without touching the Discord API.

Identifying a message node

Feather runs a MutationObserver on document.body with { childList: true, subtree: true }. Every added node is checked against three criteria:

Channel switch suppression

When you switch channels, Discord bulk-inserts ~50 historical messages. Feather uses two independent layers:

If you're in an extremely active channel you can increase BURST_LIMIT in content.js:

copy// content.js — near the top
const BURST_LIMIT  = 5;    // raise if false suppressions happen
const NAV_COOLDOWN = 2000; // ms to ignore after URL change

Deduplication

Discord uses optimistic rendering — your message appears instantly, then gets replaced with the server-confirmed version. Feather maintains a Set of seen data-list-item-id values, capped at 500 entries, and skips data-is-local-message="true" nodes entirely.

Author extraction

Discord groups consecutive messages — only the first shows a username header. Feather handles this by first looking for [class*="username_"] within the node, then walking backwards through previous messages to find the most recent username header above it, falling back to "unknown".

Channel name extraction

document.querySelector('h3[class*="title_"]')
  || document.querySelector('[class*="channelName_"]')
  || document.querySelector('h1[class*="title_"]')

Each tab tracks its own channel independently.

Shortcuts

One keyboard shortcut. Works anywhere on discord.com as long as the Discord tab is focused.

Troubleshooting

Most issues come down to one of five things. Work through each checklist below.

Overlay doesn't appear on Discord

Popup toggle / reset does nothing

Webhook messages not arriving

Supabase rows not appearing

Channel switches still trigger false detections

Messages being double-counted

Opening the background service worker DevTools