Chrome 扩展：window.innerWidth = 0 ？ // 奖励：最大化窗口答案

【问题标题】：Chrome Extension: window.innerWidth = 0 ? // bonus: maximizing windowChrome 扩展：window.innerWidth = 0 ？ // 奖励：最大化窗口
【发布时间】：2012-01-12 22:23:12
【问题描述】：

我正在创建一个 chrome 扩展，以便在不同的屏幕尺寸之间轻松切换（以测试响应式设计）。虽然这已经存在，但我认为这将是一个很好的练习。

我遇到了两个问题：

当我尝试计算框架的大小（window.width - window.innerWidth）时，window.innerWidth 在控制台日志中显示为 0。
我找不到任何方法来轻松最大化窗口。我可以将大小调整为 screen.width 和 screen.height，但这并没有真正最大化。我有哪些选择？开发者网站和谷歌本身并没有返回太多有用的信息。

这是我的一些代码：

function resize(win){
window = win;
frameWidth = window.width - window.innerWidth;
frameHeight = window.height - window.innerHeight;
console.log(window.innerWidth);
...
}

【问题讨论】：

您访问的是扩展程序范围还是标签范围的window？
@ldiqual Uhm 我不知道，但我将假设扩展名，因为结果是 0...我该如何更改？

标签： javascript google-chrome google-chrome-extension chromium

【解决方案1】：

您正在访问您的背景页面，这就是为什么您的宽度/高度 = 0。您必须访问当前窗口。

chrome.windows.getCurrent(function(w) {
  // You can modify some width/height here
}

窗口属性在here 中描述。例如，您可以使用以下命令修改宽度/高度：

w.width = 300;
w.height = 200;

【讨论】：

我确实试过了。事实上，我使用 getCurrent 来调整窗口大小（有效），只是它调整了外部窗口的大小，我想将内部窗口的大小设置为我需要的大小。到家后我会上传整个源代码（在我的桌面上），希望你不介意到时候再上一个高峰。

【解决方案2】：

我认为您正在寻找的是 window.outerWidth 和 window.outerHeight：

var width = window.outerWidth - window.innerWidth;

但您可能拥有此权利，而您可能遇到的问题是尝试从背景页面计算宽度。背景页面的 innerWidth 为 0，因为它是一个不可见的 0 尺寸窗口。

要获得实际的outerWidth（或innerWidth），您需要在有问题的可见窗口中执行代码。如果内容脚本处于活动状态，您可以使用内容脚本执行此操作，或者您可以在扩展程序中创建一个新的 HTML 页面，将其加载到窗口的选项卡中，让它进行计算并使用 sendRequest 将数据发送回您的后台页面.

【讨论】：

嗨听起来你对 0 值返回是正确的。但是，我并不太完全理解以下解释；您介意更详细地解释或指出正确的方向吗？需要明确的是，该插件的想法是调整窗口大小以进行响应式布局测试 - 所以它会被大量使用，并且需要像闪电一样快。这行得通吗？