Javascript 谷歌浏览器扩展登录功能

我正在开发一个Chrome扩展，我正在努力实现这一点：

你点击你的chrome扩展图标，你会看到一个简单的登录页面，你输入你的凭证，我需要将它们发送到一个REST API，该API有一个登录方法，该方法将返回一个我需要存储的API密钥（当我到达该点时，我将决定确切存储它的位置，但目前它可能在其中）。之后，如果到目前为止一切顺利，我希望用户能看到一个不同的页面，而不是登录。我知道如何发出请求，但我的问题是：如何实现检查凭据并在background.js页面中发送凭据的逻辑（它实际上是一个事件页面，因为它具有“持久性”：false'属性，而不是在popup.js中，因为您显然只需要登录一次，然后我会通过他的API密钥跟踪他

到目前为止，我已经尝试过这样的方法：

popup.js

document.getElementById('login-btn').addEventListener('click', function() {
    chrome.runtime.getBackgroundPage(function(bgWindow) {
        bgWindow.myBackgroundMethod();
    });
});

background.js

function myBackgroundMethod() {
    console.log('mybackgroundMEthoDasd');

    // ideally here will be the code for the XMLHttpRequest
    // something along the lines of
    var http = new XMLHttpRequest();
    var url = "www.oursite.com/index/...";
    var params = "lorem=ipsum&name=binny";
    http.open("POST", url, true);


    http.setRequestHeader("Content-type", "application/x-www-form-       urlencoded");

    http.onreadystatechange = function() {//Call a function when the state changes.
     if(http.readyState == 4 && http.status == 200) {
         alert(http.responseText);
     }
    }
    http.send(params);
   }

manifest.json

      {
      "manifest_version": 2,

      "name": "Chrome Extension",
      "description": "This extension..!",
      "version": "1.0",

      "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
      },
      "icons": {
        "64" : "icon.png"
      },
      // "permissions": [
      //   "activeTab",
      //   "https://ajax.googleapis.com/"
      // ],
      "background": {
        "scripts": ["background.js"]
      },
      "content_scripts": [
        {
          "matches": ["http://*/*", "https://*/*"],
          "js": ["myScript.js"]
        }
      ]
    }

但这不是正确的方法，因为它不起作用。后台页面中的方法没有运行，我有一个简单的控制台。现在登录它只是为了测试它。我不知道如何访问后台页面中的方法，以及它是否是“正确”的方式

总而言之：我的逻辑是否朝着正确的方向发展，我所描述的是可能的，还是我需要在popup.js中完成所有的逻辑。如果您对如何“安全地”存储API密钥有任何建议，我会欢迎您的

---

另外，我知道通过这样一个表单发送登录凭证可能会非常不安全，您需要使用OAuth，但是由于我们的API还不支持它，所以扩展的第一个版本必须与我描述的类似，才能让它工作（就像一个原型）我会努力在将来做得更好。

我相信你的逻辑是正确的。当你说“它不起作用”时，问几个问题，你是什么意思？是否执行了

myBackgroundMethod

方法？是否收到服务器的任何响应？是否查看网络控制台并查看请求是否已成功发送？您的

manifest.json

like是什么？您的url应包含架构部分，如

http://www.oursite.com/index/...

我编辑过这篇文章增加了一点manifest.json文件，但为了回答您的问题，我在方法的background.js文件中有一个简单的console.log，出于某种原因，当我单击带有事件侦听器的大登录按钮查看您是否实际附加了侦听器时，它不会触发；在这种情况下，您可以从弹出窗口本身执行XHR。您没有在

权限
字段中包含api url，应该使用类似
http://www.oursite.com/index/...
而不是
www.oursite.com/index/…
。但是，这不是根本原因，因为您说过根本不执行
myBackgroundMethod
。所以你应该检查点击处理程序是否被执行，正如@Xan所提到的，你可以把后台逻辑移到弹出页面。我按照你的建议做了，把逻辑移到了popup.js中，一切都很好。我之所以想把它放到background.js中，是因为它是一次性的，而且在我做的文档中的某个地方请参阅“在background.js中放置您希望发生的事情，这样您就不会浪费资源”