javascript - 如何接收从内容脚本发送到 popup.js/html 的消息？

Question

我不知道如何将内容脚本中的一些数据发送到 popup.html。它是被点击元素的xpath。我对 Chrome 扩展非常陌生，所以这可能是显而易见的。

我读过有关消息传递的文章，但那里一团糟。

我弄清楚了如何从 xpathget.js 发送消息，但我不知道如何接收它并在 popup.html 上显示它，因为它在之后关闭我点击某个元素。

ma​​nifest.json

{
  "manifest_version": 2,
  "name": "Product",
  "description": "This is a plugin collaborating with product.com",
  "version": "1.0",
  "browser_action": {
    "default_icon": "spy-icon.png",
    "default_popup": "popup.html",
    "default_title": "Click here!"
  },
  "icons":{
    "64":"spy-icon.png"
  },
  "background": {
    "scripts": ["authentication.js"]
  },
    "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["xpathget.js"]
    }
  ],
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/",
    "cookies",
    "<all_urls>"
  ],
  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
}

popup.js

$(document).ready(function () {
    $('body').height(280);
    $('html').height(280);
    MESSAGE_GET_HANDLER(){
        ALTER_THE_HTML; 
    }
});

我想我必须将 xpath 字符串发送到 popup.js，然后更改 popup.html html，就完成了。

xpathget.js

document.onclick= function(event) {
    if (event===undefined) event= window.event;                     // IE hack
    var target= 'target' in event? event.target : event.srcElement; // another IE hack

    var root= document.compatMode==='CSS1Compat'? document.documentElement : document.body;
    var mxy= [event.clientX+root.scrollLeft, event.clientY+root.scrollTop];

    var path= getPathTo(target);
    var txy= getPageXY(target);
    chrome.runtime.sendMessage({xpath: path}, function () {
         alert('sent');
    }); <== I HAVE TO SEND THIS PATH TO PLUGIN
}

function getPathTo(element) {
    if (element.id!=='')
        return 'id("'+element.id+'")';
    if (element===document.body)
        return element.tagName;

    var ix= 0;
    var siblings= element.parentNode.childNodes;
    for (var i= 0; i<siblings.length; i++) {
        var sibling= siblings[i];
        if (sibling===element)
            return getPathTo(element.parentNode)+'/'+element.tagName+'['+(ix+1)+']';
        if (sibling.nodeType===1 && sibling.tagName===element.tagName)
            ix++;
    }
}

function getPageXY(element) {
    var x= 0, y= 0;
    while (element) {
        x+= element.offsetLeft;
        y+= element.offsetTop;
        element= element.offsetParent;
    }
    return [x, y];
}

Answer 1

一旦您单击网页或弹出窗口之外的任何位置，就无法使工具栏弹出窗口保持打开状态。一旦关闭，它的环境/上下文/对象和事件监听器就不再存在。
工具栏弹出窗口也无法以编程方式重新打开。

继续在添加到网页的 DOM 对话框/div 中进行交互，如 uBlock's element picker does.或通过 chrome.windows.create 输入 'popup' 打开一个新窗口.