triggering js function when any element is clicked on the webpage

Question

I am writing a chrome extension where i want to pass the element clicked on the webpage to be passed into a js function which will calculate the css selector.

i am not able to figure out how to to trigger the js function when any element is clicked on the webpage.

nick · Accepted Answer · 2016-04-06T21:29:41.707

3

Add an event listener in your content script that checks for user clicks, capture the target element, and then use chrome.runtime.sendMessage to send the data to your background page or other target destination.

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
}

edited Apr 06 '16 at 21:29

answered Feb 25 '16 at 06:45

nick

1,197
11
16

i tried but its not working. i added the files as you wrote. – Abhishek Tripathi Feb 25 '16 at 07:53
i have just created a manifest file and included these two files you wrote. but its not working. – Abhishek Tripathi Feb 25 '16 at 08:00
these are not complete files, just code snippets illustrating how a content script can interact with the user's active tab in the browser and then relay specific data back to your program. You also need to execute the content script. – nick Feb 25 '16 at 08:01
really sorry for troubling you. but i am just beginner may you please explain me what to do for this to work. – Abhishek Tripathi Feb 25 '16 at 08:03
i tried with the edited code. but still not working. i am posting my manifest file. may you please explain how it will work. @nick – Abhishek Tripathi Feb 25 '16 at 08:34
` { "manifest_version": 2, "icons": { "16": "icons/icon.png", "48": "icons/icon.png", "128": "icons/icon.png" }, "name": " Select", "description": "to give element clicked on a webpage.", "version": "1.0", "permissions": [ "tabs", "http://*/*", "https://*/*" ], "background": { "scripts": ["background.js"], "persistent": false }, "browser_action": { "default_icon": { "19": "icons/icon.png", "38": "icons/icon.png" }, "content_scripts": [{"js" : ["content.js"]}], "default_title": "select" } } ` – Abhishek Tripathi Feb 25 '16 at 08:35
I pasted working code. This is as simple as I can make it. upload it to chrome and test it out. it simply alerts the user of the attributes of the html element that they clicked on. – nick Feb 25 '16 at 08:38
Thank you so much @nick :) – Abhishek Tripathi Feb 25 '16 at 08:48
the question might sound silly but in background.js why there are no semicolon after the var line and onMessage,addListener ? @nick – Abhishek Tripathi Feb 25 '16 at 09:26
This will start the listener on tab activation, but what about if the user refreshes the tab, or starts a new window? – nnyby Feb 25 '16 at 17:59
@nick this extension keeps running all the time. i tried making a a panel at devtool_page but i am not able to start or stop it from there. i created a button there but not able to make it work only when that button is clicked. Any suggestion ? – Abhishek Tripathi Feb 29 '16 at 05:42

score 0 · Answer 2 · answered Feb 25 '16 at 06:46

0

You can use event parameter target property, like this:

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

See full description at MDN: Event.target

answered Feb 25 '16 at 06:46

Alex.Me

616
3
11

score 0 · Answer 3 · edited Feb 29 '16 at 16:15

You can create a function and call it when clicked any element, pass the element id as an argument and after getting id of the element you can do whatever you want.

Simple code when clicked inside a div will give an alert message-

The event handler can be bound to any <div>:

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

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

triggering js function when any element is clicked on the webpage

3 Answers3

Linked