Javascript 如何处理chrome扩展弹出窗口中的点击？_Javascript_Google Chrome_Google Chrome Extension

Javascript 如何处理chrome扩展弹出窗口中的点击？

javascript google-chrome google-chrome-extension

Javascript 如何处理chrome扩展弹出窗口中的点击？,javascript,google-chrome,google-chrome-extension,Javascript,Google Chrome,Google Chrome Extension,我正在创建一个带有登录弹出窗口的chrome扩展。我应该将登录表单数据发送到后端API，以便获得身份验证令牌。然后我想将此令牌保存在本地存储中，并将登录弹出窗口更改为另一个带有“注销”按钮的弹出窗口。此按钮将从本地存储中删除身份验证令牌，并再次将弹出窗口更改为登录。我编写了以下代码来执行相同的操作： popup.html <html> <script src="popup.js"></script> <div id="welcome" align

我正在创建一个带有登录弹出窗口的chrome扩展。我应该将登录表单数据发送到后端API，以便获得身份验证令牌。然后我想将此令牌保存在本地存储中，并将登录弹出窗口更改为另一个带有“注销”按钮的弹出窗口。此按钮将从本地存储中删除身份验证令牌，并再次将弹出窗口更改为登录。我编写了以下代码来执行相同的操作：

popup.html

<html>
  <script src="popup.js"></script>
  <div id="welcome" align="left">
    <h3>TimeTracker</h3>
    <form id="login_form" method="post" name="login_form">
      <label>Email :</label>
      <input type="text" name="email" id="email" />
      <br /><br />
      <label>Password :</label>
      <input type="password" name="password" id="password" />
      <br /><br />
      <button type="submit" id="login">Login</button>
    </form>
  </div>
</html>

<html>
  <script src="popup_signed_in.js"></script>
  <div align="center">
    Dont waste time! Timetracker is monitoring your productivity
    <br />
    <br />
    <button id="signout">Sign out</button>
  </div>
</html>

popup\u signed\u in.html

<html>
  <script src="popup.js"></script>
  <div id="welcome" align="left">
    <h3>TimeTracker</h3>
    <form id="login_form" method="post" name="login_form">
      <label>Email :</label>
      <input type="text" name="email" id="email" />
      <br /><br />
      <label>Password :</label>
      <input type="password" name="password" id="password" />
      <br /><br />
      <button type="submit" id="login">Login</button>
    </form>
  </div>
</html>

<html>
  <script src="popup_signed_in.js"></script>
  <div align="center">
    Dont waste time! Timetracker is monitoring your productivity
    <br />
    <br />
    <button id="signout">Sign out</button>
  </div>
</html>

manifest.json

{
    "manifest_version": 2,
    "name": "TimeTracker",
    "description": "Track your web and app browsing habbits!",
    "version": "1.0",
    "author": "Tarun Khare",
    "browser_action": {
        "default_icon": "icon.png",
        "default_title": "Just observing your current url.",
        "default_popup": "popup.html"
    },
    "permissions": ["tabs", "activeTab", "http://127.0.0.1:5000/*", "storage"],
    "background": {
        "scripts": ["background.js"],
        "persistent": false
    }
}

但当我填写登录详细信息并点击“登录”时，什么也没发生。弹出窗口不会更改，控制台中也不会显示任何错误或日志。我假设我的窗体和事件侦听器存在一些问题，因此，

validate（）

函数没有执行。什么问题？

chrome.browserAction.setPopup

不会立即切换弹出窗口。
为此，您需要

location.href=“popup\u signed\u in.html”

xhttp.open

和后续行应移出

xhttp.onreadystatechange

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
  if (this.readyState == 4 && this.status == 200) {
    //.......
  }
};
xhttp.open('POST', 'http://127.0.0.1:5000/userauth/login', true);
xhttp.setRequestHeader('Content-Type', 'application/json');
xhttp.send(JSON.stringify({ email: username, password: password }));

”http://127.0.0.1:5000/*“

可以是

”http://127.0.0.1/“

-无需指定端口或

弹出窗口是一个单独的窗口，因此它有自己的devtools，您可以在其中调试代码并查看错误：在弹出窗口内单击鼠标右键，然后单击“检查”

更改browserAction后

chrome.browserAction.setPopup（{popup:“popup\u signed\u in.html”}）

您还需要重定向到

popup\u signed\u in.html

。使用

window.location.href=“popup\u signed\u in.html”我做了你提到的事情。在弹出窗口的检查控制台中，我仍然看不到任何东西。服务器中也没有记录任何请求或错误。这可能意味着扩展无法向API发送请求。我试图从validate（）函数内部控制台.log（“username is:”，username），我所能看到的是文本“username is:”，在控制台中闪烁了一秒钟，然后消失了。这可能意味着我无法通过document.getElementById（“email”）.valueDevtools检索用户名。valueDevtools可以为您提供更多帮助—您可以在源代码中设置断点并逐行调试，以查看实际发生的情况以及每个步骤中变量的值。您还可以在其网络面板中看到网络请求。查找有关使用devtools调试代码和网络请求的教程。同时确保在chrome://extensions
编辑manifest.json后的页面