代码之家 › 专栏 › 技术社区 › Jarad

使用javascript单击所有Google Chrome“显示密码”图标

google-chrome javascript

Jarad · 技术社区 · 6 年前

在Chrome浏览器中,当处于“设置”>“管理密码”时: chrome://settings/passwords存在“显示密码”图标

我必须手动单击输入字段的每个“眼睛”图标以从只读状态更改为只读状态 type=“password” to type=“text” and display the password.

我很好奇如何使用javascript单击所有图标,一次显示每个站点的所有已保存密码。

<div class=“password column”>
<input id=“password”aria label=“password”class=“password field”readonly=“”
type=“password”disabled=“>
<paper icon button light id=“ShowPasswordButtonContainer”class=“icon visibility”>
<button id=“showPasswordButton”focus row control=“”focus type=“showPassword”
title=“显示密码”tabindex=“0”>
<paper ripple class=“circle”></paper ripple>
&按钮/按钮;
</纸张图标按钮灯>
<template is=“dom if”></template>
<span class=“password field text elide”id=“federed”hidden=“></span>
&L/DIV & GT;
< /代码> 

出于某种原因,当使用chrome javascriptconsoleinside chrome:


var buttons=document.getElementByID(“showPasswordButton”);
< /代码> 

变量buttonsisnull。


这对我来说更像是一个好奇的问题。我现在是一个有着良好的Python背景的javascript初学者。


我必须手动单击每个“眼睛”图标,输入字段才能从只读更改为只读type="password"到type="text"并显示密码。

我很好奇如何使用javascript点击所有图标,一次显示我为每个站点保存的所有密码。

<div class="password-column">
  <input id="password" aria-label="Password" class="password-field" readonly=""
         type="password" disabled="">
  <paper-icon-button-light id="showPasswordButtonContainer" class="icon-visibility">
    <button id="showPasswordButton" focus-row-control="" focus-type="showPassword"
            title="Show password" tabindex="0">
      <paper-ripple class="circle"></paper-ripple>
    </button>
  </paper-icon-button-light>
  <template is="dom-if"></template>
  <span class="password-field text-elide" id="federated" hidden=""></span>
</div>


出于某种原因,在使用chrome javascript时,我甚至无法选择元素。慰问铬内:

var buttons = document.getElementById("showPasswordButton");


变量buttons是null.

这对我来说更像是一个好奇的问题。我现在是一个有着良好的Python背景的javascript初学者。

1 回复 | 直到 6 年前

Josh Lee ZZ Coder 6 年前

您不能选择这些元素,因为它们位于阴影DOM中。

你可以试试穿影后代组合器 /deep/ 尽管它的命运是不确定的,因为它是v0的一部分,而不是v1影子dom。(例如,您只能从 querySelector 但是,Chrome暂时支持它。

> document.querySelectorAll('* /deep/ button#showPasswordButton[title="Show password"]')
NodeList(41)

(过滤掉那些标题是 Hide password )

通过devtools API,我们还可以访问chrome的 queryObjects 函数,它将在内存中查找特定类型的所有实例。

> queryObjects(HTMLButtonElement)
undefined
Array(122)

评估 查询对象 有点奇怪, undefined 中间是一条线索),所以我们必须 右键单击“存储为全局变量” 将它绑定到一个名称(两个 temp1 和 $_ ,方便)。

temp1
> $_.filter(b => b.id=='showPasswordButton' && b.title=='Show password')
(41)

您可能会注意到按钮的数量比列表的实际大小要小得多,因为当您滚动时,聚合物会快速呈现它们。当单击此按钮以发现基础数据模型时,可以暂停计算,您可以在调试器或源代码中四处查看以发现它正在执行的操作,但我将在这里留下一些表达式来使用:

> passwordManager = document.querySelector('* /deep/ passwords-section').passwordManager_
PasswordManagerImplÂ {}
> await new Promise(resolve => passwordManager.getPlaintextPassword(0, resolve))
{index: 0, plaintextPassword: "cisco"}

或 queryObjects(PasswordManagerImpl) ,再次绕过DOM,更自由地在堆中查找对象。

如果 深/ 不用任何替换,我们可以尝试使用treewalker/nodeiterator接口打开 shadowRoot 反过来,递归地。