Как добавить всплывающее окно с css на существующий веб-сайт (например, google.com) в JavaScript? - PullRequest
Новая
       5

Как добавить всплывающее окно с css на существующий веб-сайт (например, google.com) в JavaScript?

0 голосов
/ 16 марта 2020

Я новичок в JavaScript. У меня есть задача написать скрипт js, который будет внедрен в google.com с помощью Chrome DevTools и запущен поверх него. Сценарий должен добавить определенные всплывающие окна при наведении курсора мыши, поэтому, если я наведу курсор на определенные элементы страницы (например, Google lo go), будет отображаться определенное всплывающее окно. У всех всплывающих окон есть стили css.

До сих пор мне удавалось создавать оповещения о действиях при наведении курсора с помощью EventListener (на google.com). И мне удалось создать собственные всплывающие окна с css на моем собственном сайте. Однако у меня возникли серьезные проблемы с объединением обоих.

Проблема, по сути, заключается в следующем: на моем собственном пользовательском веб-сайте я поместил бит css в тег "style", а сам скрипт js в "" сценарий "тег. Сценарий, который использует свойства css всплывающего окна для его создания. Тем не менее, в Chrome DevTools я могу только внедрить фактический сценарий js (скопировав его в консоль), а не бит css.

Как мне обойти это ? Есть ли способ добавить css в js, поэтому запуск скрипта приведет к добавлению css в раздел "style"? Есть ли другой способ внедрить скрипт в DevTools и отдельно внедрить css и js? Или есть другой способ решить эту проблему?

Большое спасибо:)

1 Ответ

1 голос
/ 16 марта 2020

Вы можете сделать это, создав и запустив фрагмент, чтобы создать фрагмент:

Открыть chrome -devtools

Создать новый фрагмент ( Ctrl + Shift + P , введите show snippets и нажмите Enter ) 

document.head.insertAdjacentHTML("beforeend",`<style>
  /*Write your css here, sample below*/ 
  body{
   color:red !important;        
  }
 </style>`);

// your main script can go here, note, the below code is just a sample
document.body.addEventListener("mouseover", function(){
 console.log("logged..")
})

Запустите фрагмент ( Ctrl + Введите )

Вы также можете сохранить и использовать фрагмент позже, чтобы запустить его позже: Ctrl + p тип ! и name of your snippet.

...