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> position: absolute;<br> left: ' + l + 'px;<br> top: ' + t + 'px;<br>}</div><div style="position: absolute; left: 250px;">.class {<br> position: absolute;<br> right: ' + r + 'px;<br> 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.