我该如何制作一个chrome打包应用程序，在启动时全屏运行？

Question

我该如何制作一个chrome打包应用程序，在启动时全屏运行？

google-chrome-app

10

目前似乎只能通过用户操作（鼠标/键盘事件）来激活全屏功能。有没有办法规避这个问题？

- Wouter Schut

6个回答

6

您可以使用HTML5全屏API，但需要用户进行操作：

button.addEventListener('click', function() {
  document.body.webkitRequestFullscreen();
});

或者更加“应用化”的方式是使用AppWindow对象，它不需要用户操作：

chrome.app.window.current().fullscreen();

两者都需要在 manifest.json 文件中获取 "fullscreen" 权限。

- mangini

2

“全屏”权限还存在吗？它在这里没有列出：https://developer.chrome.com/extensions/declare_permissions。 - B Robster

3

我已经使用以下代码使其正常工作。

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('index.html', {
    'width': 1024,
    'height': 768
},
function(win) {
    win.maximize();
});
});

- Dipesh

在manifest.json的“permissions”数组中添加“fullscreen”后，使用win.fullscreen()来实现全屏。 - Jaseem

1

main.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html',{},function(window) {
    window.fullscreen();
  });
});

manifest.json

{
  ...
  "manifest_version": 2,
  "minimum_chrome_version": "23",
  "app": {
    "background": {
      "scripts": ["main.js"]
    }
  },
  "permissions": ["fullscreen"]
}

- asissuthar

1

请查看https://plus.google.com/100132233764003563318/posts/2SuD7MVd8mG，其中提到了最近提交的变更列表https://chromiumcodereview.appspot.com/12205002。您可以从这些来源中获取示例代码：

document.body.addEventListener('click', function() {
  document.body.webkitRequestFullscreen();
});

确保在您的清单文件中请求“全屏”权限，并且您正在测试足够新的Chrome版本（beta渠道现在应该具有此功能，而dev肯定会有）。

您的问题特别涉及打包的应用程序，但是如果阅读此答案的任何人错过了这一点，则仅适用于Chrome打包应用程序。

- sowbug

这个应该在运行在Windows上的应用程序中工作吗？我无法让我的应用程序全屏。调用document.body.webkitRequestFullscreen()没有任何影响。 - Kywillis

0

编辑：根据BeardFist的评论，我的原始答案有两个错误。您可以在Chrome扩展程序上进行此操作（此标记为），但可能无法在封装的应用程序上进行。

对于扩展，您可以使用状态：“全屏”选项将其设置为全屏，该选项可通过chrome.window.update应用。以下代码将窗口的创建通过chrome.windows.create与chrome.window.update链接在一起。在我的实验中，您无法通过窗口创建直接设置全屏状态。

chrome.windows.create(
  {url:"PATH/TO/POPUP"}, 
    function(newWindow) {
        chrome.windows.update(newWindow.id, {state:"fullscreen"})
});

- smcgregor

你可以使用{state:"fullscreen"}从扩展中触发全屏，但不能从打包的应用程序中实现。事实上，您根本无法访问chrome.windows，因此这也无法起作用。 - BeardFist

谢谢，问题的标签让我认为他们在询问一个浏览器扩展。 - smcgregor

此问题不再标记为“Google Chrome 扩展程序”。 - smcgregor

1

很抱歉标签打错了（我以为这个标签两者都可以用）。还是一个不错的发现！但是很奇怪的是，似乎你能够在扩展中做的事情比打包应用程序少。也许我应该换一种方式。 - Wouter Schut

我无法确定您所考虑的媒体应用程序是否可以作为扩展实现，但我知道您可以通过引入服务器作为中介来从另一个设备触发它进入全屏模式。 - smcgregor

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Richard Cotrina · Accepted Answer

现在，你只需要在你的主要 .js 文件中添加 state:"fullscreen" 属性：

chrome.app.runtime.onLaunched.addListener(
    function() {
        chrome.app.window.create('index.html',
            {
                state: "fullscreen",
            }
        );
    }
);

请确保不要添加resizable: false或bounds属性，并在manifest.json中添加一个"fullscreen"权限。

{
    ...
    "permissions": [
        ...
        "fullscreen"
    ]
}