Chrome应用浮动嵌入iframe：app.window.alwaysOnTop权限问题咨询

Hey there! Let's work through the issues you're facing with your Chrome Packaged App, and cover all the tweaks you need to get that floating iframe up and running smoothly.

1. Clean Up Your Manifest Permissions #

First off, some of the permissions you've added aren't valid for Chrome Packaged Apps, which is likely contributing to the error:

• window.app.alwaysOnTop isn't a real permission—window "always on top" behavior is controlled via window creation options, not manifest permissions.
• tabs permission is unnecessary unless your app needs to interact with browser tabs (Chrome Packaged Apps run in isolated windows, so this is probably redundant).
• alwaysOnTop isn't a standalone permission either.

Updated Permissions List #

Based on your goal (floating window + embedded content), here's what you actually need:

"permissions": [
  "webview" // Required if you're loading external domains (use <webview> instead of plain iframe)
]

2. Configure Content Security Policy (CSP) #

Chrome Packaged Apps have strict default CSP rules that block most external content. You'll need to adjust this in your manifest.json to allow iframes/webviews:

• If you're loading same-origin content (files within your app), add frame-src 'self' to your CSP.
• If you're loading external domains, add the specific domains to frame-src (or use <webview> which has its own sandboxing).

Example CSP configuration:

"content_security_policy": "default-src 'self'; frame-src 'self' https://your-target-domain.com;"

3. Fix Window Creation Parameters #

The error mentioning chrome.app.window.(permission).create is probably pointing you to window options, not permissions. To make your window floating/always-on-top, set the alwaysOnTop flag directly in the chrome.app.window.create call—no extra permission needed.

Example background script code:

chrome.app.runtime.onLaunched.addListener(() => {
  chrome.app.window.create('your-window.html', {
    id: 'floating-iframe-window',
    bounds: { width: 700, height: 500 },
    alwaysOnTop: true, // This enables the floating/topmost behavior
    frame: 'none' // Optional: use this for a borderless floating window
  });
});

4. Embedding Content: Iframe vs WebView #

This is critical—Chrome Packaged Apps restrict plain iframes to same-origin content only. Here's what to do:

• Same-origin content: A plain <iframe> works fine, as long as your CSP allows it. Example:

  <iframe src="./local-content.html" style="width:100%; height:100%; border:none;"></iframe>
  

• External domains: You must use the <webview> tag (and include the webview permission in your manifest). Example:

  <webview src="https://example.com" style="width:100%; height:100%;"></webview>
  

  WebViews are sandboxed and designed for loading external content in Chrome Apps, so they avoid the CSP restrictions that apply to plain iframes.

5. Verify Manifest Structure #

Double-check your manifest.json is formatted correctly for Chrome Packaged Apps (note: Chrome Apps require manifest v2, as v3 doesn't support them):

{
  "manifest_version": 2,
  "name": "Floating Iframe App",
  "version": "1.0",
  "permissions": ["webview"],
  "content_security_policy": "default-src 'self'; frame-src 'self' https://example.com;",
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

That should cover all the adjustments you need to fix the permission error and get your floating iframe app working properly!

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