整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

账号密码忘了别慌!一键扒出浏览器保存的密码

在的浏览器都有保存密码的功能,在登录账号的时候,选择保存密码的话,那么下次需要登录这个账号时,浏览器可以帮你搞定。

现在的浏览器可以帮你保存密码

然而问题来了,不手动输密码,长久如此就会把密码甚至账号给忘了,遇到换浏览器、重装系统或者换电脑的情况,没有了保存的账号密码,只能对着登录框干瞪眼吗?把浏览器之前保存的密码都扒出来,就可以解决问题!这就来为大家分享一下方法吧。

实际上,浏览器保存的密码很多都是明文保存的,安全性由系统密码确保,所以要扒出来并不难。浏览器自身也带有查看保存的密码的功能,例如Chrome在设置中就可以查看到,但并不能批量导出。因此,借助第三方工具导出浏览器保存的账号密码,是更好的方法。这里使用到个工具是“WebBrowserPassView”。

WebBrowserPassView官网地址:http://www.nirsoft.net/utils/web_browser_password.html

WebBrowserPassView是一款来自国外的绿色小软件,解压后直接运行即可。由于它会扒浏览器的密码,因此很多杀毒软件都会对其报毒,信任即可。

可能会报毒,添加信任即可

WebBrowserPassView支持多种浏览器,无论是Chrome、Firefox、IE、Opera等浏览器的密码,都可以一键扒出来。它的使用也非常简单,运行后,就可以看到主界面显示出各个浏览器存储的账号密码了。和单个浏览器只能到设置界面,一条条查看相比,这无疑方便得多。

主界面,各个浏览器中存储的密码都被扒了出来

如果发现缺少了某些密码,刷新即可

WebBrowserPassView的一大妙用,就是批量导出密码。在界面当中,你可以选择多条账号密码信息,点击右键批量复制,或者导出为HTML文件。有了这个功能,浏览器保存的所有密码都可以一下子全部扒出来,或许有些账号密码你甚至已经忘却了它的存在,但此时却又能再次呈现在你眼前了。

可以批量导出密码

可以把浏览器保存的账号、密码导出为HTML文件,查看、使用都很方便

总的来说,这的确是一款非常实用的工具。如果你忘了某个账号密码,而它是保存在你的浏览器当中的,WebBrowserPassView绝对能带给你惊喜。

责编:黎晓珊

日常业务开发,比如复制后增加版权信息,点击复制,等场景中需要进行复制粘贴的操作,以下是几种实现方案。

Clipboard API

Clipboard API 提供了响应剪贴板命令(剪切、复制和粘贴)与异步读写系统剪贴板的能力。从权限 API (Permissions API) 获取权限之后,才能访问剪贴板内容;如果用户没有授予权限,则不允许读取剪贴板内容。


可以使用全局的 Navigator.clipboard 来访问剪贴板。


Navigator.clipboard 属性返回 Clipboard 对象,所有操作都通过这个对象进行。


Clipboard 对象提供了四个方法,用来读写剪贴板。它们都是异步方法,返回 Promise 对象。


read( ) 方法


read() 方法可以从剪贴板读取任意数据,可以是文本数据,也可以是二进制数据(比如图片)。该方法需要用户明确给予许可。


read() 方法返回一个 Promise 对象。一旦该对象的状态变为 resolved,就可以获得一个数组,每个数组成员都是 ClipboardItem 对象的实例。


ClipboardItem对象表示一个单独的剪贴项,每个剪贴项都拥有types属性和 getType( ) 方法。


ClipboardItem.types属性返回一个数组,里面的成员是该剪贴项可用的MIME类型,比如某个剪贴项可以用HTML格式粘贴,也可以用纯文本格式粘贴,那么它就有两个MIME类型(text/htmltext/plain)。


ClipboardItem.getType(type)方法用于读取剪贴项的数据,返回一个Promise对象。该方法接受剪贴项的MIME类型作为参数,返回该类型的数据,该参数是必需的,否则会报错。

示例:

一篇文章Stimulus:连接HTML和JavaScript的桥梁,实现简单的controller,并学习了Stimulus是如何连接HTML与JavaScript的。现在我们使用Stimulus来实现复制文本到粘贴板的按钮。

