Google Material Design Resizer là gì?

Google Material Design Resizer là một tiện ích mở rộng Chrome được phát triển bởi Julien Ma, và tính năng chính của nó là "Overlay current page in Google Resizer tool (https://material.io/resizer/). HTTPS only.".

Ảnh Chụp Màn Hình của Tiện Ích Mở Rộng

Tải xuống tệp CRX của tiện ích mở rộng Google Material Design Resizer

Tải xuống các tệp mở rộng Google Material Design Resizer dưới định dạng crx, cài đặt các tiện ích mở rộng Chrome bằng tay trong trình duyệt hoặc chia sẻ các tệp crx với bạn bè để dễ dàng cài đặt các tiện ích mở rộng Chrome.

Hướng Dẫn Sử Dụng Tiện Ích Mở Rộng

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.

Thông Tin Cơ Bản về Tiện Ích Mở Rộng

Tên	Google Material Design Resizer
ID	mkmgkfcdbabajchggfiebcaoghcajmki
URL Chính Thức	https://chrome.google.com/webstore/detail/google-material-design-re/mkmgkfcdbabajchggfiebcaoghcajmki
Mô tả	Overlay current page in Google Resizer tool (https://material.io/resizer/). HTTPS only.
Kích Thước Tệp	37.17 KB
Số Lần Cài Đặt	2,052
Phiên Bản Hiện Tại	0.1.0
Cập Nhật Lần Cuối	2017-07-13
Ngày Phát Hành	2017-07-13
Đánh Giá	2.62/5 Tổng số 13 Đánh Giá
Nhà Phát Triển	Julien Ma
Loại Thanh Toán	free
Trang Web Mở Rộng	https://github.com/julienma/google-design-resizer-chrome-extension
Ngôn Ngữ Được Hỗ Trợ	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" } }