Google Material Design Resizer

Overlay current page in Google Resizer tool (https://material.io/resizer/). HTTPS only.

Google Material Design Resizer Chrome Extension

Google Material Design Resizer is a Chrome extension that allows you to overlay your current page in the Google Resizer tool, allowing you to preview your page at different breakpoints without opening a new tab. It works with HTTPS pages and supports local development as well.

Download

Extension stats

This extension was removed from Chrome Web Store on 2022-12-09

By: Julien Ma

Users: 2,052+

Rating: 2.62

(13)

Version: 0.1.0 (Last updated: 2017-07-13)

Creation date: 2017-07-13

Risk impact: Very low risk impact

Risk likelihood:

High risk likelihood

Manifest version: 2

Permissions:

activeTab

Size: 38.06K

URLs: Website

Other platforms

Not available on Android

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

Preview your page at different breakpoints (desktop, mobile, tablet) in the new interactive viewer from Google. And without even opening a new tab!

UPDATED TO WORK WITH HTTPS.

It also works with localhost / 127.0.0.1 URLs, perfect when developing locally!

USAGE Click the button, and an overlay of Google Material Design Resizer (https://material.io/resizer/) with the current URL loaded will be displayed. Click again to hide the overlay and get back to your website.

REQUIRES HTTPS The extension now supports HTTPS pages. Actually, it's more than that: Google Resizer now requires HTTPS pages. Using the extension (or directly the Google Resizer website) on an HTTP-only website will make Google Resizer enter an infinite refresh loop.

This is due to Google Resizer forcing the Upgrade-Insecure-Requests header (https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content#upgrading_insecure_requests), which forces any HTTP resource to be loaded over HTTPS. This directive cascades to iframes, meaning that non-HTTPS page will never be loaded by Google Resizer tool.

User reviews

Useless, when I click it nothing happens. The menu gives no results at all. This tool on material.io was at least functional. Weird for a Google-native tool not to work in Google Chrome.