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

【问题标题】：How to recieve a message sent from content script to popup.js/html?如何接收从内容脚本发送到 popup.js/html 的消息？
【发布时间】：2017-02-10 13:16:52
【问题描述】：

我不知道如何将一些数据从我的内容脚本发送到popup.html。这是点击元素的xpath。我对 Chrome 扩展程序 很陌生，所以这可能很明显。

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

我知道如何从xpathget.js 发送消息，但我不知道如何接收它并在popup.html 上显示它，因为它会在我单击某些元素后关闭。

manifest.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];
}

【问题讨论】：

您能更好地解释一下您的扩展程序中实际发生了什么吗？是否单击页面上的某些内容应该打开弹出窗口并传递消息？这里的流程不是很清楚。

标签： javascript jquery google-chrome google-chrome-extension

【解决方案1】：

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

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

【讨论】：