[GrantFox] Browser Extension: One-Click Donation Injection on Any Webpage #135

Summary

Enhance the browser extension (extension/) to detect Stellar addresses on any webpage and inject an inline "Donate with IndigoPay" button next to detected addresses, enabling one-click donations without leaving the current page.

Background

The extension detects Stellar addresses and allows donation via popup. An injected button directly on the page reduces friction: see "Donate" → click → enter amount → sign. Imagine a climate project's Stellar address in a tweet or GitHub README — donate in one click.

Problem Statement

Popup-based flow requires: notice badge → click icon → select address → enter amount → sign. Injected button reduces to: see "Donate" → click → amount → sign. Dramatically lowers barrier to spontaneous donations.

Objectives

1. Build content script injecting "💚 Donate" buttons next to Stellar addresses.
2. Build inline donation form (shadow DOM isolated) opened on button click.
3. Integrate with Freighter wallet for transaction signing.
4. Show donation confirmation inline.
5. Add extension settings for configuration.

Scope

In Scope:

• extension/src/content.js: walk DOM text nodes, match G[A-Z0-9]{55}, inject button, MutationObserver for dynamic content, rate limit 2s.
• Shadow DOM donation popover: address display, amount quick-select, message field, Freighter integration, loading/success/error states.
• extension/src/background.js: handle FETCH_PROJECT_INFO, BUILD_TRANSACTION, SUBMIT_TRANSACTION messages.
• extension/settings.html: default amount, currency, auto-detect toggle, excluded domains, theme.
• Popup enhancement: recent inline donations, quick link to settings.

Out of Scope:

• Non-registered addresses (show "not a registered project"), iframes, mobile browser extension.

Acceptance Criteria

• Detects Stellar addresses on any webpage, injects "💚 Donate" button.
• Inline donation form opens anchored to address.
• Form fetches project info from backend.
• "Donate with Freighter" triggers signing.
• Success message shown inline.
• Dynamic content detected (SPA, AJAX).
• Settings allow customization.
• Excluded domains not processed.
• Shadow DOM prevents style conflicts.
• Works on Chrome and Firefox.

Testing Requirements

• Unit tests: regex, DOM injection, MutationObserver, shadow DOM.
• Integration + E2E + cross-browser tests.

CI Requirements

• cd extension && npm test, cd extension && npm run build. web-ext lint for Firefox.

Deliverables

1. extension/src/content.js, donate-form.js
2. extension/src/background.js (updated)
3. extension/src/styles/content.css
4. Updated extension/popup.html, popup.css, settings.html
5. Updated extension/manifest.json, manifest.firefox.json

Definition of Done

• Donate button appears next to Stellar addresses on any page. Full flow inline. No style leakage. Cross-browser. Submission-ready.

References

• extension/manifest.json, extension/popup.html, extension/webpack.config.js
• docs/extension-build-process.md
• frontend/lib/stellar.ts, frontend/components/DonateForm.tsx

To contribute more to the project, join our Telegram group - https://t.me/StellarIndigoPay/4