Примерно так:
let style = document.createElement('style');
style.innerHTML = `
div {
animation-name: nodeReady;
animation-duration: 0.001s;
}
@keyframes nodeReady {
from { clip: rect(1px, auto, auto, auto); }
to { clip: rect(0px, auto, auto, auto); }
}
`;
document.head.appendChild(style);
document.addEventListener("animationstart", function(e) {
if (e.animationName == "nodeReady") {
if (e.target.innerHTML.trim() == 'привет') e.target.innerHTML = 'Пока';
}
}, false);
По стилям там сами смотрите. Если у вас есть class, например, можно вместо div его указать:
.mydiv {
animation-name: nodeReady;
animation-duration: 0.001s;
}
Если вы инжектитесь из расширения, то у вас не будет ни элемента head, ни body. Придётся использовать какой-то такой костыль:
document.children[0].appendChild(style); 
