How To Store The Values Retrieved From Content Script Into Textboxes With A Button Click

I am new to building chrome extension. I am using content script to retrieve the values. But Iam unable to load the values into the popup.html. Below is the code. popup.html

Solution 1:

For the particular task the event page and separate content script file aren't even necessary:

manifest.json:

"permissions": ["tabs", "activeTab"]

popup.html:

        ...............
        <script src="popup.js"></script>
    </body>
</html>

popup.js ("load" event isn't needed since the script is executed after DOM is parsed):

document.getElementById('submitJson').addEventListener('click', function() {
    var jsonName = document.getElementById('jsonName').value;
    if(jsonName.length > 1) {
        var jsonKey = document.getElementById('jsonKey').value;
        getPageDetails(jsonName + "." + jsonKey, function(pageDetails) {
            Object.keys(pageDetails).forEach(function(id) {
                document.getElementById(id).value = pageDetails[id];
            });
        });
    }
});

function getPageDetails(jsonValueToFind, callback) { 
    chrome.tabs.executeScript({code: jsonValueToFind}, function(result) {
        var value = result[0];
        chrome.tabs.query({currentWindow: true, active: true}, function(tabs) {
            callback({
                url: tabs[0].url,
                title: tabs[0].title,
                jsonValue: value
            });
        });
    }); 
}

• tabId (the first parameter of executeScript) is simply omitted due to being optional.
• injected script result is the last value in the code and it's passed in an array result.