У меня есть расширение Chrome, которое в настоящее время использует Material Design Components, Web .У меня нет проблем с использованием unminified CSS, однако JS не работает должным образом.
Если я использую исходный код , при фокусировке на текстовом поле должна быть анимацияпример показывает, но я не испытываю этого в своем расширении.
Я действительно надеюсь, что это не какое-то ограничение безопасности Chrome ... не имеет смыслачто их браузер не может обнаружить и поддерживать их собственную структуру.
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Chrome Ext</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>
<body>
<div class="mdc-text-field">
<input type="text" id="my-text-field" class="mdc-text-field__input">
<label class="mdc-floating-label" for="my-text-field">Hint text</label>
<div class="mdc-line-ripple"></div>
</div>
</body>
</html>
Над текстом «Подсказка» должно появиться, какпример выше.
Примечание: у меня не было проблем с Material Design Lite, но, поскольку это больше не поддерживается, я решил перестроить с использованием современного фреймворка.