Question

我开发了一个Chrome扩展程序，该扩展程序在弹出菜单中具有一个依赖项下拉列表。根据用户在此下拉菜单中的选择，将进行ajax调用，以基于所选选项的if获得一些数据。为此，我编写了这个可以正常工作并返回选择的选项ID的jquery。

$('#scenarioDropdownList').change(function () {
    scenarioId = $('#scenarioDropdownList option:selected').prop('id');
    });

ajax调用将方案编号作为参数，并返回具有匹配的方案编号的数据。然后，我将使用这些数据来操作DOM中的字段。因此，我的内容脚本如下，其中包括ajax调用以获取数据，然后是一些逻辑数据。

在开发chrome扩展程序时，下拉列表位于popup.html中，因此获取id的jquery（请参见代码的第一部分）位于popup.js中。我需要能够将方案编号从popup.js传递到内容脚本，以便可以在ajax调用中使用它。

我已阅读了消息传递的内容，并提出以下要求：

popup.js

$('#scenarioDropdownList').change(function () {
            scenarioId = $('#scenarioDropdownList option:selected').prop('id');
            chrome.runtime.sendMessage(scenarioId);
            });

内容脚本（content.js）

chrome.runtime.onMessage.addListener(function(response, sender, sednResponse) {
    var getScenarioId = response;
})

不幸的是，由于我正在努力产生一种解决方案，该解决方案仍将无法正常工作，并将场景ID从那时popup.js传递到内容脚本，以便可以使用，因此目前尚无法解决。

仅供参考，我生成的用于传递消息的代码没有错误。

Answer 1

在解决我的问题的各种尝试之后，我想到了以下可行的方法。目前，这很简单。我可以通过添加响应消息等来改善这一点。但是对于我希望的功能，该功能是合适的。

Popup.js

 $('#scenarioDropdownList').change(function () {
            scenarioId = $('#scenarioDropdownList option:selected').prop('id');


            // Here I pass the message to the content script with the actual content being the result of the variable scenrioId.
            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                chrome.tabs.sendMessage(tabs[0].id, scenarioId)
              });
        })

内容脚本（content.js）

chrome.runtime.onMessage.addListener(function(request) {
    console.log(request.scenarioId);  
      return true; // Ensures it is async

当前，我只是将结果记录到控制台，但是我将实现它，以便可以在其他地方使用它。

Chrome扩展程序消息将数据从popup.js传递到内容脚本

1 个答案: