How to resize chrome extension window in javascript?

I am trying to resize my chrome extensions window but I do not know how to do it.

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"
}

JavaScript
​x
 
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>

JavaScript
 
<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”: “Test”, “version”: “1.0”, “description”: “This extension”, “author”: “Test”, “browser_action”: { “default_popup”: “index.html”, “default_title”: “WRB” }, “manifest_version”: 2 }

Answer

To resize the popup window you just need to resize your content. The best way to do that is by editing the width and/or height of your <body> element.

For example:

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

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

If that isn’t working make sure you have a DOCTYPE declaration as per this question.

EDIT:

Now that I see the code you are using here is an updated solution.

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";
}

JavaScript
 
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>

JavaScript
 
<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>

It looks like the problem you were having is that the documentElement (Your <html> tag) was never resizing when the rest of the content shrunk. I just added document.documentElement.style.height = "10rem"; to the callback function to also decrease the size of the document.

In addition but not related to this specific issue, I would not recommend using document.write() because it will cause you problems later down the line especially with overwriting your original page content. To fix this I appended your HTML tags to the innerHTML of your document’s <body>. I also moved the <script> tag for your popup script to the body so that it runs only after the body has been loaded.

How to Find A Problematic Element

Since you mentioned that while this works on the sample code, it does not in your actual code here is how you can go about finding the problematic element(s) in your actual project.

Open your popup window.
Right click within the window and click inspect.
This will bring up dev tools.
Hover over your elements in the elements panel, they will be highlighted.
Look for an element that is taking up more space than your desired height. It is best to start from the outermost element and work your way in.
Once you identify an element that is causing an issue, try changing the size of that element on the click of the button to test if the window resizes with it.
If it works, good news, you found your problem. If it doesn’t, repeat steps 4-6 with the next outermost element until you find the element that is causing problems.

Here is a GIF showcasing how to open and view elements in dev tools:

Advertisement

Answer