Google Material Design Resizer

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

¿Qué es Google Material Design Resizer?

Google Material Design Resizer es una extensión de Chrome desarrollada por Julien Ma, y su función principal es "Overlay current page in Google Resizer tool (https://material.io/resizer/). HTTPS only.".

Capturas de Pantalla de la Extensión

screenshot
screenshot
screenshot
screenshot

Descargar Archivo CRX de la Extensión Google Material Design Resizer

Descarga archivos de extensión Google Material Design Resizer en formato crx, instala manualmente las extensiones de Chrome en el navegador o comparte los archivos crx con amigos para instalar fácilmente las extensiones de Chrome.

Instrucciones de Uso de la Extensión

                        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.

As most websites are now available over HTTPS, the main issue with that is local development.

To make your local pages available over HTTPS, you can either:
- enable HTTPS on your local server. E.g see the [`https` option in BrowserSync](https://browsersync.io/docs/options#option-https)
- use an SSL proxy like [ngrok](https://ngrok.com/docs#bind-tls).

FEEDBACK
Provided "as is".
It may still have bugs, please report them on https://github.com/julienma/google-design-resizer-chrome-extension/issues

NOTE

This is not affiliated in any way with Google.
Some materials are © Google, most notably the source picture (https://material.io/resizer/static/material-io-nav/static/images/resizer_dark.svg) used for the icon and the website (https://material.io/resizer/) loaded within the frame.                    

Información Básica de la Extensión

Nombre Google Material Design Resizer Google Material Design Resizer
ID mkmgkfcdbabajchggfiebcaoghcajmki
URL Oficial https://chrome.google.com/webstore/detail/google-material-design-re/mkmgkfcdbabajchggfiebcaoghcajmki
Descripción Overlay current page in Google Resizer tool (https://material.io/resizer/). HTTPS only.
Tamaño del Archivo 37.17 KB
Cantidad de Instalaciones 2,052
Versión Actual 0.1.0
Última Actualización 2017-07-13
Fecha de Publicación 2017-07-13
Calificación 2.62/5 Total de 13 Calificaciones
Desarrollador Julien Ma
Tipo de Pago free
Sitio Web de la Extensión https://github.com/julienma/google-design-resizer-chrome-extension
Idiomas Soportados en
manifest.json
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "name": "__MSG_appName__",
    "version": "0.1.0",
    "manifest_version": 2,
    "description": "__MSG_appDescription__",
    "icons": {
        "16": "images\/icon-16.png",
        "128": "images\/icon-128.png"
    },
    "default_locale": "en",
    "background": {
        "scripts": [
            "scripts\/background.js"
        ]
    },
    "permissions": [
        "activeTab"
    ],
    "browser_action": {
        "default_icon": {
            "19": "images\/icon-19.png",
            "38": "images\/icon-38.png"
        },
        "default_title": "Google Design Resizer"
    }
}