我如何询问用户是否愿意将他们的 username/password 保存为 Chrome？

Question

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

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

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

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

Answer 1

这很棘手...

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

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

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

我知道的唯一方法是 link 进入 window.name 属性，它在页面加载之间持续存在。

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

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

所以..你的步骤是。

确定这是否是一个值得保存的表格。
钩入form.submit并保存URL，把用户名和密码关掉。如果页面使用 ajax 或挂钩到 form.submit 本身，则所有投注均无效。
在 window.name
让页面重新加载
查看页面是否已登录。很可能是查看页面上是否有 password 字段。
查看您在 window.name 中的标记是否存在 -- 这个页面是从登录加载的。
清除 window.name 标志
如果没有密码字段，弹出一个浮动的 div 要求保存信息。
保存。

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 使后台脚本成为 "event" 脚本）。我们还需要以下权限

"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;
  }
});

我如何询问用户是否愿意将他们的 username/password 保存为 Chrome？

How can I ask the user if they'd like to save their username/password like Chrome?

html

javascript

form-submit

web-deployment

google-chrome-extension