时间戳

首页 > 解决方案 > 如何在 JavaScript 中将带有 css 的弹出窗口添加到现有网站（例如 google.com）？

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

问题描述

我是 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吗？还是有其他方法可以解决这个问题？

非常感谢 ：）

标签： javascriptcssgoogle-chrome-devtools

解决方案

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

打开 chrome-devtools

创建新片段（Ctrl++ 、typeShift和hit ）Pshow snippetsEnter

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类型!和name of your snippet.

推荐阅读