Google Chrome扩展程序:突出显示鼠标悬停的div

Question

我是谷歌chrome扩展的新手,我正在尝试编写一个扩展,突出显示div,以防鼠标位于它上面(悬停).如果在另一个div中有div,我想强调内部div.

我有一些样品正在工作,但我不知道如何捕捉悬停事件,提前感谢您的帮助,

快乐,享受生活.

Answer 1

在HTML中,每个鼠标事件都可以访问底层元素.你可以使用JavaScript轻松完成,HTML5中有一个很好的功能叫做classList(感谢来自Chromium的Erik),它允许你轻松地从DOM中添加和删除类.

首先,您可以使用Google Chrome的内容脚本实现此目的.该算法非常简单,您保留指向上次访问的DOM的指针,并且只需在访问另一个DIV元素时添加/删除类.

在manifest.json中我们将为我们看到的每个页面定义CSS和JS注入.

 ...
  ...
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "css": ["core.css"],
      "js": ["core.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
  ...
  ...

现在让我们看看我们的core.js,我已经包含了一些注释来解释发生了什么:

// Unique ID for the className.
var MOUSE_VISITED_CLASSNAME = 'crx_mouse_visited';

// Previous dom, that we want to track, so we can remove the previous styling.
var prevDOM = null;

// Mouse listener for any move event on the current document.
document.addEventListener('mousemove', function (e) {
  var srcElement = e.srcElement;

  // Lets check if our underlying element is a DIV.
  if (srcElement.nodeName == 'DIV') {

    // For NPE checking, we check safely. We need to remove the class name
    // Since we will be styling the new one after.
    if (prevDOM != null) {
      prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME);
    }

    // Add a visited class name to the element. So we can style it.
    srcElement.classList.add(MOUSE_VISITED_CLASSNAME);

    // The current element is now the previous. So we can remove the class
    // during the next iteration.
    prevDOM = srcElement;
  }
}, false);

现在,让我们看看样式的简单core.css:

.crx_mouse_visited {
  background-color: #bcd5eb !important;
  outline: 1px solid #5166bb !important;
}

多数民众赞成,您会发现所有div都会处于"悬停"状态,类似于在检查元素时访问浏览器检查器时发生的情况.

Answer 2

现在是 2018 年，距离提出这个问题已经过去了 7.5 年。然而，这个问题仍然是相关的，mohamed-mansour提供的答案是最好的。

但我希望稍微优化一下，通过支持 https 进行现代化，并为整个 Chrome 扩展提供完整的文档。

清单文件.json

{
    "name": "Mark active image",
    "version": "1.11",
    "description": "Mark image with dashed frame.",
    "permissions": [
        "activeTab",
        "declarativeContent"
    ],
     "content_scripts": [
        {
            "matches": [
                "http://*/*",
                "https://*/*"
            ],
            "css": [
                "imageMarker.css"
            ],
            "js": [
                "imageMarker.js"
            ]
        }
    ],
   "manifest_version": 2
}

图像标记.js

在下面的示例中，我使用虚线轮廓标记页面中的图像（IMG 标签）。并避免对当前图像进行冗余处理。

// Unique ID for the className.
var MOUSE_VISITED_CLASSNAME = 'crx_mouse_visited';

// Previous dom, that we want to track, so we can remove the previous styling.
var prevDOM = null;

// Mouse listener for any move event on the current document.
document.addEventListener('mousemove', function (e) {
    let srcElement = e.srcElement;

    // Lets check if our underlying element is a IMG.
    if (prevDOM != srcElement && srcElement.nodeName == 'IMG') {

        // For NPE checking, we check safely. We need to remove the class name
        // Since we will be styling the new one after.
        if (prevDOM != null) {
            prevDOM.classList.remove(MOUSE_VISITED_CLASSNAME);
        }

        // Add a visited class name to the element. So we can style it.
        srcElement.classList.add(MOUSE_VISITED_CLASSNAME);

        // The current element is now the previous. So we can remove the class
        // during the next ieration.
        prevDOM = srcElement;
        console.info(srcElement.currentSrc);
        console.dir(srcElement);
    }
}, false);

图像标记文件

.crx_mouse_visited {
    background-clip: #bcd5eb!important;
    outline: 1px dashed #e9af6e!important;
}