如何在 javascript 中调整 chrome 扩展 window 的大小？

Question

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

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>

manifest.json { "name": "测试", “版本”：“1.0”， "description": "这个扩展", "作者": "测试", “browser_action”：{ "default_popup": "index.html", "default_title": "WRB" }, “manifest_version”：2 }

Answer 1

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

例如：

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> 标记移到了主体，以便它仅在主体加载后运行。

如何找到有问题的元素

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

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

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

Answer 2

对于给定的需求，HTMLmin-width属性可以设置最小固定尺寸，高度可以设置为 fit-content，如下所示。

CSS:

html { 
    min-width: 400px;
    height: fit-content;
}

如何在 javascript 中调整 chrome 扩展 window 的大小？

How to resize chrome extension window in javascript?

javascript

google-chrome-extension