Deleting Chrome Searched History with Javascript

#chrome

#history

#chromium

#dom

#google chrome

#javascript

A main defect in Google Chome history that it doesn't provide a simple handy way to delete all items based on search results, and that confuses a little bit.

I tried to build my own solution, and as chome uses html interface in the configuration panels it was easy to play with the interface manipulating the DOM elements using javascript and with the help of the dev tools.

First I opened the history tap that has the url chome://history and searched for every "blah blah blah" related page I ever opened.
Tried to select all checkboxes from the page with the query function $$ implemented in the dev tools, those checkboxes have an id with the prefix "checkbox-" and a type attribute that has the value "checkbox", so I used the type attribute as selector in the query:

var chkboxes = $$("[type='checkbox']");

unfortunately, this returned null. Later I figured out that chome panels are mutli-framed, where the history data is maintained in a separate frame, and that's why I couldn't select checkboxes from the current page as they exist in a sub-page. Inspecting the page source you can find that the actual history page url is chrome://history-frame

open that page and retry the selector

var chkboxes = $$("[type='checkbox']");

Okay it works, I got the elements I wanted but that was a nodeList object which is hard to iterate, so I converted that to an array

var chkboxes = [].slice.call($$("[type='checkbox']"));

and for each element I wanted to check the checkbox so I turned its checked value to true

chkboxes.forEach(function(item){
    item.checked=true;
});

but remove button is disabled, we can enable that by unchecking then checking a checkbox, now you can press the "Remove selected items" button.

For those who find using the mouse is too sluggish and slow, you can press the button via javascript.
Enable the button which has the id "remove-selected":

var button = document.getElementById('remove-selected');
button.disabled = false;

give it a click:

button.click();

oh, there's still this confirmation dialog, let's program that, knowing the "Remove" button has the id "alertOverlayCancel" -and cancel button's id "alertOverlayOk" ... wat?-

document.getElementById('alertOverlayCancel').click()

Hooray ! all gone !

Let's put it all together,

function removeThemAll($$){
    //Check all checkboxes
    [].slice.call($$("[type='checkbox']")).forEach(
        function(item){item.checked=true;
    });
    //Enable and click remove all button
    var button = document.getElementById('remove-selected');
    button.disabled = false;
    button.click();
    //Confirm the removing request
    document.getElementById('alertOverlayCancel').click();
}