☰

CambridgeDict Routine WordSearch

Better egonomics for word search on Cambridge Dictionary (dictionary.cambridge.org). Inspired by (dict.cc).

// ==UserScript==
// @name         CambridgeDict Routine WordSearch
// @namespace    http://tampermonkey.net/
// @version      2024-12-02
// @description  Better egonomics for word search on Cambridge Dictionary (dictionary.cambridge.org). Inspired by (dict.cc).
// @author       Jared Tang
// @match        https://dictionary.cambridge.org/*/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant        none
// @license      MIT
// ==/UserScript==

/*
BACKGROUND INFO
The cambridge.dictionary.org website uses the AMP framework. (https://amp.dev/)
Our script exploits this fact.

FEATURES
[x] Highlight entire search text after pressing 'Enter'. (This allows me to begin typing the next word immediately without having to delete the previous word.)
[x] Begin typing from anywhere on the page to search words. (This means I do not need to click inside the search bar.)
[x] Reveal the search bar when I begin to type so I can see what I am typing.
*/

(function() {
    'use strict';
    const searchWord = document.querySelector('input[id="searchword"]');
    const stateHdrEl = document.querySelector('#stateHdr');
    const stateStore = JSON.parse(Array.from(stateHdrEl.children)[0].textContent);
    console.assert(searchWord !== null, 'searchWord is null');
    console.assert(stateHdrEl !== null, 'stateHdrEl is null');

    // Select entire search input after search
    searchWord.addEventListener('change', function selectSearchText(e) {
        searchWord.focus();
        searchWord.select();
    });

    // Reveal the search bar header
    searchWord.addEventListener('input', () => {
        console.debug('stateStore', stateStore);
        // Check AMP is available globally
        console.assert(AMP !== null, 'AMP is null');
        console.assert(AMP !== undefined, 'AMP is undefined');
        AMP.setState({ stateHdr: { searchDesk: true }});
    });

    window.addEventListener('keydown', () => {
        searchWord.focus();
    });
    // 1. The input element has 'autofocus' toggled.
    // 2. Searching for a word induces a page refresh.
    // Highlight search text immediately after search request
    // so we can start typing a new word immediately
    // without needing to delete the previous word.
    searchWord.focus();
    searchWord.select();
})();