Question

我正在使用HTML CSS和JavaScript创建Google Chrome扩展程序。我们如何使用带有鼠标悬停的dom访问浏览器内容文本，我只能获取child的最后一个元素。我要如何获取div或span范围的中级子级和子级的第一个元素这是我的代码

window.addEventListener("mouseover", test);
function test() {
  document.body.onmouseover = event => {
      let childLen = event.target.childElementCount

    if (event.target.lastChild) {
      if (event.target.lastChild.innerHTML) {
        event.target.style.border = "solid";
        console.log(event.target.lastChild.innerHTML)
      }
    }
  };
}

这是我的HTML代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>
  </head>
  <body>
       <table>
          <tbody>
            <tr>
              <td id="myButtonOne" >
                <i
                  class="fa fa-hand-pointer fa-lg handicon"
                  aria-hidden="true"
                ></i>
              </td>
              <td id="Title" >Title: </td>
              <td  >
                <i class="fa fa-check-circle tick "  id="removeOne" aria-hidden="true"></i>
              </td>
            </tr>
</tbody>
</table>
</body>
</html>

这是我的manifest.json文件代码

{
  "manifest_version": 2,
  "name": "React Extention",
  "author": "Muhammad Yousuf",
  "version": "1.0.1",
  "options_page": "index.html",
  "description": "Replace new tab screen with GitHub trending projects.",
  "web_accessible_resources": ["index.html"],
  "incognito": "split",
  "icons": {
    "16": "logo.png",
    "48": "logo.png",
    "128": "logo.png"
  },
  "content_scripts": [
    {
     "matches": ["*://*.dawn.com/*"],
      "js": ["content-script.js"]
    }
  ],
  "browser_action": {
    "default_title": "Extention"
  },
  "background": {
    "scripts": ["background.js"],
    "presistent":false
  },
 "content_security_policy": "script-src 'self' 'sha256-GgRxrVOKNdB4LrRsVPDSbzvfdV4UqglmviH9GoBJ5jk='; object-src 'self'",

  "permissions": ["tabs", "http://*/*", "storage","activeTab"]

}

Answer 1

尝试将鼠标悬停并找到浏览器的“内容文本”


// 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('mouseover', function (e) {
 var srcElement = e.srcElement;
 console.log('srcElement',srcElement.nodeName.trim());


 // Lets check if our underlying element is a DIV.
 if (srcElement.nodeName == 'SPAN' || srcElement.nodeName == "P" || srcElement.nodeName == "H1" || srcElement.nodeName == "H2" || srcElement.nodeName == "H3" || srcElement.nodeName == "H4" || srcElement.nodeName == "H5" || srcElement.nodeName == "H6"  || srcElement.nodeName == "UL"  || srcElement.nodeName == "LI"  || srcElement.nodeName == "A"  || srcElement.nodeName == "OL" ) {
   if(srcElement.textContent){
    // console.log('srcElement',srcElement.textContent);
     //console.log('srcElement length',srcElement.textContent.length);
     let selectedText = srcElement.textContent.toString()
     if(srcElement.textContent.length > 1){
       let message = {
         text: selectedText
       };
       chrome.runtime.sendMessage(message);


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

“是否有一个JavaScript函数可以使用鼠标悬停元素查找浏览器的“内容文本”？”

1 个答案: