0

これがあいまいではないことを願っています...

私は最初のGoogle Chrome拡張機能に取り組んでおり、それを使用してこのスクリプトを変換しようとしています。以下を参照して、拡張ポップアップに作成しました。そのページの右下に表示されるボックスは、代わりに拡張機能のポップアップに表示され、実際のページからマウス座標を動的に (リアルタイムで) 取得するという考え方です。これを行う方法は、マウス座標を取得する content_script を挿入することであると考えました->それらをbackground.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>&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();
4

1 に答える 1

0

詳細: 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
    }
  });
于 2012-04-10T04:16:51.750 に答える