0

I know hat it is possible, but I am not quite sure how to do it the 'right' way, as to ensure there are no conflicts.

I came across this question: Cannot call functions to content scripts by clicking on image . But it is so convoluted with random comments that it's hard to understand what the corrected way was.

Use case:

Html pages have a div on the page where they expect anyone using the Chrome extension to inject a picture. When users click on he picture, I want to somehow notify an event script. So I know I need to register a listener so the code inserted messages the event script.

Can I get some indication on what code to inject through the content script? I saw that sometimes injecting jquery directly is advised.

I am trying to avoid having the html page to post a message to itself so it can be intercepted. Thanks

Community
  • 1
  • 1
unixsnob
  • 1,685
  • 2
  • 19
  • 45

1 Answers1

2

With the help of Jquery something like this would capture the image onclick event and allow you to pass a message to a background page in the Chrome Extension:

$("img").click(function(){

    var imageSrc = $(this).attr("src");

    //Post to a background page in the Chrome Extension
    chrome.extension.sendMessage({ cmd: "postImage", data: { imgSrc: imageSrc } }, function (response) {
        return response;
    });
});

Then in your background.js create a listener for the message:

chrome.extension.onMessage.addListener(
function (request, sender, sendResponse) {
    if (request.cmd == "postImage") {
        var imageSrc = request.data.imgSrc;
    }
});
QFDev
  • 8,668
  • 14
  • 58
  • 85
  • Hello, I don't know much about jquery, but would this not insert the image in the div once the click on an image is registered? or Am I reading this wrong? thanks – unixsnob May 13 '13 at 15:08
  • Yes that's right, is there something you want to do in between this? – QFDev May 13 '13 at 15:36
  • Yeah, that is not what I need. Sorry. There is only a `div` in the original html, where an image should be inserted when chrome loads the page. This image should also be able to report back clicks hat happen on it. So basically I want to add a clickable image where a the div with an specific id. – unixsnob May 13 '13 at 16:01
  • You mention "There is only a div in the original html, where an image should be inserted when chrome loads the page" Where does this image originate from? Will it always be the same image or dynamically populated somewhere else? – QFDev May 13 '13 at 16:40
  • The images will be downloaded from a server, each time a page with a a div that requires an image (specific id or something) one image will be pulled from the repository. I need to obviously monitor the number of images and download more as they are used up. I think I know how to do the whole part of acquiring the images, I just don't know how to capture clicks on the injected images, as these need to be reported back to the server. To keep track of what images get people to click. – unixsnob May 13 '13 at 16:49
  • The $("img").click() function will listen for the img clicks. You can then do a $.ajax() post (not detailed in my answer) to send the relevant data to your server. The question is what do you want to send to your server? The image source, ID, class etc? – QFDev May 13 '13 at 16:54
  • Right, I think I realised the confusion. I don't want to contact the server from the actual event. I want to message another part of the extension using http://developer.chrome.com/extensions/messaging.html with some metadata so, that part can do the reporting. What I wanted is some way of capturing the event so I could call the messaging API from Chrome. – unixsnob May 13 '13 at 17:06
  • I've modified my answer slightly to show how you would listen for the image click, grab the src and post it via a message to a background page in your extension. Of course you could pass the image ID, class or any other property in the image element...up to you. – QFDev May 13 '13 at 17:17