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

Question

I am new to chrome extension.我是 chrome 扩展的新手。 And I need to create an extension That Appends the external class to the selected tag.我需要创建一个扩展，将外部类附加到所选标签。

ex:- page例如：- 页面

<h1>extension</h1> need to add an external class to the DOM when this tag mouse is clicked on the element. <h1>extension</h1>需要在这个标签鼠标点击元素时添加一个外部类到DOM。 (should not be an empty element) （不应为空元素）

For that, I am creating a chrome extension.为此，我正在创建一个 chrome 扩展。 In order to do this, I need to have a fixed popup or Canvas.为了做到这一点，我需要一个固定的弹出窗口或画布。 Like the CSS Selector use.像 CSS Selector 一样使用。

I want my popup.html to close only when I click on the close button, not when I click on the element of the page.我希望 popup.html 仅在单击关闭按钮时关闭，而不是在单击页面元素时关闭。 I can not find a way to stick the popup.我找不到粘贴弹出窗口的方法。 it is closed every time I clicked on the web page.每次我点击网页时它都会关闭。

this is my manifest code这是我的清单代码

{
"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"
 }
}

this is my background.js这是我的 background.js



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

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



}

this is my popup.html这是我的 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>

can anyone guide me for a solution ?任何人都可以指导我解决问题吗？

thank you in advance先感谢您

Answer 1

I don't think popups are intended to be used like this and it won't be possible with the traditional popup structure.我不认为弹出窗口的目的是这样使用，传统的弹出窗口结构也不可能。 You would have to go the ugly way and injecting your popup content to the page (many popular extensions do this actually).您将不得不采用丑陋的方式并将弹出内容注入页面（许多流行的扩展实际上都这样做）。 The better way to approach this instead would be to use context menus: https://developer.chrome.com/apps/contextMenus You could right click on the element you want to select, like how ublock origin does:解决此问题的更好方法是使用上下文菜单： https : //developer.chrome.com/apps/contextMenus您可以右键单击要选择的元素，就像 ublock origin 所做的那样：

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-02-21 15:25:35

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-02-21 15:25:35

解决方案1
1 已采纳 2020-02-21 15:25:35