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
Languages Support
English (United States)
See more
Permissions
ActiveTab
Storage
Scripting
See more

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

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

Similar Extensions

icon

IBM Grid Checker Extension · Developer Tools 1,000+ 0 ★ 4.95MiB

icon

GitHub Enhancement Suite Extension · Developer Tools 1,000+ 1 ★ 56.24KiB

icon

Git Mining Extension · Productivity 1,000+ 4 ★ 211KiB

icon

rawkit Extension · Developer Tools 1,000+ 0 ★ 88.13KiB

icon

IBM Equal Access Accessibility Checker Extension · Developer Tools 1,000+ 16 ★ 29.19MiB

icon

Libraries.io | GitHub Companion Extension · Productivity 1,000+ 3 ★ 1.31MiB

icon

Carbon Extension · Productivity 1,000+ 0 ★ 642KiB

icon

Atma.js DevTool Extension · Developer Tools 1,000+ 0 ★ 201KiB

icon

ZenHub for GitHub Extension · Productivity 1,000+ 377 ★ 3.28MiB

icon

Lavaca Developer Tools Extension · Developer Tools 1,000+ 0 ★ 10.42MiB

icon

Spongy Extension · Developer Tools 1,000+ 3 ★ 40.15KiB

icon

GitHub submodule links Extension · Developer Tools 1,000+ 2 ★ 17.49KiB

icon

Dev Helpers Extension · Developer Tools 1,000+ 6 ★ 135KiB

icon

Builds Tab for Github Extension · Developer Tools 1,000+ 0 ★ 160KiB

icon

LL Developer Tools Extension · Developer Tools 1,000+ 1 ★ 98.88KiB

icon

Segment Event Tracker Extension · Developer Tools 1,000+ 13 ★ 35.08KiB

icon

DOM-JSON Tree Matcher Extension · Developer Tools 1,000+ 0 ★ 18.58KiB

icon

Chorus for HCL Verse Extension · Social & Communication 1,000+ 28 ★ 281KiB

icon

Advanced Dev Tools Extension · Developer Tools 1,000+ 1 ★ 891KiB

icon

Developer's Download Helper Extension · Developer Tools 1,000+ 5 ★ 156KiB

icon

MageTools: DevTools Reimagined Extension · Developer Tools 1,000+ 9 ★ 84.8KiB

icon

CodeWing - GitHub code navigation Extension · Developer Tools 1,000+ 3 ★ 166KiB

icon

Motion DevTools Extension · Developer Tools 1,000+ 8 ★ 788KiB

icon

Dev Playground Extension · Developer Tools 1,000+ 2 ★ 288KiB