Motion DevTools

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

Hvad er Motion DevTools?

Motion DevTools er en Chrome-udvidelse udviklet af https://motion.dev, og dens hovedfunktion er "Inspect, edit and export animations made with CSS and Motion One.".

Udvidelsesskærmbilleder

screenshot
screenshot
screenshot
screenshot

Download Motion DevTools-udvidelses-CRX-fil

Download Motion DevTools-udvidelsesfiler i crx-format, installer Chrome-udvidelser manuelt i browseren eller del crx-filer med venner for nemt at installere Chrome-udvidelser.

Brugsanvisning til Udvidelsen

                        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.                    

Grundlæggende oplysninger om udvidelsen

Navn Motion DevTools Motion DevTools
ID mnbliiaiiflhmnndmoidhddombbmgcdk
Officiel URL https://chromewebstore.google.com/detail/motion-devtools/mnbliiaiiflhmnndmoidhddombbmgcdk
Beskrivelse Inspect, edit and export animations made with CSS and Motion One.
Filstørrelse 788 KB
Antal Installationer 8,000
Nuværende Version 2.0.0
Senest Opdateret 2023-06-08
Udgivelsesdato 2022-03-21
Bedømmelse 4.20/5 Samlet 5 Bedømmelser
Udvikler https://motion.dev
E-mail [email protected]
Betalingsmetode in_app
Udvidelseswebsted https://motion.dev/tools
Understøttede Sprog 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\/*"
        ]
    }
}