google-chrome-extension - 谷歌浏览器扩展：突出显示鼠标悬停的 div

Question

我是 Google Chrome 扩展程序的新手，正在尝试编写一个突出显示div悬停的扩展程序。如果有一个div内部另一个div并且内部div悬停，我想div仅突出内部。

我已经得到了一些样本，但我不确定如何捕捉悬停事件。

Answer 1

在 HTML 中，每个鼠标事件都可以访问底层元素。您可以使用 JavaScript 轻松地做到这一点，并且 HTML5 中有一个很好的功能，称为classList（感谢 Chromium 的 Erik），它允许您轻松地在 DOM 中添加和删除类。

首先，您可以使用 Google Chrome 的Content Scripts来实现这一点。该算法非常简单，您保留指向上次访问的 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

Now it is 2018, and 7.5 years past since this question was asked. Yet the question is still relevant, and the answer provided by mohamed-mansour is the best.

Yet I wish to optimize it a bit, modernize with support for https, and provide full documentation to the whole Chrome extension.

mannifest.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
}

imageMarker.js

In my example bellow I am marking images (IMG tag) in the page with dashed outline. And avoid redundant processing on the current image.

// 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);

imageMarker.css

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

Answer 3

@pdknsk What you can do to set this for every element is, for the onload event of the body, run this code:

bod= document.body;
walker = document.createTreeWalker(bod,NodeFilter.SHOW_ELEMENT,null,false);
while (walker.nextNode()){
    walker.currentNode.addEventListener("mouseover",on,false);
    walker.currentNode.addEventListener("mouseout",off,false);
}

and modify on and off like this:

on=function(elem){ oldBG = this.style.backgroundColor;
                   this.style.backgroundColor='#123456';
                   this.addEventListener("mouseout",function(){this.style.backgroundColor= oldBG},false);
}

The thing to notice is that, this will only work if the styling is set using the element.style object, and in order to make it more robust you will need to get the element.style.cssText and process (using regex) and modify it.

All in all, Mohamed Mansour's Answer is the best way to achieve this.