Question

我正在开发Chrome扩展程序，我正在努力实现这一目标：

您点击了Chrome扩展程序图标，并且您看到了一个简单的登录页面，您输入了凭据，我需要将它们发送到REST API，该API具有将返回我的API密钥的登录方法将需要存储（当我到达那一点时，我将决定存储它的确切位置，但暂时可能在https://developer.chrome.com/extensions/storage）。然后，如果到目前为止一切都成功，我希望为用户呈现不同的页面而不是登录。我知道如何提出请求，但我的问题是：我如何实现检查凭据的逻辑并将它们发送到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"]
        }
      ]
    }

但这不是正确的方法，因为它不起作用。后台页面中的方法没有运行，我在其中只有一个简单的console.log来测试它。我不明白如何在后台页面中访问该方法，以及它是否是“正确”的方式。

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

PS。我知道通过这样的表单发送登录凭据可能是超级不安全的，你需要使用OAuth，但由于我们的API还不支持它，扩展的第一个版本必须与我描述的类似只是让它工作（就像一个原型），我会努力让它在未来更好。

Google Chrome扩展程序登录功能

0 个答案: