making safari extension in context menu. When over image mouse right click, how i know image url?

Question

Making safari extension imageSearch By google.

Here is my source.

injected.js

document.addEventListener("contextmenu", handleContextMenu, false);

function handleContextMenu(event) {
    safari.self.tab.setContextMenuEventUserInfo(event, event.target.nodeName);
}

global.html

<!DOCTYPE HTML>
<script type="text/javascript" src="jquery.js"></script>
<script>
safari.application.addEventListener("contextmenu", handleContextMenu, false);
function handleContextMenu(event) {
    var query = event.userInfo;
    if (query === "IMG") {
        event.contextMenu.appendContextMenuItem("imageSearch", "Search Google with this image");
    }
}

safari.application.addEventListener("command", performCommand, false);
function performCommand(event) {
    if (event.command === "imageSearch") {  


       /*How I get image Url??? */
       var imageUrl="";


    /*
        var url = "http://images.google.com/searchbyimage?image_url="+imageUrl;
        var tab = safari.application.activeBrowserWindow.openTab("foreground");
        tab.url = url;

    */

    }
}

My goal is..

if mouse rightclick add "Search by Google With This Image" int the context menu. (clear)
and click "Search by Google With This Image" google it. (???)

so i want to know image url.

What should I do?

score 4 · Accepted Answer · answered Sep 03 '12 at 21:19

You could try this:

store the whole node into the event's userInfo:

function handleContextMenu(event) {
    safari.self.tab.setContextMenuEventUserInfo(event, event.target);
}

add some global javascript variable to your global.html (e.g. var lastClickedImg),

change your handleContextMenu function to store the event.userInfo in function handleContextMenu to this variable:

function handleContextMenu(event) {
    var query = event.userInfo;
    if (query.nodeName === "IMG") {
        lastClickedImg = query;
        event.contextMenu.appendContextMenuItem("imageSearch", "Search Google with this image");
    }
}

in your function performCommand you will easily get the image's url from lastClickedImg:
```
lastClickedImg.src
```

score 0 · Answer 2 · answered Sep 17 '12 at 10:38

You can find image URL by placing an event listener for contextmenu in an injected script.

function contextMenuHandler(event)
{
    var url = event.target.src;
    safari.self.tab.setContextMenuEventUserInfo(event, url);
}

document.body.addEventListener("contextmenu", contextMenuHandler, false);

And then recovering the image src in command event

var imageUrl = event.userInfo;

You should also do some validation to make sure it's an image.

making safari extension in context menu. When over image mouse right click, how i know image url?

2 Answers2