简体   繁体   中英

can't pass mouse coordinates from content_script to popup (chrome extension)

I hope this isn't to vague...

I'm working on my first google chrome extension, with it I'm trying to convert this script See below I made into an extension popup. The idea is that the box which appears on that page on the bottom right, would appear instead in the extension's popup, while dynamically (in realtime) be pulling the mouse coordinates from the actual page. I figured the way to do this would be to inject a content_script which pulls mouse coordinates -> send those to the background.html -> pass those then over to the popup.js

I've mulled over google's documentation and I've followed the advice on the couple of posts that tackle this issue but I can't seem to get this to work. I think perhaps I'm having a problem figuring out the chrome.extension.sendRequest , has anyone done something like this before? Do you have examples? Am I going about this the wrong way?

//UPDATE:

(note: this is not working)

manifest.json
====================
"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html"
},
"content_scripts": [
  {
    "matches": ["<all_urls>","http://*/*","https://*/*"],
    "js": ["coord.js"]
  }
]


content_script (i.e. coord.js)
====================
var x = event.clientX,
    y = event.clientY;  //record down the x and y

chrome.extension.onRequest.addListener(         //listen to request
  function(request, sender, sendResponse) {
    if (request.greeting == "coord"){
      sendResponse({farewell: JSON.stringify([x,y])});//send coordinates to poupup
    }
  });


popup.js
====================
    chrome.tabs.getSelected(null, function(tab) {    //ask for coordinates
      chrome.tabs.sendRequest(tab.id, {greeting: "coord"}, function(response) {
        var x = JSON.parse(response.farewell)[0],
            y = JSON.parse(response.farewell)[1];

        document.getElementById("main").innerHTML = x + "," + y;
      });
    });

Again, I'm trying to adapt this script I wrote:

    var width, height, divObj, interval;
    var l, t, r, b;

    function setup() {
            width = window.innerWidth;
            height = window.innerHeight;
            interval = setInterval(loadDiv, 50);
    }

    document.onmousemove=getMouseCoordinates;

    function getMouseCoordinates(event) {
        ev = event || window.event;

        l = ev.pageX; t = ev.pageY;
        r = width - l; b = height - t;

        divObj.innerHTML = '<div style="position: absolute; left: 20px;">.class {<br>&nbsp;&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;&nbsp;left: ' + l + 'px;<br>&nbsp;&nbsp;&nbsp;top: ' + t + 'px;<br>}</div><div style="position: absolute; left: 250px;">.class {<br>&nbsp;&nbsp;&nbsp;position: absolute;<br>&nbsp;&nbsp;&nbsp;right: ' + r + 'px;<br>&nbsp;&nbsp;&nbsp;bottom: ' + b + 'px;<br>}</div>';      
    }

    function loadDiv() {
        divObj = document.getElementById("divPlacement");
    }

    document.write('<div id="divPlacement" style="position: absolute; right: 25px; bottom: 25px; z-index: 1000; color: #fff; font-family: monospace; background-color: #000; opacity:0.4; filter:alpha(opacity=40); -webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; padding: 10px; width: 420px; height: 80px; border: solid #ccc;"></div>');

    setup();

Read more: http://code.google.com/chrome/extensions/messaging.html#simple

popup.html
===============
chrome.tabs.getSelected(null, function(tab) {    //ask for coordinates
  chrome.tabs.sendRequest(tab.id, {greeting: "coord"}, function(response) {
    var x = JSON.parse(response.farewell)[0],
        y = JSON.parse(response.farewell)[1];
    console.log(x);  //Will give you mouse x
    console.log(y);  //Will give you mouse y
  });
});

content script
===============
var x = event.clientX,
    y = event.clientY;  //record down the x and y

chrome.extension.onRequest.addListener(         //listen to request
  function(request, sender, sendResponse) {
    if (request.greeting == "coord"){
      sendResponse({farewell: JSON.stringify([x,y]));//send coordinates to poupup
    }
  });

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM