Motion DevTools

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

ما هو Motion DevTools؟

Motion DevTools هو إضافة Chrome تم تطويرها بواسطة https://motion.dev، والميزة الرئيسية لها هي "Inspect, edit and export animations made with CSS and Motion One.".

لقطات شاشة التمديد

screenshot
screenshot
screenshot
screenshot

تحميل ملف CRX للإضافة Motion DevTools

قم بتنزيل ملفات الامتداد Motion DevTools بتنسيق crx ، وقم بتثبيت الامتدادات يدويًا في متصفح Chrome ، أو شارك ملفات crx مع الأصدقاء لتثبيت الامتدادات بسهولة.

تعليمات استخدام التمديد

                        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\/*"
        ]
    }
}