Vue开发Chrome扩展：如何强制弹窗在页面点击时保持常驻？

Hey there! I’ve dealt with this exact frustration before while building Vue-powered Chrome extensions—Chrome’s default popup behavior of closing when you click away is super annoying when you need a persistent UI. Let’s break down the solutions, since you can’t directly override the browser’s built-in popup focus rule.

Recommended Solution: Use Chrome Side Panel #

Chrome’s Side Panel is designed specifically for persistent extension UIs that stay open even when interacting with the main page. It’s the cleanest, most official approach:

1. Update your manifest.json (make sure you’re using Manifest V3, which is required for Side Panel):

{
  "manifest_version": 3,
  "name": "Your Vue Extension",
  "version": "1.0",
  "side_panel": {
    "default_path": "dist/index.html" // Point to your Vue app's built entry
  },
  "permissions": ["sidePanel"],
  "action": {
    "default_title": "Open My Extension Side Panel"
  }
}

2. Test it out: When users click your extension icon, the Side Panel will slide open on the side of the browser, and it won’t close when they click anywhere on the main page. You can even let users pin it permanently if needed.

Alternative: Open a Standalone Browser Window #

If you prefer a floating window instead of a side panel, you can use Chrome’s Windows API to spawn a persistent window from a background service worker:

1. Update manifest.json:

{
  "manifest_version": 3,
  "name": "Your Vue Extension",
  "version": "1.0",
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["windows"],
  // Remove any existing "action.default_popup" entry!
  "action": {
    "default_title": "Open My Extension Window"
  }
}

2. Create background.js to handle opening the window:

chrome.action.onClicked.addListener(() => {
  chrome.windows.create({
    url: chrome.runtime.getURL("dist/index.html"),
    type: "popup",
    width: 400,
    height: 600,
    focused: true
  });
});

This window will act like a regular browser window and won’t close when you click the main page.

Not Recommended: Hacky Focus Retention #

You could try forcing the popup to retain focus when it blurs, but this is a fragile hack that can create bad user experiences (e.g., the popup might fight the user when they try to close it). If you still want to test it, add this to your Vue component’s mounted hook:

mounted() {
  window.addEventListener('blur', () => {
    // Delay focus to avoid browser focus restrictions
    setTimeout(() => window.focus(), 10);
  });
}

Again, I don’t suggest using this long-term—stick to the official solutions above.

内容的提问来源于stack exchange，提问作者Paul