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

How to recieve a message sent from content script to popup.js/html?

本文关键字:js popup html 消息 何接收 脚本      更新时间:2023-09-26

我不知道如何从我的内容脚本发送一些数据到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];
}

没有办法保持工具栏弹出打开一旦你点击一个网页或任何地方弹出。一旦它关闭,它的环境/上下文/对象和事件监听器就不存在了。
工具栏弹出窗口也不能以编程方式重新打开。

在添加到网页的DOM对话框/div中继续交互,就像uBlock的元素选择器一样。或者通过chrome.windows.create.

打开'popup'类型的新窗口