时间戳

首页 > 解决方案 > 如何为 chrome 扩展制作一个粘性弹出窗口

javascript - 如何为 chrome 扩展制作一个粘性弹出窗口

问题描述

我是 chrome 扩展的新手。我需要创建一个将外部类附加到所选标签的扩展。

例如：- 页面

<h1>extension</h1> 当这个标签鼠标点击元素时，需要向 DOM 添加一个外部类。（不应为空元素）

为此，我正在创建一个 chrome 扩展。为了做到这一点，我需要有一个固定的弹出窗口或画布。就像 CSS 选择器使用一样。

我希望我的 popup.html 仅在单击关闭按钮时关闭，而不是在单击页面元素时关闭。我找不到粘贴弹出窗口的方法。每次我点击网页时它都会关闭。

这是我的清单代码

{
"manifest_version": 2,
"name":"Spider_Extension",
"version":"1.0",
"permissions": [
    "tabs"
  ],
"content_scripts":[{
    "matches":[
        "<all_urls>"
    ],
    "js":["Content.js"]
}],

"background": {
    "scripts": ["background.js"]        
  },
"browser_action":{
    "default_icon":"get_started16.png"
 }
}

这是我的背景.js



function button_clicked(tab){
let msg={
   txt:"hello"

}
console.log(tab)
chrome.tabs.sendMessage(tab.id,msg);



}

这是我的 popup.html

<html>
​
<head>
   <title>Spider extension</title>
   <link rel="stylesheet" href="styles.css">
</head>
​
<body>
​
   <label for="cars">Select Level:</label>
   <select id="levels">
       <option value="l1">L1</option>
       <option value="l2">L2</option>
       <option value="l3">L3</option>
       <option value="l4">L4</option>
   </select>
   <br>
   <button id="addLevel" style="margin:5px;">Add level</button>
   <br>
   <button id="break" style="margin:5px;">Break</button>
   <br>
   <button id="deselect" style="margin:5px;">Deselect</button>
   <br>
​
   <button id="nd__close">X</button>
​
   <script src="popup.js"></script>
</body>
​
</html>

任何人都可以指导我寻求解决方案吗？

先感谢您

标签： javascriptjqueryhtmlcssgoogle-chrome-extension

解决方案

我不认为弹出窗口打算像这样使用，而且传统的弹出窗口结构不可能。您将不得不采取丑陋的方式并将弹出内容注入页面（许多流行的扩展实际上都是这样做的）。解决此问题的更好方法是使用上下文菜单：https://developer.chrome.com/apps/contextMenus 您可以右键单击要选择的元素，例如 ublock origin 的作用： 在此处输入图像描述

推荐阅读