Acceda a las variables js globales desde js inyectadas por una extensión de Chrome

Estoy tratando de crear una extensión que tendrá un panel lateral. Este panel lateral tendrá botones que realizarán acciones en función del estado de la página del host.

Seguíeste ejemplo para inyectar el panel lateral y puedo conectar un botón al oyente Click. Sin embargo, no puedo acceder a la variable global js. En la consola del desarrollador, en el ámbito de la página de host puedo ver la variable (nombre de variable - config) que busco. pero cuando el contexto del panel lateral (popup.html) aparece el siguiente error:
VM523: 1 Error de referencia no capturado: la configuración no está definida. Parece que popup.html también se ejecuta en un hilo separado.

¿Cómo puedo acceder a la variable global js para el controlador onClick de mi botón?

Mi código:

manifest.json

{
    "manifest_version": 2,

    "name": "Hello World",
    "description": "This extension to test html injection",
    "version": "1.0",
    "content_scripts": [{
        "run_at": "document_end",
        "matches": [
            "https://*/*",
            "http://*/*"
        ],
        "js": ["content-script.js"]
    }],
    "browser_action": {
        "default_icon": "icon.png"
    },
    "background": {
        "scripts":["background.js"]
    },
    "permissions": [
        "activeTab"
    ],
    "web_accessible_resources": [
        "popup.html",
        "popup.js"
    ]
}

background.js

chrome.browserAction.onClicked.addListener(function(){
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
        chrome.tabs.sendMessage(tabs[0].id,"toggle");
    })
});

content-script.js

chrome.runtime.onMessage.addListener(function(msg, sender){
    if(msg == "toggle"){
        toggle();
    }
})

var iframe = document.createElement('iframe'); 
iframe.style.background = "green";
iframe.style.height = "100%";
iframe.style.width = "0px";
iframe.style.position = "fixed";
iframe.style.top = "0px";
iframe.style.right = "0px";
iframe.style.zIndex = "9000000000000000000";
iframe.frameBorder = "none"; 
iframe.src = chrome.extension.getURL("popup.html")

document.body.appendChild(iframe);

function toggle(){
    if(iframe.style.width == "0px"){
        iframe.style.width="400px";
    }
    else{
        iframe.style.width="0px";
    }
}

popup.html

<head>
<script src="popup.js"> </script>
</head>
<body>
<h1>Hello World</h1>
<button name="toggle" id="toggle" >on</button>
</body>

popup.js

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("toggle").addEventListener("click", handler);
});

function handler() {
  console.log("Hello");
  console.log(config);
}

Respuestas a la pregunta(1)

Su respuesta a la pregunta