我如何询问用户是否想像 Chrome 一样保存他们的用户名/密码？

Question

我正在制作一个 chrome 扩展程序，它将充当类似于 Chrome 的密码管理器，但具有一些不同的功能。

当用户提交登录表单时，我的扩展能够拦截提交并获取用户名和密码。现在我想显示一个弹出窗口，询问用户是否要保存密码。

如果可以在存在的任何页面顶部显示我自己的自定义 HTML，它会在页面重新加载后消失。那么我是否应该将数据存储在会话变量中，并且每次页面加载时，检查它是否有内容？

我想避免只打开另一个窗口，它看起来很草率。是否有更好的方法来获取表单数据并在提交后加载页面后使用？

Answer 1

这很棘手......

我自己不使用 chrome 扩展，但我确实编写了类似的 GreaseMonkey 扩展。

首先，让我说这是一个坏主意……这里有一些非常重要的安全问题，但我会回答你是如何解决的。

第一步是告诉页面何时加载恰好跟随提交（而不是通过书签或链接打开或在新标签中打开）。

我知道这样做的唯一方法是链接到 window.name 属性，该属性在页面加载之间持续存在。

说这是 hacky 是真的。说它的脆弱会更真实。它甚至可能在某些浏览器下突然停止工作。

但是，这是我知道的唯一方法。

所以.. 你的步骤是。

1. 确定这是否是值得保存的表单。
2. 钩入form.submit并保存URL，关闭用户名和密码。如果页面使用 ajax 或挂钩到 form.submit 本身，那么所有的赌注都没有了。
3. 在window.name 中设置一个标志
4. 让页面重新加载
5. 查看页面是否登录。很可能通过查看页面上是否有password 字段。
6. 查看您在window.name 中的标志是否存在 - 此页面是通过登录加载的。
7. 清除 window.name 标志
8. 如果没有密码字段，弹出一个浮动 div 要求保存信息。
9. 保存。

Answer 2

这可以使用事件和内容脚本的组合来完成。

使用 manifest.json 注册内容脚本

"content_scripts": [ {
  "js": [ "/util/jquery.js", "main.js"],
  "matches": [ "http://*/*", "https://*/*"],
  "run_at": "document_start",    
}],

内容脚本侦听要提交的表单

$("form").submit(function(e) {
  var $this = $(this);
  console.log('submit');
  var formData = findFormData($this); //function searches form for username/password

  //Send message to background page with user/pass data
  chrome.runtime.sendMessage({greeting:'form_submit', data:formData}, function(){ /*if needed */ });

});

使用清单创建注册后台脚本（使用 persistent=false 使后台脚本成为“事件”脚本）。我们还需要以下权限

"background": {
  "scripts": ["/background/background.js"],
  "persistent" : false
},
"permissions": [
  "activeTab",
  "storage",
  "webNavigation"
]

最后，我们将消息监听器添加到后台页面中

chrome.runtime.onMessage.addListener(function(request, sender,     sendResponse) {
switch (request.greeting) {
  case 'form_submit':
    var data = request.data;
    console.log('We Have Data!', request.data);

    //We want to display the prompt when this page loads, so add listener
    chrome.webNavigation.onCompleted.addListener( function askUser(details) {

      //Create prompt here!

      //remove the onCompleted listener so it doesn't appear when navigating again
      chrome.webNavigation.onCompleted.removeListener(askUser);
    });

    sendResponse({farewell: "success"});

    break;
  }
});