Chrome Proxy Plugin for Efficient Micro‑Frontend Development

The article describes the efficiency problems faced by the front‑end team when developing micro‑frontend applications at DeWu, especially the need to start both a base (parent) app and a child app locally, which leads to higher development cost and frequent full‑page reloads.

Key pain points include:

Launching two local services for a single feature.

HMR (Hot Module Replacement) often degrades to a full reload because the child app’s update probes are intercepted by the parent app.

Additional code adaptation required in the base app for environment switching.

Technical research explored three alternatives:

Shared communication : a shared state pool exposed to child apps, but it adds complexity and does not fully isolate the child.

Mock parent environment : a mock component that simulates the parent layout, permissions and user data, allowing the child to run independently.

Chrome proxy plugin : intercept HTTP requests and map online micro‑app URLs to local development servers, eliminating the need to start the parent app.

The chosen solution is a Chrome extension that provides flexible mapping rules, persistent storage, one‑click activation, and real‑time status display. The extension consists of two modules:

Proxy : uses chrome.webRequest.onBeforeRequest to rewrite URLs based on user‑defined rules.

Popup : UI for configuring rules, toggling the proxy, and showing status.

Key implementation snippets (kept intact):

{
  "permissions": [
    "webRequest",
    "storage",
    "activeTab",
    "background",
    "webRequestBlocking",
    "
"
  ],
  "content_security_policy": "script-src 'self' https://cdn.xxxxx.com; object-src 'self'",
  "content_scripts": [{
    "matches": ["*://*.xxxxxxx.net/*"],
    "js": ["contentScript.bundle.js"]
  }]
}

Background script example:

class Background {
  constructor() {
    this.replaceRules = []
  }
  getRequest(details) {
    if (!details) return false
    const {url} = details
    const returnObj = {}
    if (this.replaceRules.length) {
      this.replaceRules.map(item => {
        if (url.includes(item.from)) {
          this.setBadgeInfo(true)
          returnObj.redirectUrl = url.replace(item.from, item.to)
          // cache the rule state
          chrome.storage.sync.get(null, data => {
            if (data.messageProxyingData) {
              const merged = Object.assign(data.messageProxyingData, {[item.key]: true})
              chrome.storage.sync.set({messageProxyingData: merged})
            } else {
              chrome.storage.sync.set({messageProxyingData: {[item.key]: true}})
            }
          })
        }
      })
    }
    return returnObj
  }
}

Popup UI dynamically loads popup.js from a CDN, which in turn loads proxy.js to apply the mapping rules. The manifest for Manifest V2 and V3 is provided, highlighting the CSP differences.

Results: after deployment, the plugin achieved 100 % coverage of DeWu’s micro‑frontend projects, reduced the need to start two services, and restored HMR speed to be comparable with non‑micro‑frontend projects. User feedback confirmed improved development experience.

Future improvements may include automatic service health checks and more intelligent rule management.