在弹出窗口和内容脚本之间共享变量

Question

我是JavaScript新手并尝试完成我的第一个与网络相关的JS项目，但我遇到了问题。

我正在构建的Chrome扩展程序为用户提供了一个弹出页面，其中包含四个下拉字段。当用户提交表单时，在弹出页面本身的空div中创建JSON对象，其中用户的四个选项作为其值。我没有创建这个功能。

我创建的一个单独的函数在弹出页面上解析JSON，将其转换为数组并获取数组的值。

最后一部分是我遇到麻烦的地方。内容脚本需要从数组中获取每个值，在网页上扫描具有匹配值的div，将HTML注入到该div中。问题是我无法与内容脚本中的browserAction函数共享数组变量，从而阻止我对另一个页面运行数组值。

嵌套函数似乎不起作用。我尝试在我的脚本中创建全局变量，但由于存储对象的元素的innerHTML是空的，直到函数运行，它在移出函数外部时返回null。我觉得有一种先进的技术可以解决这个问题，但我找不到解决办法。

非常感谢任何帮助。

弹出提交按钮

<button onclick="setTimeout(loopTheArray, 1)" type="submit">Send</button>

需要全球化的变量（我认为）

function loopTheArray(){
    var responseObject = document.getElementById('code').innerHTML;
    var responseParsed = JSON.parse(responseObject);
    var responseValues = Object.values(responseParsed); //variable that needs to be shared to content script

弹出页面上创建的对象示例

{
  "country": "Value 1",
  "language": "Lang 1",
  "region": "Region 1",
  "sector": "Value 1"
}