简体   繁体   中英

Chrome Extension - javascript in onClick function only works when debugging

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 (ie 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>  

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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM