Question

我是Chrome插件的新手，我想创建一个mousover事件监听器，在其中突出显示带有额外边框的悬停元素。

我希望有人可以帮助我。

这是我的manifest.json：

{
  "manifest_version": 2,
  "name": "Custom Google Homepage",
  "description":
    "This extension shows a Google Image search result for the current page",
  "version": "1.0",
  "permissions": ["storage"],
  "background": {
    "scripts": ["background.js"],
    "css": ["main.css"],
    "persistent": false
  },
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "css": ["main.css"],
      "js": ["core.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ],
  "page_action": {
    "default_popup": "index.html",
    "default_title": "My custom google page!"
  }
}

这是我的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;
      console.log(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);

但是我没有看到console.log也没有人可以帮助我解决这个问题吗？

Google Chrome鼠标悬停事件

0 个答案: