无法将鼠标坐标从content_script传递到弹出式窗口(Chrome 扩展程序)
can't pass mouse coordinates from content_script to popup (chrome extension)
我希望这不是含糊不清...
我正在开发我的第一个谷歌浏览器扩展程序,我正在尝试用它转换这个脚本见下文,我制作成一个扩展弹出窗口。这个想法是,出现在右下角该页面上的框将出现在扩展程序的弹出窗口中,同时动态(实时)从实际页面中提取鼠标坐标。我认为这样做的方法是注入一个content_script,该拉动鼠标坐标 ->将它们发送到后台.html ->将它们传递给弹出窗口.js
我已经仔细研究了谷歌的文档,并遵循了几个解决这个问题的帖子的建议,但我似乎无法让它工作。我想也许我在弄清楚chrome.extension.sendRequest
时遇到了问题,以前有人做过这样的事情吗?你有例子吗?我这样做的方式是错误的吗?
//更新:
(注意:这不起作用)
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;
});
});
同样,我正在尝试改编我写的这个脚本:
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();
阅读更多: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
}
});
相关文章:
- 在元素悬停上显示带有javascript的弹出式网站
- Chrome扩展弹出式安装
- 如何在模式窗口弹出窗口中隐藏滚动条
- 普通(弹出式)Chrome 扩展程序与在开发者工具中添加标签页的扩展程序之间的区别
- Javascript窗口弹出
- 仅加载弹出式javascript
- Javascript弹出式Google Chrome扩展
- Javascript中的Mac/Windows弹出式虚拟键盘
- 使用 Facebook PHP SDK 执行弹出式登录窗口
- 无法将鼠标坐标从content_script传递到弹出式窗口(Chrome 扩展程序)
- 在弹出式原因窗口中显示PDF.很接近事实
- 剑道网格-如何用JavaScript打开弹出式编辑窗口
- 使一个弹出式(非模态)浏览器窗口即使在不活动时也保持可见
- 我如何阻止我的Facebook共享窗口被弹出式拦截器阻止
- IE8将弹出式浏览器窗口移至后台
- 模态窗口(弹出式)和背景
- 无法在弹出式模式窗口中显示SQL结果
- “refs"模式弹出式内容给出'undefined'一旦弹出窗口关闭
- 从弹出式窗口中删除默认边框
- Chrome 扩展程序:弹出式窗口.html会在新标签页中关闭并打开响应