如何在javascript中调整chrome扩展窗口的大小？答案

【问题标题】：How to resize chrome extension window in javascript?如何在javascript中调整chrome扩展窗口的大小？
【发布时间】：2021-04-22 07:26:39
【问题描述】：

我正在尝试调整我的 chrome 扩展程序窗口的大小，但我不知道该怎么做。

document.write('<div class="card" id="main-card" style="width: 18rem; height: 20rem;">')
document.write('<img class="card-img-top" src="..." alt="Card image cap">')
document.write('<div class="card-body">')
document.write('<h5 class="card-title">Card title</h5>')
document.write('<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>')
document.write('<button id="test" class="btn btn-primary">Go somewhere</button>')
document.write('</div>')
document.write('</div>  ')


document.getElementById("test").onclick = function() {
    document.getElementById("main-card").style.height = "10rem"
}

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
        <script src="index.js"></script>
    </head>
    <body>
    </body>
</html>

清单.json { “名称”：“测试”， “版本”：“1.0”， "description": "这个扩展", “作者”：“测试”， “浏览器操作”：{ "default_popup": "index.html", “default_title”：“WRB” }, “清单版本”：2 }

【问题讨论】：

澄清一下，您是指扩展程序中的弹出窗口吗？
我的意思是当你点击图标时打开的默认弹出窗口。
我相信窗口会自动调整大小以适应您的内容，因此如果您需要更改弹出窗口的大小，您只需更改内容的大小即可。
当我将引导卡的大小更改为 20rem 之类的数字，然后我的引导卡变为 10rem 时，它不会改变高度。

标签： javascript google-chrome-extension

【解决方案1】：

要调整弹出窗口的大小，您只需调整内容的大小。最好的方法是编辑 <body> 元素的宽度和/或高度。

例如：

document.body.style.width = '600px';

如果这不起作用，请确保您有 DOCTYPE 声明 as per this question.

编辑：

现在我看到您在此处使用的代码是一个更新的解决方案。

document.body.innerHTML += 
`<div class="card" id="main-card" style="width: 18rem; height: 20rem;"><img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card\'s content.</p>
        <button id="test" class="btn btn-primary">Go somewhere</button>
    </div>
</div>`;


document.getElementById("test").onclick = function() {
    document.getElementById("main-card").style.height = "10rem";
    document.documentElement.style.height = "10rem";
}

<html>

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>

<body>
    <script src="index.js"></script>
</body>

</html>

看起来您遇到的问题是，当其余内容缩小时，documentElement（您的 <html> 标记）从未调整大小。我刚刚在回调函数中添加了document.documentElement.style.height = "10rem"; 以减小文档的大小。

除此之外但与此特定问题无关，我不建议使用document.write()，因为它会在以后给您带来问题，尤其是overwriting your original page content。为了解决这个问题，我将您的 HTML 标记附加到您文档的 <body> 的 innerHTML 上。我还将弹出脚本的 <script> 标记移到正文中，以便它仅在正文加载后运行。

如何找到有问题的元素

由于您提到虽然这适用于示例代码，但它不适用于您的实际代码，这是您如何在实际项目中查找有问题的元素的方法。

打开弹出窗口。
在窗口中单击鼠标右键，然后单击检查。
这将调出开发工具。
将鼠标悬停在元素面板中的元素上，它们将突出显示。
查找占用空间超过所需高度的元素。最好从最外层的元素开始，逐步进入。
确定导致问题的元素后，请尝试在单击按钮时更改该元素的大小，以测试窗口是否随之调整大小。
如果它有效，好消息，您找到了问题。如果没有，请对下一个最外面的元素重复步骤 4-6，直到找到导致问题的元素。

这是一个 GIF，展示了如何在开发工具中打开和查看元素：

【讨论】：

在我的扩展中，它将主体的大小更改为 20rem，当您单击按钮时，它会将其中的引导卡更改为 10rem，但即使这样做，它也不会将主体更改为 10rem，而是卡是 10rem，身体是 20rem。
你知道为什么会这样吗？
当你改变卡片的尺寸时，听起来你从来没有将 body 重置为 10rem。因此，即使你的卡缩小到 10rem，你的 body 仍然设置为 20rem。
如何将 body 重置为 10rem？我已经尝试过您的解决方案，但它不起作用。
我最初错过了大小的引号。我自己测试过，现在可以正常工作了。我已经更新了答案以反映变化。