Chrome扩展程序sendResponse无法正常工作 [英] Chrome extension sendResponse not working

问题描述

此问题有很多版本，我已经对其进行了审查，并尽我所能尝试了很多事情，但没有成功.我是chrome扩展的新手，可能会错过很多东西，但是我不知道是什么.

There are numerous versions of this question, and I have reviewed them and tried many things to the best of my ability without success. I am new to chrome extensions, and I could be missing many things, but I don't know what.

首先，我想指出的是，我已经从各种答案中复制了几个声称的工作示例，但没有一个对我有用.我正在Windows 7 Professional上使用Chrome版本58.0.3029.81.

First, I want to point out that I have copied several claimed working examples from various answers, and none of them work for me. I am using Chrome Version 58.0.3029.81 on Windows 7 Professional.

无论是我的代码还是我复制的示例，内容脚本中的代码都会执行，并以正确的响应调用sendResponse.除此之外，什么都没有-永远不会执行指定的回调函数.

Whether it's my code, or examples I have copied, the code in the content script executes, and calls sendResponse with the correct response. Beyond that, nothing - the specified callback function is never executed.

这是我当前的代码:

manifest.json

manifest.json

{
  "manifest_version": 2,

  "name": "TestExtension",
  "description": "...",
  "version": "1.0",

  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [ "content.js" ]
    }
  ],

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html",
    "default_title": "Send a checkpoint request"
  },

  "permissions": [
    "activeTab",
    "tabs",
    "http://*/*",    // allow any host
    "https://*/*"    // allow any secure host
  ]
}

popup.js

document.addEventListener('DOMContentLoaded', function ()
{

    document.getElementById('extension_form').onsubmit = function ()
    {
        var elementName = "DataAccessURL";

        chrome.tabs.query(
        {
            active: true,
            currentWindow: true
        },
        function (tabs)
        {
            chrome.tabs.sendMessage(
                tabs[0].id,
                { Method: "GetElement", data: elementName },
                function (response)
                {
                    debugger;
                    console.log("response:Element = " + response.Element);
                    alert(response.Element);
                });
        });



    };
});

content.js

content.js

chrome.runtime.onMessage.addListener(function (request, sender, sendResponse)
{
    console.log("In Listener");

    if (request.Method && request.Method == "GetElement")
    {
        var result = "";

        var element = request.data;

        console.log(element);

        var e = document.getElementById(element);

        if (e) result = e.innerHTML;

        console.log(result);

        sendResponse({ Element: result });

        return true;    // <-- the presence or absence of this line makes no difference
    }

});

任何线索将不胜感激.我根本不明白为什么未调用我的回调.

Any clues would be appreciated. I simply do not understand why my callback is not being called.

推荐答案

用户wOxxOm在其评论中提供了此答案.

User wOxxOm provided this answer in his comments.

在popup.js示例中，我将附加到表单"onsubmit"事件以触发我的代码.

In the popup.js example, I am attaching to the form 'onsubmit' event to trigger my code.

我以前读过，如果关闭弹出窗口，它将不再有代码可以运行.正如wOxxOm所指出的，我无法直观地看出我的情况是Submit事件重新加载了弹出窗口.那是断开我的代码.

I had previously read that if the popup gets closed, it's code would no longer be there to be run. I could not visually tell in my case that, as wOxxOm pointed out, that the submit event reloads the popup. That was disconnecting my code.

为了防止重新加载弹出窗口，我需要防止对Submit事件执行默认操作.我添加了一个'evt'参数来接受事件参数到提交中，并调用了preventDefault，如下所示.

In order to prevent the popup from reloading, I needed to prevent the default action on the submit event. I added an 'evt' parameter to accept the event argument to the submit, and called preventDefault as shown below.

document.getElementById('extension_form').onsubmit = function (evt)
{
    evt.preventDefault();
    ...

这使样本能够按预期工作.

This allowed the sample to work as expected.

感谢wOxxOm！

这篇关于Chrome扩展程序sendResponse无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！