albert's blog: [Chrome Extension] How to adjust the width of popup window ?

2016/11/09

[Chrome Extension] How to adjust the width of popup window ?

Problem
In chrome extension, we will create a html file which will be rendered inside the popup window that's created in response to a user's click on the browser action.

I hope the image, search input text and search button are in the same row.
But it display in difference row.

How do I adjust the width of the popup window?

The popup window html content looks like:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello Page</title>
        <script src="helloWorld.js"></script>
    </head>

    <body>
        <form id='myForm'>
            <img src="magnifier.png" height="20" width="20">
            <input type="text" id="queryString" style="width:100px">
            <button type="submit" id="doSearch">Search</button>
        </form>
    </body>
</html>

How-to
You can set the width of html tag. The updated popup window html content looks like:

<!DOCTYPE html>
<html style="min-width:210px;">
    <head>
        <meta charset="UTF-8">
        <title>Hello Page</title>
        <script src="helloWorld.js"></script>
    </head>

    <body>
        <form id='myForm'>
            <img src="magnifier.png" height="20" width="20">
            <input type="text" id="queryString" style="width:100px">
            <button type="submit" id="doSearch">Search</button>
        </form>
    </body>
</html>