比如说,我们现在有一个需求,就是帮助用户生成密码,在密码旁边放置一个按钮,点击按钮后密码就被拷贝到粘贴板上了,这样就方便用户使用这个密码了。

打开public/index.html,修改body内容,填充一个简单的按钮,如下:

<div>
    PIN: <input type="text" value="1234" readonly>
    <button>Copy to Clipboard</button>
</div>



下一步,创建src/controllers/clipboard_controller.js,然后添加一个copy()方法:

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    copy() {
    }
}

然后,给div添加data-controller=“clipboard”。只要是给元素添加了data-controller属性,Stimulus就会连接一个controller实例。

<div data-controller="clipboard">

我们还需要一个对输入框的引用,这样我们就可以在调用粘贴板API之前获取输入框的内容。给文本框添加data-clipboard-target=“source“:

PIN: <input data-clipboard-target="source" type="text" value="1234" readonly>

在controller中定义一个target,然后就可以通过this.sourceTarget访问文本框了。

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static targets = [ "source" ]
    
    copy() {
    }
}


解释一下这个targets:

当Stimulus加载你的controller类时,它会查看静态数组targets的字符串元素,对于每一个字符串,Stimulus会在controller中添加3个属性。在这里,对于“source”,会添加如下属性:

this.sourceTarget 在controller的域内的第一个source

this.sourceTargets 在controller的域内所有的source组成的一个数组

this.hasSourceTarget 在controller的域内是否有source


我们希望点击按钮时调用controller中的copy()方法,所以我们需要添加data-action=“clipboard#copy“

<button data-action="clipboard#copy">Copy to Clipboard</button>

你可以已经注意到在上面的动作描述符中省略了click->。那是因为Stimulus给button设置了click作为它默认的事件。


某些其他元素也有默认事件。下面是个全部列表:

元素

默认事件

a

click

button

click

details

toggle

form

submit

input

input

input type=“submit”

click

select

change

textarea

input

最终,在copy()方法中,我们获取输入框的内容,调用粘贴板API

copy() {
    navigator.clipboard.writeText(this.sourceTarget.value)
}


刷新页面,点击按钮,然后快捷键粘贴到Greet按钮前到输入框,可以看到1234。



到目前为止,在页面上同一时间只有一个controller实例。在页面上同时有一个controller的多个实例也是很正常的。


我们的controller是可以复用的,只要你需要在页面上添加复制内容的按钮,无论是哪个页面,只要把对应的属性值写好,我们的controller都是生效的。


还是上面的例子,再添加另外一个复制按钮:

<div data-controller="clipboard">
    PIN: <input data-clipboard-target="source" type="text" value="3737" readonly>
    <button data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</button>
</div>


刷新页面,验证一下两个复制按钮是否都生效。

我们再添加一个可以复制的元素,不用button,我们用a标签,

<div data-controller="clipboard">
    PIN: <input data-clipboard-target="source" type="text" value="6666" readonly>
    <a href="#" data-action="clipboard#copy" class="clipboard-button">Copy to Clipboard</a>
</div>



Stimulus允许我们使用任何元素,只要它设置了合适的data-action属性,就可以触发复制。

这个例子里,要注意一点,点击链接会使浏览器追踪a标签内的href属性跳转,可以取消这种默认行为,只需要在action中调用 event.preventDefault()就可以了。

copy(event) {
    event.preventDefault()    
    navigator.clipboard.writeText(this.sourceTarget.value)
}


还有另外一个方法,拷贝粘贴板上

copy(event) {
    event.preventDefault()    
    this.sourceTarget.select()
    document.execCommand("copy")
}


在本文中,我们看了一个在现实中把浏览器API包装在Stimulus的controller中的例子。还有一个controller的多个实例如何同时出现在页面上,我们还探索了actions和targets如何保持HTML和JavaScript的松散耦合。


下一篇文章,我们将优化一下这个复制粘贴板的功能,让它运行起来更加健壮。

Stimulus:浏览器不支持复制或者弱网条件下,怎么办?