Question

我正在写一个chrome扩展，我想传递点击网页的元素，传递给js函数，它将计算css选择器。

我无法弄清楚如何在网页上点击任何元素时触发js功能。

Answer 1

在内容脚本中添加一个事件侦听器，用于检查用户点击，捕获目标元素，然后使用chrome.runtime.sendMessage将数据发送到您的后台页面或其他目标目标。

content.js

document.addEventListener('click', function(e){
    var target = e.target || e.srcElement;
    var attributes = Array.prototype.slice.call(target.attributes).map(function(i)    {
        return [String(i.name)+": "+String(i.value)]
    })

    chrome.runtime.sendMessage({method:"captureElement",data:attributes});   
},true)

background.js

chrome.tabs.onActivated.addListener(function(tabId, changeInfo, tab) {
   // alert(changeInfo.url);
   chrome.tabs.executeScript(null, {"file": "content.js"});
});

var container = []
chrome.runtime.onMessage.addListener(function(message){
  if(message.method == "captureElement"){
    container.push(message.data)
    alert(message.data)
  }
})

的manifest.json

 {
 "name": "stack practice",
 "version": "1.0",
 "description": " content script and background page communication",

 "background": {
    "scripts": ["background.js"]

  },

   "content_scripts": [{
    "matches": ["<all_urls>"],
    "js": ["content.js"]
 }],
  "permissions": [
    "http://*/",
     "contextMenus",
     "activeTab"
],
  "manifest_version": 2
}

Answer 2

您可以使用事件参数目标属性，如下所示：

document.body.addEventListener('click', function (e) {
    console.log(e.target);
});

请参阅MDN: Event.target

上的完整说明

Answer 3

您可以创建一个函数并在单击任何元素时调用它，将元素id作为参数传递，并在获取元素的id后，您可以执行任何操作。

在div中单击时的简单代码将发出警告消息 -

事件处理程序可以绑定到任何<div>：

<div id="target">
Click here
</div>
<div id="other">
Click here
</div>

$( "#target" ).click(function() {
alert( "target div is called." );
});

在网页上单击任何元素时触发js功能

3 个答案: