19

私はGoogle Chrome拡張機能を初めて使用しdiv、ホバーを強調表示する拡張機能を作成しようとしています。div内部に別のものがdivあり、内部がホバーされている場合は、内部のみdivを強調表示したいと思います。div

サンプルのいくつかは動作していますが、ホバー イベントをキャッチする方法がわかりません。

4

3 に答える 3

32

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 が「ホバー」状態になることがわかります。これは、要素を検査するときにブラウザーのインスペクターにアクセスしたときに起こることと似ています。

于 2010-12-15T01:51:50.080 に答える
1

@pdknskすべての要素に対してこれを設定するためにできることはonload、本文のイベントに対して、次のコードを実行することです。

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

on と off を次のように変更します。

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

注意すべきことは、これはelement.styleオブジェクトを使用してスタイリングが設定されている場合にのみ機能することです。より堅牢にするためにはelement.style.cssText、(正規表現を使用して) およびプロセスを取得して変更する必要があります。

全体として、Mohamed Mansour's Answer はこれを達成するための最良の方法です。

于 2011-07-18T15:30:37.700 に答える