Question

我正在创建一个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);
...
}

Answer 1

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

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

窗口属性描述为here。例如，您可以使用以下方法修改宽度/高度：

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

Answer 2

我认为你要找的是window.outerWidth和window.outerHeight：

var width = window.outerWidth - window.innerWidth;

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

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

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

2 个答案: