Chrome扩展程序 - 从弹出窗口执行简单的JavaScript

我创建了一个使用JavaScript文件和onClick方法显示不同div标签的简单页面。我有一个更复杂的程序，它使用ajax签署用户，它在浏览器中工作正常，但不在弹出窗口中Chrome扩展程序 - 从弹出窗口执行简单的JavaScript

我阅读的越多，我已经阅读了开发人员网站上的所有内容，可以找到我感到更困惑。 Chrome扩展程序不允许内联JavaScript，这很好，但我仍然不确定如何实际编写JavaScript。我知道它与事件处理程序有关，但即使这只是我猜测。

任何人都可以使用这个程序，并告诉我需要更改以使其在使用“manifest_version”的弹出框中工作：2并且没有任何黑客行为。 Google如何期待人们使用JavaScript？真的需要成为一个问候世界计划，展示如何做到这一点。

HTML：

<!DOCTYPE HTML> 
<html> 
<head> 
    <title> Pop Up </title> 

    <script src = "test.js"></script> 



<style type = "text/css"> 

    #signout 
    { 
     display:none; 
    } 

</style> 


</head> 
<body> 
    <!-- ///////////////////////////////////////////// --> 
    <!-- //////////////// Log In Screen ////////////// --> 
    <!-- ///////////////////////////////////////////// --> 
    <div id = "login"> 
     <form method="post" action=""> 

      Username: 
      <input type="text" name = "user" id = "user"><br> 
      Password: 
      <input type="text" name = "pass" id = "pass"><br> 
      <input type="button" value="submit" onClick="logInPHP()" /> 
     </form> 
    </div> 




    <!-- ///////////////////////////////////////////// --> 
    <!-- //////////////// Sign Out Screen //////////// --> 
    <!-- ///////////////////////////////////////////// --> 
    <div id = "signout"> 
     Your are Currently signed in.<br /> 
     <a href = "#" onclick = "signOutPHP()">Sign Out</a> 
    </div> 


</body> 
</html>

的Javascript：

function logInPHP(){ 
      document.getElementById("login").style.display = "none"; 
      document.getElementById("signout").style.display = "inline"; 
} 
function signOutPHP(){ 
      document.getElementById("login").style.display = "inline"; 
      document.getElementById("signout").style.display = "none"; 
}

来源

2013-02-14 kev670

你不能在HTML文件中直接使用onclick属性。删除它们并将您的JavaScript代码包装到文档'DOMContentLoaded'事件侦听器中。

document.addEventListener('DOMContentLoaded', function() { 
    document.getElementById("login").addEventListener('click', function(){ 
     document.getElementById("login").style.display = "none"; 
     document.getElementById("signout").style.display = "inline"; 
    }); 

    document.getElementById("signout").addEventListener('click', function(){ 
     document.getElementById("login").style.display = "inline"; 
     document.getElementById("signout").style.display = "none"; 
    }); 
});

来源

2013-02-14 21:45:10

工作，谢谢。 – kev670 2013-02-14 23:46:36

Chrome扩展程序 - 从弹出窗口执行简单的JavaScript

回答

相关问题