How to add a popup with css to an existing website (such as google.com) in JavaScript?

Question

I am new to JavaScript. I have a task to write a js script that will be injected to google.com using Chrome DevTools and run on top of it. The script needs to add certain popups on mouseover action - so if I hover over certain elements of the page (such as the Google logo), a certain popup will be shown. The popups all have css stylings.

So far, I have managed to create alerts on mouseover action using EventListener (on google.com). And I have managed to create custom popups with css on my own website. However, I'm having serious trouble combining both.

The problem is essentially: in my own custom website, I put the css bit under "style" tag, and the js script itself under "script" tag. The script than uses the css properties of the popup to create it. However, in Chrome DevTools I'm only able to inject the actual js script (by copy-pasting it the console), and not the css bit.

How should I get around that? Is there a way to add the css within the js, so running the script will lead to the css being added to the "style" section? Is there a different way to inject the script in the DevTools, and separately inject the css and js? Or is there another way to solve this?

Thanks a lot :)

Answer 1

You can do this by creating and running a snippet, to create a snippet:

Open chrome-devtools

Create new snippet ( Ctrl + Shift + P , type show snippets , and hit 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..")
})

Run the snippet ( Ctrl + Enter )

You can also save and use the snippet later, to run the snippet later: Ctrl + p type ! and the name of your snippet .