如何在 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 。