Search code examples
javascriptgoogle-chromegoogle-chrome-extensionmousecoordinate

get mouse coordinate in google chrome extension


I desperately looking for the method to retrieve the mouse coordinates of the user when a click on my contextMenu or when using a shortcutKey

I would like if possible not to have to use the onmousemove event that requires movement of the user :/

Do you know how?

Thank you in advance for your response


Solution

  • This is just a simple sample, and only works with:


    files -> change "matches": ["file:"] in manifest.json to add new capabilities

    context menu selection -> change contexts: ["selection"] in contextMenus.create (bg.js) to add new capabilities

    secondary mouse button
    -> change (mousePos.button == 2) in (c.js) to add new capabilities

    You can try also with mousedown event

    For run and test, create these three files, load the extension in chrome, load any file in chrome (example.txt), select any text and then, (secondary mouse button click) new context menu appears. Just click for get Cursor Position.

    Tested and working: 26 march 2014 on chrome Versión 33.0.1750.154

    Any comments are welcome ;)

    manifest.json

    {
      "name": "menuContext position",
      "version": "0.1",
      "description": "determine menuContext position",
      "permissions": ["contextMenus"],
      "content_security_policy": "script-src 'self'; object-src 'self'",
      "background": {
        "scripts": ["bg.js"]
      },
      "content_scripts": [{
        "matches": ["file:///*/*"],
        "js": ["c.js"],
        "run_at": "document_end",
        "all_frames": true
      }],
      "manifest_version": 2
    }
    

    c.js

    'use strict';
    
    // when mouse up, send message to background.js with this position
    document.addEventListener('mouseup', function (mousePos) {
      if (mousePos.button == 2) {
        var p = {clientX: mousePos.clientX, clientY: mousePos.clientY};
        var msg = {text: 'example', point: p, from: 'mouseup'};
        chrome.runtime.sendMessage(msg, function(response) {});
      }
    })
    

    bg.js

    'use strict';
    
    //global var for store cursor position
    var gPos = null;
    
    //receiving message
    chrome.extension.onMessage.addListener(function(msg, sender, sendResponse) {
      if (msg.from == 'mouseup') {
        //storing position
        gPos = msg.point;
      }
    })
    
    // onclick callback function.
    function OnClick(info, tab, text, mousePos) {
      if (info.menuItemId == idConsole) {
          if (gPos != null) {
              alert('Position X: ' + gPos.clientX + '\nPosition Y: ' + gPos.clientY );
              //console.log('Position X: ' + gPos.clientX + '\nPosition Y: ' + gPos.clientY );
          }
      }
    }
    
    //on click sample callback with more params
    var idConsole = chrome.contextMenus.create({
      title: 'Cursor Position',
      contexts: ["selection"],
      onclick: function(info, tab) {
        OnClick(info, tab, '%s', gPos);
      }
    })
    

    Please, if possible, add tag [google-chrome-extension] to your question. Greetings