English (United States)
See more
A basic set of tools for teams building live Carbon pages for Carbon v10.
Latest Version
Version
2.8.4
Update
August 16, 2024
Size
279KiB
Developer
Category
Users
1,000+ 
Rating
5 ★
Manifest Version
3
Web Store Status
Extension ID
Languages Support
Permissions
ActiveTab
Storage
Scripting
See more
Storage
Scripting
Carbon Devtools V10 Extension
Carbon Devtools provides designers, developers, and QA teams collaborating to build Carbon pages with a simple toolset. The tool helps visualize Carbon's 2x grid over any live page, and provides basic insights into the usage of components and patterns on a given page to help users understand how the Carbon Design System is being used.
Align to grid
Use the grid overlay to lay the 2x and mini unit grids on top of your live page to quickly check its alignment and layout.
Identify tokens
Switch between a number of options like color, spacing, and typography to quickly identify Carbon’s usage.
Component list
Quickly get an inventory of all the Carbon components being used within a live page.
Read more
Align to grid
Use the grid overlay to lay the 2x and mini unit grids on top of your live page to quickly check its alignment and layout.
Identify tokens
Switch between a number of options like color, spacing, and typography to quickly identify Carbon’s usage.
Component list
Quickly get an inventory of all the Carbon components being used within a live page.
Source Manifest.json
{
"update_url": "https://clients2.google.com/service/update2/crx",
"name":"Carbon Devtools V10",
"version":"2.8.4",
"manifest_version":3,
"description":"A basic set of tools for teams building live Carbon pages for Carbon v10.",
"author":"IBM",
"permissions":["activeTab",
"storage",
"scripting"],
"host_permissions":["https://*.mybluemix.net/*",
"https://*.carbondesignsystem.com/*"],
"background":{"service_worker":"/background/index.js",
"scripts":["/background/index.js"]},
"minimum_chrome_version":"121",
"browser_specific_settings":{"gecko":{"strict_min_version":"121"}},
"web_accessible_resources":[{"resources":["/inject/index.css",
"/validate/validationScript.js"],
"matches":["*://*/*"]}],
"icons":{"16":"/media/16x16-mid.png",
"32":"/media/32x32-mid.png",
"48":"/media/48x48-mid.png",
"64":"/media/64x64-mid.png",
"128":"/media/128x128-mid.png"},
"action":{"default_popup":"/popup/index.html"},
"options_ui":{"page":"/options/index.html",
"open_in_tab":false}}
Read more
"update_url": "https://clients2.google.com/service/update2/crx",
"name":"Carbon Devtools V10",
"version":"2.8.4",
"manifest_version":3,
"description":"A basic set of tools for teams building live Carbon pages for Carbon v10.",
"author":"IBM",
"permissions":["activeTab",
"storage",
"scripting"],
"host_permissions":["https://*.mybluemix.net/*",
"https://*.carbondesignsystem.com/*"],
"background":{"service_worker":"/background/index.js",
"scripts":["/background/index.js"]},
"minimum_chrome_version":"121",
"browser_specific_settings":{"gecko":{"strict_min_version":"121"}},
"web_accessible_resources":[{"resources":["/inject/index.css",
"/validate/validationScript.js"],
"matches":["*://*/*"]}],
"icons":{"16":"/media/16x16-mid.png",
"32":"/media/32x32-mid.png",
"48":"/media/48x48-mid.png",
"64":"/media/64x64-mid.png",
"128":"/media/128x128-mid.png"},
"action":{"default_popup":"/popup/index.html"},
"options_ui":{"page":"/options/index.html",
"open_in_tab":false}}
