You can set Layout Grid like design tools.
Layout Grid for browser Extension
Layout Grid for browser:
It is an extension that allows you to lay out a LayoutGrid in your browser like a design tool, for instance, Figma, Sketch, Photoshop, and Illustrator.
And it provides you a high-performance ruler tools.
It is useful for marking up HTML, checking a design, and analyzing any other reference sites.
Recommended for such occasions:
Markup, Designing, Quality assurance.
Features:
- Layoutgrid can be laid out by setting a gap to an arbitrary width.For example, 8px, 16px, 24px...etc. in multiples of 8. For example, a multiple of 10...
- You can immediately start up and measure the number of pixels.
- Simply roll over a line to instantly check the number of pixels
- You can immediately launch the extension by simply clicking on the extension button.
- Once a guide is created, it can be saved as a URL.
- The color of the guide can be changed freely.
- The transparency of the guide can be changed freely.
- The angle of the guide can be changed freely, even to a 45-degree angle.
Read more
It is an extension that allows you to lay out a LayoutGrid in your browser like a design tool, for instance, Figma, Sketch, Photoshop, and Illustrator.
And it provides you a high-performance ruler tools.
It is useful for marking up HTML, checking a design, and analyzing any other reference sites.
Recommended for such occasions:
Markup, Designing, Quality assurance.
Features:
- Layoutgrid can be laid out by setting a gap to an arbitrary width.For example, 8px, 16px, 24px...etc. in multiples of 8. For example, a multiple of 10...
- You can immediately start up and measure the number of pixels.
- Simply roll over a line to instantly check the number of pixels
- You can immediately launch the extension by simply clicking on the extension button.
- Once a guide is created, it can be saved as a URL.
- The color of the guide can be changed freely.
- The transparency of the guide can be changed freely.
- The angle of the guide can be changed freely, even to a 45-degree angle.
Source Manifest.json
{"update_url": "https://clients2.google.com/service/update2/crx", "short_name": "layout Grid", "name": "Layout Grid for browser", "description": "You can set Layout Grid like design tools.", "version": "1.0.2", "manifest_version": 3, "action": { "default_title": "LayoutGrid" }, "background": { "service_worker": "./static/js/serviceWorker.js" }, "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["./static/js/content.js"] } ], "permissions": ["storage"], "icons": { "16": "layoutgrid_16x16.png", "48": "layoutgrid_48x48.png", "128": "onLayoutgrid_128x128.png" }}
Read more