[英]Chrome Extension: content_script cannot receive variable from popup.js correctly
[英]can't pass mouse coordinates from content_script to popup (chrome extension)
我希望這不是含糊...
我正在開發我的第一個 google chrome 擴展程序,我正在嘗試將此腳本轉換為擴展程序彈出窗口,請參見下文。 這個想法是,出現在該頁面右下角的框將出現在擴展程序的彈出窗口中,同時動態(實時)從實際頁面中拉出鼠標坐標。 我認為這樣做的方法是注入一個 content_script 來提取鼠標坐標 -> 將它們發送到后台。html -> 然后將它們傳遞給 popup.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
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.