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文件
下載Google Material Design Resizer擴展crx格式的文件，手動將Chrome擴充功能安裝到瀏覽器中，也可以將crx文件分享給朋友，輕鬆安裝Chrome擴充功能。
擴展使用說明
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 |
| 官方網址 | 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"
}
} | |
