Motion DevTools

Inspect, edit and export animations made with CSS and Motion One.

What is Motion DevTools?

Motion DevTools is a Chrome extension developed by https://motion.dev, and its main feature is "Inspect, edit and export animations made with CSS and Motion One.".

Extension Screenshots

screenshot
screenshot
screenshot
screenshot

Download Motion DevTools Extension CRX File

Download Motion DevTools extension files in crx format, manually install Chrome extensions in the browser, or share the crx files with friends to easily install Chrome extensions.

Extension Usage Instructions

                        Motion DevTools is a browser extension to inspect, edit and export animations made with CSS and Motion One.

🔍 Inspect:  Press record and interact. Detected CSS and Motion One animations will be plotted on a classic timeline interface. Use the playback controls to scrub through and replay your animation from any point. 

✍️ Edit: Add, move and remove keyframes. Edit values and easing with custom controls, and your edits will be reflected on the page in real-time.

🚢 Export: Perfected your animation? Hit the export button to instantly generate code. Export any animation into CSS transitions, CSS animations or Motion One.                    

Extension Basic Information

Name Motion DevTools Motion DevTools
ID mnbliiaiiflhmnndmoidhddombbmgcdk
Official URL https://chromewebstore.google.com/detail/motion-devtools/mnbliiaiiflhmnndmoidhddombbmgcdk
Description Inspect, edit and export animations made with CSS and Motion One.
File Size 788 KB
Installation Count 8,000
Current Version 2.0.0
Last Updated 2023-06-08
Publish Date 2022-03-21
Rating 4.20/5 Total 5 Ratings
Developer https://motion.dev
Email [email protected]
Payment Type in_app
Extension Website https://motion.dev/tools
Supported Languages en
manifest.json
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "name": "Motion DevTools",
    "description": "Inspect, edit and export animations made with CSS and Motion One.",
    "version": "2.0.0",
    "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAjWcsdcmAGQ8cX\/DQG72r1deFTf4ONxlCor1HvW1\/lLG\/R60VCOuEGLR1OKNrCPHid2gFrlShfDe\/1G1VTefoIMt5z7jlHNuC7i7+mQg9ybbPje2HDKUrOAN5ldo3agqnEJFh+wA2rb6ehOIZVpZ7\/F8Lwja196bvWMSNn+9ktM+fYE3DJacZbf\/mySPlvRt8ToG++hE6taMKN4KnMJC08vWZ33fz\/oeQZ2fDMBGOYP\/9S6LOGoPqYY59Z+9wniZjFN4oE4ORxuP9bek0h15FnYeEvutFY8za0wdLng5bqwDWUlgW51x6MZpJWv1JtD66PBlQVHhX9FJV6m\/HUTE\/qwIDAQAB",
    "manifest_version": 3,
    "icons": {
        "16": "\/assets\/icon-16.png",
        "32": "\/assets\/icon-32.png",
        "48": "\/assets\/icon-48.png",
        "128": "\/assets\/icon-128.png"
    },
    "devtools_page": "devtools.html",
    "background": {
        "service_worker": "js\/background.js"
    },
    "content_scripts": [
        {
            "matches": [
                ""
            ],
            "run_at": "document_start",
            "all_frames": true,
            "js": [
                "js\/bridge.js"
            ]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": [
                "devtools.html",
                "editor.html",
                "js\/background.js",
                "js\/client.js",
                "js\/devtools.js",
                "js\/editor.js"
            ],
            "matches": [
                "https:\/\/*\/*",
                "file:\/\/\/*",
                "http:\/\/*\/*"
            ],
            "use_dynamic_url": true
        }
    ],
    "permissions": [
        "storage",
        "webNavigation"
    ],
    "host_permissions": [
        "file:\/\/\/*",
        "http:\/\/*\/*",
        "https:\/\/*\/*"
    ],
    "externally_connectable": {
        "matches": [
            "https:\/\/*.motion.dev\/*",
            "*:\/\/localhost\/*"
        ]
    }
}