javascript - How to resize Chrome browser window with an extension - Stack Overflow

admin管理员组

文章数量:1026989

I am making a chrome extension and wanted to add an option to resize the browser window. I know I can't resize the window with normal JS.(window.resizeTo(600, 600); etc. won't work)

But with extension it's possible. For example with this tool you can resize the window. Problem is that I don't know how.

Also seems possible to open a new tab with desired sizes but it won't open a normal window but a tab.(Like ads)

Does anyone know how to achieve this?

I am making a chrome extension and wanted to add an option to resize the browser window. I know I can't resize the window with normal JS.(window.resizeTo(600, 600); etc. won't work)

But with extension it's possible. For example with this tool you can resize the window. Problem is that I don't know how.

Also seems possible to open a new tab with desired sizes but it won't open a normal window but a tab.(Like ads)

Does anyone know how to achieve this?

• javascript
• google-chrome-extension
• browser

Share Improve this question Follow asked Feb 18, 2021 at 12:03 sunflower seedsunflower seed 30377 silver badges1919 bronze badges 1

• Here's a repo for that. Tested ✅ – Unknown Commented Apr 24, 2023 at 13:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Found an answer:

We need 2 js files. background.js and main.js(content js file, name can be anything).

main.js doesn't have access to extension apis, tabs, background stuff etc. So we will send a message to background.js from our main.js file and get that message in background.js file and execute what we want.

main.js:

chrome.runtime.sendMessage(
  {
    action: "resizeWindow",
  },
  function (createdWindow) {
    console.log("Window Resize");
  }
);

background.js:

  //Windows resize
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request && request.action === "resizeWindow") {
    chrome.windows.getCurrent(function (window) {
      var updateInfo = {
        width: 1200,
        height: 710,
      };
      (updateInfo.state = "normal"), chrome.windows.update(window.id, updateInfo);
    });
  }
});

Note that we need updateInfo.state = "normal".

You can try the window API for chrome extensions

chrome.windows.getCurrent(function(wind) {
alert(wind.id);
var maxWidth = window.screen.availWidth;
var maxHeight = window.screen.availHeight;
var updateInfo = {
    left: 0, //change those to whatever you like 
    top: 0,
    width: maxWidth,
    height: maxHeight
};
chrome.windows.update(wind.id, updateInfo);});

I am making a chrome extension and wanted to add an option to resize the browser window. I know I can't resize the window with normal JS.(window.resizeTo(600, 600); etc. won't work)

But with extension it's possible. For example with this tool you can resize the window. Problem is that I don't know how.

Also seems possible to open a new tab with desired sizes but it won't open a normal window but a tab.(Like ads)

Does anyone know how to achieve this?

I am making a chrome extension and wanted to add an option to resize the browser window. I know I can't resize the window with normal JS.(window.resizeTo(600, 600); etc. won't work)

But with extension it's possible. For example with this tool you can resize the window. Problem is that I don't know how.

Also seems possible to open a new tab with desired sizes but it won't open a normal window but a tab.(Like ads)

Does anyone know how to achieve this?

• javascript
• google-chrome-extension
• browser

Share Improve this question Follow asked Feb 18, 2021 at 12:03 sunflower seedsunflower seed 30377 silver badges1919 bronze badges 1

• Here's a repo for that. Tested ✅ – Unknown Commented Apr 24, 2023 at 13:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Found an answer:

We need 2 js files. background.js and main.js(content js file, name can be anything).

main.js doesn't have access to extension apis, tabs, background stuff etc. So we will send a message to background.js from our main.js file and get that message in background.js file and execute what we want.

main.js:

chrome.runtime.sendMessage(
  {
    action: "resizeWindow",
  },
  function (createdWindow) {
    console.log("Window Resize");
  }
);

background.js:

  //Windows resize
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
  if (request && request.action === "resizeWindow") {
    chrome.windows.getCurrent(function (window) {
      var updateInfo = {
        width: 1200,
        height: 710,
      };
      (updateInfo.state = "normal"), chrome.windows.update(window.id, updateInfo);
    });
  }
});

Note that we need updateInfo.state = "normal".

You can try the window API for chrome extensions

chrome.windows.getCurrent(function(wind) {
alert(wind.id);
var maxWidth = window.screen.availWidth;
var maxHeight = window.screen.availHeight;
var updateInfo = {
    left: 0, //change those to whatever you like 
    top: 0,
    width: maxWidth,
    height: maxHeight
};
chrome.windows.update(wind.id, updateInfo);});

本文标签： javascriptHow to resize Chrome browser window with an extensionStack Overflow