Google Chrome扩展程序：突出显示鼠标悬停的div [英] Google Chrome Extension: highlight the div that the mouse is hovering over

问题描述

我是google chrome扩展程序的新手，并试图编写一个扩展程序，以突出显示鼠标在其上方的情况（Hover）。如果在另一个div中有一个div，我只想突出显示内部div。

我有一些样本可以工作，但不知道如何赶上悬停事件，
提前感谢任何帮助，

快乐，享受生活。在HTML中，每个鼠标事件都可以访问底层元素。您可以使用JavaScript轻松完成此功能，并且HTML5中有一项很好的功能，称为 classList （感谢来自Chromium的Erik），它允许您轻松地从DOM中添加和移除类。

首先，您可以使用Google Chrome的内容脚本。该算法非常简单，您可以保存一个指向最后一次访问的DOM的指针，而当您访问另一个DIV元素时，您只需添加/删除类。

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

  ... 
 $ bcontent_scripts：[
 {
matches：[http：// * / *]，
css：[core .css]，
js：[core.js]，
run_at：document_end，
all_frames：true 
} 
] 
 ... 
 ... 
  

现在让我们看看我们的 core.js ，我已经包含了一些评论来解释发生了什么：

  // Unique className的ID。 
 var MOUSE_VISITED_CLASSNAME ='crx_mouse_visited'; 
 
 //先前的dom，我们想跟踪，因此我们可以删除以前的样式。 
 var prevDOM = null; 
 
 //当前文档上的任何移动事件的鼠标侦听器。 
 document.addEventListener（'mousemove'，function（e）{
 var srcElement = e.srcElement; 
 
 //让我们检查底层元素是否是DIV。
 if（srcElement.nodeName =='DIV'）{
 
 //对于NPE检查，我们检查是否安全，我们需要删除类名
 //因为我们将样式化
 if（prevDOM！= null）{
 prevDOM.classList.remove（MOUSE_VISITED_CLASSNAME）; 
} 
 
 //添加一个访问过的类名所以我们可以设置它的样式
 srcElement.classList.add（MOUSE_VISITED_CLASSNAME）; 
 
 //当前元素现在是前一个元素，所以我们可以移除类
 //在下一次迭代中
 prevDOM = srcElement; 
} 
}，false）; 
  

现在，让我们看看样式的简单 core.css ：

  .crx_mouse_visited {
 background-color：＃bcd5eb！important; 
概要：1px固体＃5166bb！重要; 
 
 
 
 
 
 $ b 
就是这样，你会注意到你所有的div都会有一个悬停状态，类似于在检查元素时访问浏览器检查器时发生的情况。
 
I am new to google chrome extensions and am trying to write an extension that highlights a div in case that the mouse is above it (Hover). In the case that there is a div inside another div I would like to highlight the internal div only.

I have got some of the samples working but am not sure how to catch the hover event,
Thanks in advance for any help,

Be happy and enjoy life.
解决方案
In HTML, every mouse event has access to the underlying element. You can do that easily with JavaScript, and there is a nice feature in HTML5 called classList (thanks to Erik from Chromium) that allows you to add and remove classes from DOM's easily.

First of all, you can achieve this with Google Chrome's Content Scripts. The algorithm is quite straightforward, you keep a pointer to the last visited DOM, and you just add/remove class's when you visit another DIV element.

Within your manifest.json We will define the CSS and JS injections to every page we see.
 ...
  ...
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "css": ["core.css"],
      "js": ["core.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
  ...
  ...
Now lets look into our core.js, I have included some comments to explain what is going on:
// 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);
Now, lets look at the simple core.css for the styles:
.crx_mouse_visited {
  background-color: #bcd5eb !important;
  outline: 1px solid #5166bb !important;
}
Thats it, you will notice that all your divs will have a "hovered" state, similar on what happens when you visit your browser inspector when inspecting elements.

                        
这篇关于Google Chrome扩展程序：突出显示鼠标悬停的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！