Chrome 扩展程序 - 进入全屏模式会将页面背景颜色变为黑色答案

【问题标题】：Chrome Extension - Entering in FullScreen Mode turns the page background color to blackChrome 扩展程序 - 进入全屏模式会将页面背景颜色变为黑色
【发布时间】：2018-01-02 20:16:18
【问题描述】：

我正在创建一个 Chrome 扩展程序，允许用户全屏查看任何网页：

manifest.json

{
   "manifest_version": 2,
   "name": "...",
   "version": "1.0",
   "description": "...",
   "background": {
    "scripts": ["jf.js"]
   },
   "browser_action": {
    "default_icon": "icon.png",
    "default_title": "..."
   },
   "author": "..." ,
   "file_system_provider_capabilities":
  {
    "configurable": false
  },
   "incognito": "spanning",
   "offline_enabled": true,
   "permissions": [
     "tabs",
     "activeTab"
   ],
   "short_name": "..."
}

jf.js

chrome.browserAction.onClicked.addListener(function(tab) {
  chrome.tabs.insertCSS(null, {file: "jf.css"});
  chrome.tabs.executeScript({
    code: 'document.body.webkitRequestFullscreen()'
 });
});

jf.css

body:-webkit-full-screen {
 width: 100%;
 height: 100%;
 overflow: scroll;
}

它工作正常，但是当页面通过扩展程序进入全屏模式时，同一页面的背景颜色变为黑色，我该如何解决？

我使用了https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API 中描述的 FullScreen API 来执行此扩展。

谢谢！

【问题讨论】：

标签： javascript css google-chrome google-chrome-extension fullscreen

【解决方案1】：

我找到了将“document.body.webkitRequestFullscreen()”切换为“document.documentElement.webkitRequestFullscreen()”所需的解决方案，现在它可以工作了。

谢谢！

【讨论】：

【解决方案2】：

这可能只是 Google 的一个错误。您可以尝试将背景颜色设置为之前的颜色。

【讨论】：

我想了想，我什至写了代码，但它不起作用，所以我认为这是一个你说的错误。但我找到了将“document.body.webkitRequestFullscreen()”切换为“document.documentElement.webkitRequestFullscreen()”所需的解决方案，现在它可以工作了。
哦，有道理。 Chrome 中全屏模式的背景可能是故意为黑色的。因此，如果您全屏显示身体 Chrome 会将其变为黑色。很高兴你解决了它。