无需编写扩展，通过 JS 即可控制浏览器窗口大小！
作为 Web 开发者，你可能用过类似 Window Resizer 的 Chrome 扩展------它能一键切换预设分辨率，极大方便了响应式开发调试。
但你知道吗？这类功能本质上依赖于 Chrome 扩展的原生 API（如 chrome.windows），而普通网页中的 JavaScript 是无法直接操作浏览器窗口的------这是出于安全限制。
那么问题来了：如果不写扩展，能否在任意页面中动态调整窗口尺寸？
答案是：可以！
只需安装一款名为 「MV3前端助手」 的 Chrome 扩展，你就能在任何网页中通过纯 JavaScript 调用原生 API，轻松实现窗口尺寸自定义。
核心原理：通过 window.$mv3 接口桥接扩展能力
「MV3前端助手」是一款基于 Chrome Manifest V3 构建的开发者工具扩展。它在全局暴露了一个安全接口 window.$mv3，允许你在任意网页中，以受控方式调用 Chrome 扩展 API。
这意味着：
- 无需打包、无需发布、无需了解 Chrome Manifest V3 架构；
- 只需一段 JS 代码，即可获得
chrome.windows、chrome.tabs、chrome.storage等强大能力； - 完全兼容现有开发习惯，像写普通前端代码一样操作浏览器。
实战演示：一键调整窗口为 1280×800
打开任意网页（例如 百度首页），按下 F12 打开开发者工具，在 Console 控制台中粘贴并运行以下代码：
javascript
// 示例代码将演示Window Resizer，改变浏览器窗口尺寸的核心方法
// size = { width, height }
const resize = async (size) => {
if (!window.$mv3?.extApi.isConnect) {
return console.log('未与MV3前端助手建立连接');
}
if (!size) {
return;
}
try {
// 得到当前窗口信息
const data = await window.$mv3.extApi.exec({
code: `chrome.windows.getCurrent()`,
cmd: 'service_worker_eval',
timeout: 2000,
});
if (data?.exec_error) {
throw new Error(data.exec_error);
}
// 获取屏幕有效尺寸
const { availWidth, availHeight } = window.screen;
let left = data.left;
let top = data.top;
let width = size.width;
let height = size.height;
// 如果宽度超出屏幕宽度，则取屏幕宽度
if (size.width > availWidth) {
width = availWidth;
left = -8;
}
// 如果高度超出屏幕高度，则取屏幕高度
if (size.height > availHeight) {
height = availHeight;
top = 0;
}
width += 16; // 宽度补16，实际调整出来，总宽度要小16
height += 8; // 高度补8，实际调整出来，总高度要小8
// 窗口居中
left = (availWidth - width) / 2;
top = (availHeight - height) / 2;
if (top < 0) {
top = 0;
}
// 窗口更新参数
let updateInfo = {
windowId: data.id,
options: {
focused: true,
width,
height,
left: parseInt(left), // 不能有小数
top: parseInt(top), // 不能有小数
state: 'normal',
},
};
// 更新窗口尺寸
const data2 = await window.$mv3.extApi.exec({
code: `chrome.windows.update(${updateInfo.windowId}, ${JSON.stringify(
updateInfo.options
)})`,
cmd: 'service_worker_eval',
timeout: 2000,
});
if (data2?.exec_error) {
throw new Error(data2.exec_error);
}
} catch (e) {
window.$mv3.log.debug(`设置窗口尺寸失败: ${e.message}`);
throw e;
}
};
// 将窗口尺寸调整为1280x800
await resize({ width: 1280, height: 800 });
console.log('窗口尺寸已调整为1280x800');
运行后，你的浏览器窗口将自动居中并缩放为 1280×800 像素！
💡 提示：
- 代码中对 width 和 height 增加了 16 和 8 的补偿值，这是由于 Chrome 窗口边框和标题栏占用导致的实际可视区域略小于设置值。市面上大部分调整窗口尺寸的扩展并没有进行补偿，所以窗口尺寸调整出来都会达不到预设尺寸。
「MV3前端助手」还能做什么？
除了窗口控制，该扩展还开放了更多原生能力，赋能前端开发者突破浏览器限制：
| 能力 | 应用场景 |
|---|---|
| 绕过 CORS | 直接请求任意域名接口，无视跨域限制（类似代理） |
| 注入内容脚本 | 在任意页面运行自定义脚本（类似油猴） |
chrome.tabs |
标签页操作、批量打开/关闭 |
chrome.windows |
窗口管理、多屏调试 |
chrome.storage |
使用 chrome.storage.local/sync 进行跨页面、跨会话的数据持久化存储，比 localStorage 更强大且支持异步。可突破浏览器默认存储配额限制，适合缓存大量数据 |
chrome.cookies |
读取、设置、删除指定域名的 Cookie，可用于自动登录、跨域身份同步、Cookie 管理工具等。 |
chrome.tts |
调用系统语音朗读文本 |
chrome.notifications |
在系统通知中心弹出提醒 |
chrome.bookmarks |
读取、创建、编辑、删除书签 |
chrome.history |
访问用户浏览历史记录 |
chrome.topSites |
获取 Chrome 首页"常用网站"列表 |
chrome.search |
触发浏览器地址栏搜索（使用默认搜索引擎） |
chrome.runtime |
与扩展通信、发送消息 |
💡 重要说明：
- 所有敏感权限（如 history、cookies 等）在首次安装「MV3前端助手」时均需用户明确授权，符合 Chrome Manifest V3 安全规范。
- 「MV3前端助手」通过
window.$mv3.extApi.exec()安全封装这些能力，开发者无需编写完整扩展即可调用，大幅降低使用门槛。- 更多扩展原生API的访问能力后续均可开放。
借助「MV3前端助手」开放的能力，相当于为Web开发者提供了一个轻量级浏览器自动化平台，能与浏览器实现深度交互。基本实现了 "用 Web 技术操控浏览器" 的愿景。
无论你是想构建个人效率工具、自动化脚本，还是探索新型 Web 应用形态，它都值得你一试！