それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

chrome履歴画面の検索結果を全部クリックする(shadowroot経由のDOM JS)

特定の検索結果の履歴を全部消したい

Googleの閲覧履歴を検索して消したい。消したいけど、「すべて消す」が無い。

検索結果をすべて選択がない。

すべて選択がないので、ちまちま消す必要があるだるすぎる。

f:id:takuya_1st:20220411152916p:plain

Devtoolでまとめてチェックしたい

ボタンがないならDevtoolでアクセスだ。ぜんぶチェックしてやる。

f:id:takuya_1st:20220411153153p:plain

React?Angular?かなshadowRootがある。

id=history-app に下に shadow-root(open) がある。このままでは css セレクタでアクセスできない。

f:id:takuya_1st:20220411153323p:plain

ShadowRootへアクセスするには

エレメントに shadowRootが生えている。これを使う。コンテキストを切り替えて要素をたどってしまえば、強引にクリックできる。この手はSeleniumなどでも使える。まぁ通常はスクリーンの指定領域にClickイベントを送るだろうけど、直接要素を触ることも出る。

const e = document.querySelector('#some-app')
SomeRoot = e.shadowRoot
SomeRoot.querySelector(' div ')
div.click()

履歴の検索結果をぜんぶクリックする。

Chrome のコンソールを使って

appRoot = $('#history-app').shadowRoot
historyRoot = appRoot.querySelector('#main-container #content #tabs-container history-list').shadowRoot
for ( e of historyRoot.querySelectorAll('iron-list history-item') ){
  e.shadowRoot.querySelector('cr-checkbox#checkbox.no-label').click()
}

コンソールに貼り付けて

f:id:takuya_1st:20220411153750p:plain

実行

f:id:takuya_1st:20220411153800p:plain

一気に選択できた。

f:id:takuya_1st:20220411153821p:plain

インフィニット・ロード

無限ロードなので、スクロールバーが最下部まで行かないと、次がロードされないんので、全部選択したつもりでも残ることはある。

非表示もクリックしてしまう。

ざっと書いただけなので、非表示になってるAppもクリックしてしまうので、エラーになることがある。

shadowrootへのアクセス方法

Shadowrootへの強引なアクセス方法を覚えておくと、一番低レイヤなので、Seleniumなどでスクレーピングするときに使えそう。