Google Material Design Resizer
Overlay current page in Google Resizer tool (https://material.io/resizer/). HTTPS only.
Google Material Design Resizer란 무엇입니까?
Google Material Design Resizer은(는) Julien Ma에 의해 개발된 Chrome 확장 프로그램으로, 주요 기능은 "Overlay current page in Google Resizer tool (https://material.io/resizer/). HTTPS only."입니다.
확장 프로그램 스크린샷
Google Material Design Resizer 확장 프로그램 CRX 파일 다운로드
크롬 확장 프로그램을 crx 형식으로 다운로드하여 브라우저에 수동으로 설치하거나 crx 파일을 친구들과 공유하여 쉽게 크롬 확장 프로그램을 설치하세요.
확장 프로그램 사용 설명서
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. 확장 프로그램 기본 정보
| 이름 |  Google Material Design Resizer |
| ID | mkmgkfcdbabajchggfiebcaoghcajmki |
| 공식 URL | https://chrome.google.com/webstore/detail/google-material-design-re/mkmgkfcdbabajchggfiebcaoghcajmki |
| 설명 | Overlay current page in Google Resizer tool (https://material.io/resizer/). HTTPS only. |
| 파일 크기 | 37.17 KB |
| 설치 횟수 | 2,052 |
| 현재 버전 | 0.1.0 |
| 최근 업데이트 | 2017-07-13 |
| 출시 날짜 | 2017-07-13 |
| 평점 | 2.62/5 총 13 개의 평점 |
| 개발자 | Julien Ma |
| 결제 유형 | free |
| 확장 프로그램 웹 사이트 | https://github.com/julienma/google-design-resizer-chrome-extension |
| 지원되는 언어 | 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"
}
} | |
