如何在 JavaScript 中将带有 css 的弹出窗口添加到现有网站（例如 google.com）？

Question

我是 JavaScript 的新手。 我有一项任务是编写一个 js 脚本，该脚本将使用 Chrome DevTools 注入到 google.com 并在其上运行。 该脚本需要在鼠标悬停操作时添加某些弹出窗口 - 因此，如果我将鼠标悬停在页面的某些元素（例如 Google 徽标）上，则会显示某个弹出窗口。 弹出窗口都有 css 样式。

到目前为止，我已经设法使用 EventListener（在 google.com 上）创建有关鼠标悬停操作的警报。 我已经设法在我自己的网站上使用 css 创建自定义弹出窗口。 但是，我在将两者结合起来时遇到了严重的麻烦。

问题本质上是：在我自己的自定义网站中，我将 css 位放在“style”标签下，将 js 脚本本身放在“script”标签下。 该脚本使用弹出窗口的 css 属性来创建它。 但是，在 Chrome DevTools 中，我只能注入实际的 js 脚本（通过将其复制粘贴到控制台），而不是 css 位。

我应该如何解决这个问题？ 有没有办法在js中添加css，所以运行脚本会导致css被添加到“style”部分？ 在DevTools中注入脚本，并分别注入css和js，有什么不同的方式吗？ 或者有其他方法可以解决这个问题吗？

非常感谢 ：）

Answer 1

您可以通过创建和运行代码段来创建代码段：

打开 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 + Enter ）

您还可以稍后保存并使用该代码段，以便稍后运行该代码段： Ctrl + p type ! 以及name of your snippet的name of your snippet 。