Chrome Extension - javascript in onClick function only works when debugging

Question

I am creating a Chrome Extension that upon clicking the extension icon will present the user with a button, clicking that button will open a new tab which will display a parameter passed to it from the original page. The strange thing is that this will work if I debug it (i.e. right click the extension icon and click "Inspect popup"), but it will just show a blank page upon clicking the button if I'm not debugging.

manifest.json

{  
    "name": "test name",  
    "version" : "0.1",  
    "description": "test description",  
    "browser_action":  
    {  
        "default_icon": "icon_128.png",  
        "popup": "test.html"  
    },  
    "permissions": [  
        "tabs", "http://*/*", "https://*/*"  
    ]  
}

test.html

<HTML>  
<BODY>  
<script type="text/javascript">  
var currentWindowID = -1;  

window.onload = function(e){   
    chrome.windows.getCurrent(function(w)  
    {  
        currentWindowID = w.id;  
    });  
}  

function openNextPage(){  
    console.log("in openNextPage");  
    chrome.tabs.create(  
        {url: "test2.html"},   
        function(tab)  
        {             
            chrome.tabs.sendRequest(tab.id, {someParam: currentWindowID});  
        }  
    );  
    console.log("exiting openNextPage");  
}  
</script>  
<input type="button" value="Show next page" onClick="openNextPage()">  
</BODY>  
</HTML>

test2.html

<HTML>  
<script type="text/javascript">  
    chrome.extension.onRequest.addListener(function(request)  
    {  
        document.write("<h1>test</h1>");  
        document.write("<h2>value=" + request.someParam + "</h2>");  
    });  
</script>  
</HTML>

James · Accepted Answer · 2016-01-20 14:16:12Z

2

The browser will activate the new tab when it is created, and your popup will be closed. Therefore, the callback is never called from chrome.tabs.create. The background page is a more proper place for such code.

test.html

<HTML>  
<BODY>  
<script type="text/javascript">  
var currentWindowID = -1;  

window.onload = function(e){   
  chrome.windows.getCurrent(function(w)  
  {  
      currentWindowID = w.id;  
  });  
}  

function openNextPage() {  
  var bg = chrome.extension.getBackgroundPage();
  bg.openNextPage(currentWindowID);
}  
</script>  
<input type="button" value="Show next page" onClick="openNextPage()">  
</BODY>  
</HTML>

background.html

<HTML>  
<BODY>  
<script type="text/javascript">  
function openNextPage(currentWindowID) {  
  console.log("in openNextPage");  
  chrome.tabs.create(  
    {url: "test2.html"},   
    function(tab)  
    {             
        chrome.tabs.sendRequest(tab.id, {someParam: currentWindowID})
    }  
  );  
  console.log("exiting openNextPage");  
}
</script>  
</BODY>  
</HTML>

edited Jan 20, 2016 at 14:16

James

3,4711 gold badge22 silver badges34 bronze badges

answered Feb 25, 2012 at 17:38

anfilat

7064 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Anssssss Over a year ago

Yes, this works! Thank you. Note for others, you need to add this line to the manifest.json file: "background_page" : "background.html",

Collectives™ on Stack Overflow

Chrome Extension - javascript in onClick function only works when debugging

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related