CODEWITHSUNDEEP
google-chrome-extension
Matt
Matt

Reputation: 2896

Chrome Extension - chrome.extension.sendRequest returns empty response

I have a Chrome Extension I'm trying to add features with an enable/disable option.

I have checkboxes in popup.html that onclick, write the value of the boxes to localStorage. Then in my content script, I send a request for the value.

I used to only have 1 request, and it worked fine. Then I tried to add another, and no matter what I try, it doesn't work, even if I comment out the other request. Here's the code in my content script:

autopoke = 'default';
secondbutton = 'default';

chrome.extension.sendRequest({localstorage: "autopoke"}, function(response)
{ 
if (response.autopoke == "true")
        {
        autopoke = true;
        }
})

chrome.extension.sendRequest({localstorage: "secondbutton"}, function(response)
{ 
console.log(response) //for debugging
if (response.secondbutton == "true")
        {
        secondbutton = true;
        }
})

No matter if the "secondbutton" localStorage variable is true or not, the output of the second request is blank. The output to Chrome's Console is also a blank object. I tried moving that line to the first request, and it outputted an object, in which was "autopoke = false" somewhere.

To make sure the localStorage value is set, I added this to popup.html: 

alert(localStorage.secondbutton);

And when I click on the popup, an alert comes up saying true. I really can't figure this out, I even tried setTimeout() to wait a few seconds, but the results are the same: a blank output for the localStorage "secondbutton".

background.html:

<html>

<script type='text/javascript'>
chrome.extension.onRequest.addListener(
function(request, sender, sendResponse) {

if (request.localstorage == "autopoke") {
sendResponse({autopoke: localStorage.autopoke});
}
else {
sendResponse({}); // snub them.
}    
});
</script>

</html>

popup.html:

<html>
<head>

<style type='text/css'>
    body
    {
        font-size:10pt;
        width:220px;
        font-family: "Verdana";
        font-weight: bold;
        text-shadow: 2px 2px 2px green;
    }

</style>

<script type='text/javascript'>
    function update()
    {
    localStorage.autopoke = document.myform.check.checked;
    localStorage.secondbutton = document.myform.secondbutton.checked;
    }
</script>
</head>
<body>
    <form name='myform'>
    <table border="0">
        <tr>    
            <td>
                <label for='check'>Autopoke:</label> 
            </td>   
            <td>    
                <input type='checkbox' id='check' onclick='update()'/>
            </td>
        </tr>

        <tr>
            <td>
                <label for='secondbutton'>Additional Poke Button:</label> 
            </td> 
            <td>
                <input type='checkbox' id='secondbutton' onclick='update()'/>
            </td>
        </tr>

    </table>
    </form>
    <script type='text/javascript'>
    if( localStorage.autopoke == "true")
    {
      document.myform.check.checked=true;
    }
    if ( localStorage.secondbutton == "true" )
    {
      document.myform.secondbutton.checked=true;
    }
    </script>
</body>
</html>

Upvotes: 0

Views: 1737

Answers (1)

H&#229;vard
H&#229;vard

Reputation: 10080

Okay, let's see what's going on here. You're first sending a request with localstorage = "autopoke". The if statement in the request handler holds, and sends back the localStorage.autopoke value. Now, why doesn't it respond anything when you send localstorage = "secondbutton"? Well, there's no place in your code that value is returned. Try the code below, it should do the trick.

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) 
{
    if (request.localstorage == "autopoke")
    {
        sendResponse({autopoke: localStorage.autopoke});
    }
    else if (request.localstorage == "secondbutton")
    {
        sendResponse({secondbutton: localStorage.secondbutton});
    }
    else
    {
        sendResponse({}); // snub them.
     }    
});

Upvotes: 1

Related Questions