Motion DevTools

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

什么是Motion DevTools?

Motion DevTools是由https://motion.dev开发的Chrome扩展程序,该扩展的主要功能是“Inspect, edit and export animations made with CSS and Motion One.”。

扩展截图

screenshot
screenshot
screenshot
screenshot

下载Motion DevTools扩展crx文件

下载Motion DevTools扩展crx格式的文件,手动将Chrome插件安装到浏览器中,也可以将crx文件分享给朋友,轻松安装Chrome插件。

扩展使用说明

                        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.                    

扩展基本信息

名称 Motion DevTools Motion DevTools
ID mnbliiaiiflhmnndmoidhddombbmgcdk
官方URL https://chromewebstore.google.com/detail/motion-devtools/mnbliiaiiflhmnndmoidhddombbmgcdk
简介 Inspect, edit and export animations made with CSS and Motion One.
文件大小 788 KB
安装次数 8,000
当前版本 2.0.0
更新时间 2023-06-08
上架时间 2022-03-21
评分 4.20/5 共5次评分
开发者 https://motion.dev
电子邮箱 [email protected]
付费类型 in_app
扩展官网 https://motion.dev/tools
支持的语言 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\/*"
        ]
    }
}