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

          <head>
     <script src="popup.js"></script>

    </head>
    <body>
        <form id="addbookmark">
            <p><label for="title">Title</label><br />
            <input type="text" id="title" name="title" size="50" value="" /></p>
            <p><label for="url">Url</label><br />
            <input type="text" id="url" name="url" size="50" value="" /></p
            <p><label for="jsonName">Json Name</label><br />
            <input type="text" id="jsonName" name="jsonName" value=""/></p>
            <p><label for="jsonKey">Key</label><br />
            <input type="text" id="jsonKey" name="jsonKey" value="" /></p>
            <p><label for="jsonValue">JSON Value</label><br />
            <input type="text" id="jsonValue" name="jsonValue" value="" /></p>
            <p>
                <input id="submitJson" type="submit" value="Send JSON Object / Valued" />
                <!-- <span id="status-display"></span> -->
            </p>
        </form>
    </body>
</html>

popup.js

function onPageDetailsReceived(pageDetails)  {
    document.getElementById('title').value = pageDetails.title;
    document.getElementById('url').value = pageDetails.url;
    document.getElementById('jsonValue').value = pageDetails.retrievedJsonValue;
}

window.addEventListener('load', function(evt) {      
  document.getElementById('submitJson').addEventListener('click',function(){
      var jsonName = document.getElementById('jsonName').value;
      if(jsonName.length > 1){
        var jsonKey = document.getElementById('jsonKey').value;
        var jsonValueToFind = "";
        jsonValueToFind = jsonName+"."+jsonKey;
        chrome.runtime.getBackgroundPage(function(eventPage) {              
            eventPage.getPageDetails(function(response){
                alert(response.url);
                document.getElementById('url').value = response.url;
            }, jsonValueToFind);                
        });
      }
  });
});

event.js

function getPageDetails(callback,jsonValueToFind) { 
    chrome.tabs.executeScript(null, 
                                {code:'var jsonValue ='+jsonValueToFind},
                                function(){
                                    chrome.tabs.executeScript(null,{file: 'content.js' });
                                }); 


    chrome.runtime.onMessage.addListener(function(message)  { 
        callback(message); 
    }); 
}

content.js

chrome.runtime.sendMessage({
    'title': document.title,
    'url': window.location.href,
    'retrievedJsonValue': jsonValue
});

Can anybody help me in storing the values to text boxes in the popup boxes, after the button click.

回答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.

来源：https://stackoverflow.com/questions/32165792/how-to-store-the-values-retrieved-from-content-script-into-textboxes-with-a-butt

标签

javascript

html

json

google-chrome-extension