Chrome Extension: window.innerWidth = 0 ? // bonus: maximizing window

I am creating a chrome extension to easily swap between different screen sizes (in order to test responsive design). Although this already exists, I figured it would be a good excercise.

I am running into 2 problems:

  • Why Chrome convert the image data to “image/png” mime-type when paste?
  • Failed to load because no supported source was found. when playing HTML5 audio element
  • How can I reset the WebRTC state in Chrome/node-webkit, without refreshing the page?
  • Javascript — Detect if user's locale are set to use 12-hour or 24-hour time format
  • requestFullscreen() is deprecated on insecure origin, and support will be removed in the future
  • Fetch DNS error and Error 404 with a chrome extension
    1. When I try to calculate the size of the frame (window.width – window.innerWidth), window.innerWidth displays as 0 in the console log.

    2. I cannot find any way to easily maximize the window. I could resize to screen.width and screen.height, but that’s not really maximizing. What are my options? The developer site and google itself didn’t return much usable info.

    Here’s some of my code:

    function resize(win){
    window = win;
    frameWidth = window.width - window.innerWidth;
    frameHeight = window.height - window.innerHeight;
    console.log(window.innerWidth);
    ...
    }
    

  • Disable all hyperlinks in any website
  • Chrome Extension: Grab DOM content for parsing
  • Could someone once and for all please explain Cannot call determinedVisibility() - never saw a connection for the pid
  • How to use the <webview> methods in Electron
  • Extending HTMLCanvasElement in Custom Element issue
  • Google Chrome Extension Persistence
  • 2 Solutions collect form web for “Chrome Extension: window.innerWidth = 0 ? // bonus: maximizing window”

    You are accessing your background page, that’s why you have width/height = 0. You have to access the current window.

    chrome.windows.getCurrent(function(w) {
      // You can modify some width/height here
    }
    

    Window properties are described here. For instance, you can modify width/height by using:

    w.width = 300;
    w.height = 200;
    

    I think what you’re looking for is window.outerWidth and window.outerHeight:

    var width = window.outerWidth – window.innerWidth;

    But you may have this right and the problem you might be running into is trying to calculate the width from your background page. The innerWidth from your background page is 0 because it’s an invisible 0-size window.

    To get the actual outerWidth (or innerWidth), you need to execute the code in the visible window in question. You can do this with a content script if one is active, or you can create a new HTML page in your extension, load it in a tab in the window, have it do the calculations and send the data back to your background page with sendRequest.