Google Chrome Extension: mettre en évidence la div que le curseur de la souris sur

Je suis nouveau sur les extensions google chrome et suis en train d'écrire une extension qui met en lumière un div dans le cas où la souris est au-dessus d'elle (Hover). Dans le cas où il ya une div à l'intérieur d'une autre div, je tiens à souligner l'interne div.

J'ai reçu une partie des échantillons de travail, mais je suis pas sûr de la façon de les attraper en vol stationnaire de l'événement,
Merci d'avance pour toute aide,

Être heureux et profiter de la vie.

OriginalL'auteur | 2010-12-14

google-chrome-extension

21

En HTML, chaque événement de souris a accès à l'élément sous-jacent. Vous pouvez le faire facilement avec JavaScript, et il y a une fonctionnalité intéressante dans HTML5 appelé classList (merci à Erik de Chrome) qui permet d'ajouter et de supprimer des classes de DOM facilement.

Tout d'abord, vous pouvez réaliser cela avec Google Chrome Le Contenu Des Scripts. L'algorithme est assez simple, vous de garder un pointeur à la dernière visite à DOM, et il suffit d'ajouter/supprimer de la classe lorsque vous visitez un autre élément DIV.

Au sein de votre manifeste.json Nous allons définir les CSS et JS injections à chaque page nous voir.
```
 ...
  ...
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "css": ["core.css"],
      "js": ["core.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ]
  ...
  ...
```
Laisse maintenant regarder dans notre core.js, j'ai inclus des commentaires pour expliquer ce qui se passe:
```
//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);
```
Maintenant, voyons la simple de base.css pour les styles:
```
.crx_mouse_visited {
  background-color: #bcd5eb !important;
  outline: 1px solid #5166bb !important;
}
```
C'est ça, vous remarquerez que tous vos divs aura un "planait" de l'état, semblable à ce qui se passe lorsque vous visitez votre navigateur inspecteur lors de l'inspection des éléments.

Bonne réponse, seulement je voudrais remplacer border avec outline, en ajoutant les frontières de déplacer les éléments autour. Aussi !important sur le css est probablement nécessaire.
Merci beaucoup à travailler à Être heureux et profiter de la vie.
Grâce serg! Édité le post pour refléter vos commentaires 🙂
Merci Mohamed, votre réponse m'a aidé à attribuer. Veuillez voir mes améliorations ci-dessous.

OriginalL'auteur Mohamed Mansour

Maintenant, c'est 2018, et 7,5 années ont passé depuis que cette question a été posée.
Pourtant, la question est toujours d'actualité, et la réponse fournie par mohamed mansour est le meilleur.

Mais je souhaite l'optimiser un peu, de moderniser avec le support pour le protocole https, et de fournir une documentation complète pour l'ensemble de l'extension Chrome.

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

Dans mon exemple ci-dessous, je suis marquage des images (balise IMG) dans la page avec la ligne pointillée. Et éviter les doublons en matière de traitement de l'image courante.

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

OriginalL'auteur Dudi Boy

Vous devez vous connecter pour publier un commentaire.