Web TippsUse custom web fonts in Google Sheets charts(08.09.2026 um 17:05 Uhr)
Web TippsIntroducing the new 1Password App for Google Chat(08.09.2026 um 18:02 Uhr)
Web TippsUse custom web fonts in Google Sheets charts(08.09.2026 um 17:05 Uhr)
Web TippsIntroducing the new 1Password App for Google Chat(08.09.2026 um 18:02 Uhr)

🔧 Programmierung 🕛 vor 3 Monaten 4 Min Lesezeit
0

I Built a Browser Extension to Intercept HTTP Requests – Here's What I Learned about Manifest V3

↗ Quelle (dev.to)
🗣️ Stimme:
📑 Inhaltsübersicht

I recently launched






Technical Architecture






Manifest V3 Migration



Chrome deprecated Manifest V2, so I had to build with V3 from the start. Key differences:



Service Workers instead of Background Pages:




CODE
// Old way (MV2)
chrome.runtime.onInstalled.addListener(() => {
// Background page code
});

// New way (MV3)
self.addEventListener('install', (event) => {
// Service worker code
});






declarativeNetRequest instead of webRequest:

The biggest change. Instead of intercepting requests programmatically, you define rules declaratively:




CODE
chrome.declarativeNetRequest.updateDynamicRules({
addRules: [{
id: 1,
priority: 1,
action: {
type: "redirect",
redirect: { url: "https://new-url.com" }
},
condition: {
urlFilter: "*://old-url.com/*",
resourceTypes: ["main_frame"]
}
}]
});









Tech Stack





  • Extension: Manifest V3, declarativeNetRequest API, Content Scripts


  • Website: React 18 + Vite 5 + Tailwind CSS 3


  • Backend: Firebase Auth + Firestore


  • Hosting: Vercel


  • Payment: Paddle (for premium plans)






Architecture Decisions



Why Content Scripts for Response Modification?



The declarativeNetRequest API can't modify response bodies. I had to use content scripts with fetch interception:




CODE
// Injected into page context
const originalFetch = window.fetch;
window.fetch = async (...args) => {
const response = await originalFetch(...args);

// Apply user-defined rules
if (shouldModifyResponse(response.url)) {
return modifyResponse(response);
}

return response;
};






Why Firebase?




  • Built-in authentication (Google + Email/Password)

  • Real-time sync across devices

  • Simple pricing model

  • Quick to implement



Why Paddle for Payments?




  • Handles VAT/tax compliance globally

  • Great developer experience

  • Transparent pricing

  • Good documentation






The Chrome Review Process



Timeline:




  • Submitted: April 10, 2026

  • Published: May 7, 2026

  • Total time: 27 days



Why so long?



Extensions requesting sensitive permissions (like declarativeNetRequest and webRequest) go through extended review.



Tips for passing review:




  1. ✅ Clear privacy policy explaining what permissions you need and why

  2. ✅ Detailed description of all features

  3. ✅ Screenshots showing the extension in action

  4. ✅ Video demo if functionality is complex

  5. ✅ Responsive support email

  6. ✅ Justify every permission in your manifest



Firefox was faster:




  • Submitted: Similar time

  • Approved: 3 days

  • Firefox reviewers are generally faster for legitimate developer tools






Lessons Learned






1. Start with Manifest V3



Don't build with MV2 thinking you'll migrate later. The architectural differences are significant.






2. Plan for Cross-Browser Support



Firefox supports most MV3 features but has differences:




  • Different resource type names

  • Different permission names

  • Different API behaviors



I spent time abstracting these differences into a compatibility layer.






3. Security is Critical



Extensions with network permissions are security-sensitive. I:




  • ✅ Store rules locally, not in cloud

  • ✅ Don't track user requests

  • ✅ Use Firebase Auth for secure user management

  • ✅ Exclude sensitive domains (banking, payment, etc.)






4. The Review Process Takes Time



Budget 2-4 weeks for Chrome review if you're using sensitive permissions. Don't rush your launch date.






5. Users Want Simplicity



Early users loved the "it just works" aspect. Complex enterprise features can come later.






Monetization Strategy



Free Tier:




  • 5 rules (3 active at a time)

  • Basic rule types

  • 5 AI requests/day

  • Perfect for casual users



Premium ($4.99/month):




  • Unlimited rules

  • All advanced features

  • 50 AI requests/day

  • Priority support



Why this works:




  • Free tier is genuinely useful (not a trial)

  • Premium unlocks real value

  • Price point is low enough for individual developers

  • Monthly billing reduces friction






Launch Offer



🎁 Code LAUNCH2026 gives first 100 users 6 months FREE premium (no credit card required)



This helps with:




  • Early adoption

  • Getting feedback from power users

  • Building social proof

  • Getting store ratings/reviews






Results So Far



(Update this section as you get data)




  • Downloads: [TBD]

  • Active users: [TBD]

  • Premium conversions: [TBD]

  • Store rating: [TBD]






What's Next



Planned features:




  • Import/export rules

  • Rule templates library

  • Team collaboration

  • More AI-powered features

  • API for programmatic control






Try It Out





If you find it useful, please leave a rating! ⭐






Questions?



Drop them in the comments! Happy to discuss:




  • Manifest V3 development

  • Chrome/Firefox review process

  • Monetization strategies

  • Technical implementation details






Building in public. Follow my journey!

Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
↗ Original-Artikel auf dev.to lesen
Wie bewertest du diesen Beitrag?
1 Klick Feedback
Teilen mit Netzwerk & Team:

Community-Analysen & Experten-Meinungen 0

Verfasse deine eigene Analyse, teile Workarounds oder diskutiere diesen Vorfall im Blog.
Noch keine Community-Analyse verfasst. Markiere einen Textabschnitt oder klicke oben auf Eigene Analyse verfassen“!
Community Pulse: Relevanz-Einschätzung
1 Klick Experten-Votum
🔴 Akute Relevanz 0%
🟡 In Evaluierung 0%
🟢 Keine Auswirkung 0%
Spannende Innovation 0%
Verwandte Story-Cluster & Quellen (Vektor-KI)
Port 8095 Engine
3 Quellen
Use custom web fonts in Google Sheets charts
2 Quellen
Introducing the new 1Password App for Google Chat
1 Quelle
Context-aware access controls are available for Gemini Enterprise in the Admin console
Ähnliche Beiträge
🔍 Verwandte News

Auch interessante Nachrichten I Built a Browser Extension to Intercept HTTP Requests – Here's What I Learned about Manifest V3

Thematisch verwandte Begriffe: Built, Browser, Extension, Intercept · 6 Treffer

Laden...

Videos werden geladen ...

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...

Laden...

Beiträge werden geladen ...

Laden...

Videos werden geladen ...