我正在制作一个chrome扩展，它将充当类似于chrome的密码管理器，但具有一些不同的功能。
当用户提交登录表单时，我的扩展能够拦截提交并获取用户名和密码。现在我想显示一个弹出窗口，询问用户是否要保存密码。
如果可以在现有页面的顶部显示我自己的自定义HTML，那么它将在页面重新加载后消失。那么，我应该将数据存储在会话变量中吗？每次加载页面时，都要检查它是否有内容？
我不想再打开一扇窗户，它看起来很邋遢。有没有更好的方法来获取表单数据并在提交后加载页面后使用if？
这很棘手。。。
我自己不使用chrome扩展，但我确实编写了类似的GreaseMonkey扩展。
首先，让我说这是个坏主意。。。这里有一些非常重要的安全问题，但我会回答你如何处理。
第一步是告知页面加载何时恰好在提交之后(而不是通过书签或链接打开或在新选项卡中打开)。
我知道的唯一方法是链接到window.name属性，该属性在页面加载之间保持不变。
如果说这是无稽之谈，那是真的。说它的脆弱性会更真实。它甚至可能突然在某些浏览器下停止工作。
但是，这是我所知道的唯一方法。
所以。。你的步伐是。
- 确定这是否是一个值得保存的表单
- 挂接到
form.submit并保存URL、用户名和密码。如果页面使用ajax或挂接到form.submit本身，则所有赌注都将取消 - 在
window.name中设置标志 - 让页面重新加载
- 查看页面是否已登录。很可能是查看页面上是否有
password字段 - 看看你在
window.name中的标志是否在那里——这个页面是从登录加载的 - 清除window.name标志
- 如果没有密码字段，则弹出一个浮动div，要求保存信息
- 保存它
这可以使用事件脚本和内容脚本的组合来完成。
使用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;
}
});