Choose Search engine in Address bar

tam710562

What?
This mod will add a box to select a search engine in the dropdown when searching in the address bar.

Demo

2021.02.24_23.38.37.gif

Installation
You can learn how to install here.

Javascript:

/*
 * Choose Search engine in Address bar 
 * Written by Tam710562
 */

(function () {
  'use strict';

  const gnoh = {
    generateUUID: function (ids) {
      let d = Date.now() + performance.now();
      let r;
      const id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
        r = (d + Math.random() * 16) % 16 | 0;
        d = Math.floor(d / 16);
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
      });

      if (Array.isArray(ids) && ids.includes(id)) {
        return this.generateUUID(ids);
      }
      return id;
    },
    addStyle: function (css, id, isNotMin) {
      this.styles = this.styles || {};
      if (Array.isArray(css)) {
        css = css.join(isNotMin === true ? '\n' : '');
      }
      id = id || this.generateUUID(Object.keys(this.styles));
      this.styles[id] = this.createElement('style', {
        html: css || '',
        'data-id': id
      }, document.head);
      return this.styles[id];
    },
    encode: {
      regex: function (str) {
        return !str ? str : str.replace(/[-\/\\^$*+?.()|[]{}]/g, '\\$&');
      }
    },
    createElement: function (tagName, attribute, parent, inner, options) {
      if (typeof tagName === 'undefined') {
        return;
      }
      if (typeof options === 'undefined') {
        options = {};
      }
      if (typeof options.isPrepend === 'undefined') {
        options.isPrepend = false;
      }
      const el = document.createElement(tagName);
      if (!!attribute && typeof attribute === 'object') {
        for (const key in attribute) {
          if (key === 'text') {
            el.textContent = attribute[key];
          } else if (key === 'html') {
            el.innerHTML = attribute[key];
          } else if (key === 'style' && typeof attribute[key] === 'object') {
            for (const css in attribute.style) {
              el.style.setProperty(css, attribute.style[css]);
            }
          } else if (key === 'events' && typeof attribute[key] === 'object') {
            for (const event in attribute.events) {
              if (typeof attribute.events[event] === 'function') {
                el.addEventListener(event, attribute.events[event]);
              }
            }
          } else if (typeof el[key] !== 'undefined') {
            el[key] = attribute[key];
          } else {
            if (typeof attribute[key] === 'object') {
              attribute[key] = JSON.stringify(attribute[key]);
            }
            el.setAttribute(key, attribute[key]);
          }
        }
      }
      if (!!inner) {
        if (!Array.isArray(inner)) {
          inner = [inner];
        }
        for (let i = 0; i < inner.length; i++) {
          if (inner[i].nodeName) {
            el.append(inner[i]);
          } else {
            el.append(this.createElementFromHTML(inner[i]));
          }
        }
      }
      if (typeof parent === 'string') {
        parent = document.querySelector(parent);
      }
      if (!!parent) {
        if (options.isPrepend) {
          parent.prepend(el);
        } else {
          parent.append(el);
        }
      }
      return el;
    },
    createElementFromHTML: function (html) {
      return this.createElement('template', {
        html: (html || '').trim()
      }).content;
    },
    observeDOM: function (obj, callback, config) {
      const obs = new MutationObserver(function (mutations, observer) {
        if (config) {
          callback(mutations, observer);
        } else {
          if (mutations[0].addedNodes.length || mutations[0].removedNodes.length) {
            callback(mutations, observer);
          }
        }
      });
      obs.observe(obj, config || {
        childList: true,
        subtree: true
      });
    },
    override: function (obj, functionName, callback, conditon, runbefore) {
      this._overrides = this._overrides || {};
      let subKey = '';
      try {
        if (obj.ownerDocument === document) {
          this._overrides._elements = this._overrides._elements || [];
          const element = this._overrides._elements.find(function (item) {
            return item.element === obj;
          });
          let id;
          if (element) {
            id = element.id;
          } else {
            id = this.generateUUID(this._overrides._elements.map(function (item) {
              return item.id;
            }));
            this._overrides._elements.push({
              element: obj,
              id: id
            });
          }
          subKey = '_' + id;
        }
      } catch (e) { }
      const key = functionName + '_' + obj.constructor.name + subKey;
      if (!this._overrides[key]) {
        this._overrides[key] = [];
        obj[functionName] = (function (_super) {
          return function () {
            let result;
            let conditon = true;
            for (let i = 0; i < gnoh._overrides[key].length; i++) {
              conditon = conditon && (typeof gnoh._overrides[key][i].conditon !== 'function' && gnoh._overrides[key][i].conditon !== false || typeof gnoh._overrides[key][i].conditon === 'function' && !!gnoh._overrides[key][i].conditon.apply(this, arguments));
              if (conditon === false) {
                continue;
              }
              if (gnoh._overrides[key][i].runbefore === true) {
                gnoh._overrides[key][i].callback.apply(this, arguments);
              }
            }
            if (conditon) {
              result = _super.apply(this, arguments);
            }
            for (let i = 0; i < gnoh._overrides[key].length; i++) {
              if (gnoh._overrides[key][i].runbefore !== true) {
                const args = Array.from(arguments);
                args.push(result);
                gnoh._overrides[key][i].callback.apply(this, args);
              }
            }
            return result;
          };
        })(obj[functionName]);
      }

      this._overrides[key].push({
        callback: callback,
        conditon: conditon,
        runbefore: runbefore
      });
      return key;
    },
    getReactPropsKey: function (element) {
      if (!this.reactPropsKey) {
        if (!element) {
          element = document.getElementById('browser');
        } else if (typeof element === 'string') {
          element = document.querySelector(element);
        }
        if (!element || element.ownerDocument !== document) {
          return;
        }
        this.reactPropsKey = Object.keys(element).find(function (key) {
          return key.startsWith('__reactProps');
        });
      }
      return this.reactPropsKey;
    }
  };

  gnoh.addStyle([
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar { position: sticky; top: 0; right: 0; left: 0; background: var(--colorBg); height: 32px; box-shadow: 0px -1px var(--colorBorder) inset; z-index: 1; }',
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar button { background: transparent; border: 0; width: 32px; height: 32px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; }',
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar button:hover { background-color: var(--colorFgAlpha); }',
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar button.active { background: var(--colorBgIntense); border-left-color: var(--colorBorder); border-right-color: var(--colorBorder); border-top-color: var(--colorBorder); }',
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar button.disabled { pointer-events: none; }',
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar button:first-child { border-left-color: transparent; }'
  ], 'search-engines-in-address-bar');

  const settings = {
    oneClick: false,
    searchEngines: {
      default: undefined,
      defaultPrivate: undefined,
      engines: {}
    },
  };

  const pattern = {
    searchEngines: undefined
  };

  let searchEngineButtons;

  let reactPropsKey;

  function createPatternSearchEngines(searchEngineCollection) {
    settings.searchEngines = {
      default: undefined,
      defaultPrivate: undefined,
      engines: {}
    };
    pattern.searchEngines = undefined;
    if (searchEngineCollection.length > 0) {
      const regKeywords = [];
      searchEngineCollection.forEach(function (engine) {
        settings.searchEngines.engines[engine.keyword] = engine;
        regKeywords.push(gnoh.encode.regex(engine.keyword));
      });

      pattern.searchEngines = new RegExp('^(' + regKeywords.join('|') + ')\\s(.*)', 'i');
    }
  }

  vivaldi.searchEngines.getTemplateUrls().then(function (res) {
    createPatternSearchEngines(res.templateUrls);
  });

  vivaldi.searchEngines.onTemplateUrlsChanged.addListener(function () {
    vivaldi.searchEngines.getTemplateUrls().then(function (res) {
      createPatternSearchEngines(res.templateUrls);
    });
  });

  function createSearchEnginesInAddressBar(omniDropdown) {
    const searchEnginesInAddressBar = gnoh.createElement('div', {
      class: 'search-engines-in-address-bar'
    }, omniDropdown, null, {
      isPrepend: true
    });

    const addressfieldEl = document.querySelector('input[type="text"].url.vivaldi-addressfield');

    searchEngineButtons = [];

    Object.values(settings.searchEngines.engines).forEach(function (engine) {
      const searchEngineButton = gnoh.createElement('button', {
        class: 'search-engine-button',
        title: engine.keyword + ' : ' + engine.name,
        events: {
          mousedown: function (event) {
            event.preventDefault();
            event.stopPropagation();
            if (!addressfieldEl) {
              return;
            }
            const match = addressfieldEl.value.match(pattern.searchEngines);
            let value = '';
            if (match) {
              if (match[1] === engine.keyword && !settings.oneClick) {
                return;
              }
              value = engine.keyword + ' ' + match[2];
            } else {
              value = engine.keyword + ' ' + addressfieldEl.value;
            }
            if (settings.oneClick) {
              gnoh.observeDOM(addressfieldEl, function (mutations, observer) {
                addressfieldEl[reactPropsKey].onKeyDown(new KeyboardEvent('keydown', { key: 'Enter', metaKey: true }));
                observer.disconnect();
              }, {
                attributeFilter: ['value']
              });
              addressfieldEl[reactPropsKey].onChange({ currentTarget: { value: value } });
            } else {
              addressfieldEl[reactPropsKey].onChange({ currentTarget: { value: value } });
              setActiveSearchEngineButton(engine.keyword);
            }
          }
        }
      }, searchEnginesInAddressBar);
      const icon = engine.faviconUrl.startsWith('data:image') ? engine.faviconUrl : 'chrome://favicon/size/16@1x/iconurl/' + engine.faviconUrl + ' 1x,chrome://favicon/size/16@2x/iconurl/' + engine.faviconUrl + ' 2x';
      const searchEngineIcon = gnoh.createElement('img', {
        class: 'search-engine-icon',
        srcset: icon,
        width: 16,
        height: 16
      }, searchEngineButton);
      searchEngineButtons.push({
        keyword: engine.keyword,
        element: searchEngineButton
      });
    });

    const removeSearchEngineButton = gnoh.createElement('button', {
      class: 'remove-search-engine-button',
      events: {
        mousedown: function (event) {
          event.preventDefault();
          event.stopPropagation();
          if (!addressfieldEl) {
            return;
          }
          const match = addressfieldEl.value.match(pattern.searchEngines);
          let value = '';
          if (match) {
            value = match[2];
            addressfieldEl[reactPropsKey].onChange({ currentTarget: { value: value } });
            setActiveSearchEngineButton('');
          }
        }
      }
    }, searchEnginesInAddressBar, '<svg style="width:16px; height:16px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/></svg>');

    searchEngineButtons.push({
      keyword: '',
      element: removeSearchEngineButton
    });

    const match = addressfieldEl.value.match(pattern.searchEngines);
    setActiveSearchEngineButton(match ? match[1] : '');

    if (!addressfieldEl.dataset.searchEnginesInAddressBar) {
      addressfieldEl.dataset.searchEnginesInAddressBar = '';
      addressfieldEl.addEventListener('input', function (e) {
        const match = e.target.value.match(pattern.searchEngines);
        setActiveSearchEngineButton(match ? match[1] : '');
      });
    }
  }

  function setActiveSearchEngineButton(keyword) {
    searchEngineButtons.forEach(function (seb) {
      if (seb.keyword === keyword) {
        seb.element.classList.add('active');
        if (!settings.oneClick) {
          seb.element.classList.add('disabled');
        }
      } else {
        seb.element.classList.remove('active');
        if (!settings.oneClick) {
          seb.element.classList.remove('disabled');
        }
      }
    });
  }

  gnoh.override(HTMLDivElement.prototype, 'appendChild', function (element) {
    reactPropsKey = gnoh.getReactPropsKey(this);
    if (this[reactPropsKey] && this[reactPropsKey].className === 'observer' && element[reactPropsKey] && element[reactPropsKey].className.indexOf('OmniDropdown') > -1) {
      createSearchEnginesInAddressBar(element)
    }
  });
})();

Changelog

25/02/2021

Create the first version.
Add oneClick setting and Fix CSS errors

23/07/2021

Fix the error for Vivaldi Snapshot 4.1.2339.3

29/03/2022

Fix the error for Vivaldi Snapshot 5.2.2623.3

05/06/2022

Fix the bug that the search engine icon could not be displayed

08/08/2022

Fix error when setting oneClick to true

adacom

@tam710562

Snip-24.02.20.5703.png

my problem as i use a heavily modified theme/skin with tabs under address bar but it may also impact if tabbar is moved [have not checked]

i would guess some css will solve it - thats to work on

other than that an excellent mod

adacom

sorted - if anyone else has the problem - find this

'.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar { position: sticky; top: 0; right: 0; left: 0; background: var(--colorFgAlpha); height: 32px; box-shadow: 0px -1px var(--colorBorder) inset; }',

and add this before it

 '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar { margin-top: 25px; }',

change the margin-top value to suit

Dancer18

@tam710562 Great modification!!! Thank you! Very helpful!

Could you give a code to start search when clicking on any search-favicon? Would be save one click.
(I'm used to first type the item and then chose the search-engine and want to start searching immediately.)

tam710562

I have added an update to fix some CSS errors and add an option to search with one click.
@adacom Your tab bar is on top of the drop-down box and is causing the error even without this mod.

@Dancer18 Added options, you need to edit oneClick to true to turn on it .

Dancer18

@tam710562 said in Choose Search engine in Address bar:

onClick

Thank you, it works fine.
At first I didn't finde the code, because it is not onClick but oneClick. Please correct the item.

tam710562

@Dancer18 said in Choose Search engine in Address bar:

@tam710562 said in Choose Search engine in Address bar:

onClick

Thank you, it works fine.
At first I didn't finde the code, because it is not onClick but oneClick. Please correct the item.

A mistake due to habit

adacom

@tam710562 said in Choose Search engine in Address bar:

@adacom Your tab bar is on top of the drop-down box and is causing the error even without this mod.

i realise that and further realise it may be errors in my css - but its the best i can do so when things go wrong else where have to try and find ways round it

not ideal and maybe not 100% correct but if it works however bad the code then i am happy

stardepp

I pasted the code here but I still don't see any search engines? What am I doing wrong?

2021-03-01 07_52_14-Window.jpg

code3

My updated code, should move the search to the search bar if oneclick is true:

/*
 * Choose Search engine in Address bar
 * Written by Tam710562
 */

window.gnoh = Object.assign(window.gnoh || {}, {
  generateUUID: function (ids) {
    let d = Date.now() + performance.now();
    let r;
    const id = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
      r = (d + Math.random() * 16) % 16 | 0;
      d = Math.floor(d / 16);
      return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
    });

    if (Array.isArray(ids) && ids.includes(id)) {
      return this.generateUUID(ids);
    }
    return id;
  },
  addStyle: function (css, id, isNotMin) {
    this.styles = this.styles || {};
    if (Array.isArray(css)) {
      css = css.join(isNotMin === true ? '\n' : '');
    }
    id = id || this.generateUUID(Object.keys(this.styles));
    this.styles[id] = this.createElement('style', {
      html: css || '',
      'data-id': id
    }, document.head);
    return this.styles[id];
  },
  encode: {
    regex: function (str) {
      return !str ? str : str.replace(/[-/\\^$*+?.()|[]{}]/g, '\\$&');
    }
  },
  createElement: function (tagName, attribute, parent, inner, options) {
    if (typeof tagName === 'undefined') {
      return;
    }
    if (typeof options === 'undefined') {
      options = {};
    }
    if (typeof options.isPrepend === 'undefined') {
      options.isPrepend = false;
    }
    const el = document.createElement(tagName);
    if (!!attribute && typeof attribute === 'object') {
      for (const key in attribute) {
        if (key === 'text') {
          el.textContent = attribute[key];
        } else if (key === 'html') {
          el.innerHTML = attribute[key];
        } else if (key === 'style' && typeof attribute[key] === 'object') {
          for (let css in attribute.style) {
            el.style[css] = attribute.style[css];
          }
        } else if (key === 'events' && typeof attribute[key] === 'object') {
          for (let event in attribute.events) {
            if (typeof attribute.events[event] === 'function') {
              el.addEventListener(event, attribute.events[event]);
            }
          }
        } else if (typeof el[key] !== 'undefined') {
          el[key] = attribute[key];
        } else {
          if (typeof attribute[key] === 'object') {
            attribute[key] = JSON.stringify(attribute[key]);
          }
          el.setAttribute(key, attribute[key]);
        }
      }
    }
    if (!!inner) {
      if (!Array.isArray(inner)) {
        inner = [inner];
      }
      for (let i = 0; i < inner.length; i++) {
        if (inner[i].nodeName) {
          el.append(inner[i]);
        } else {
          el.append(this.createElementFromHTML(inner[i]));
        }
      }
    }
    if (typeof parent === 'string') {
      parent = document.querySelector(parent);
    }
    if (!!parent) {
      if (options.isPrepend) {
        parent.prepend(el);
      } else {
        parent.append(el);
      }
    }
    return el;
  },
  createElementFromHTML: function (html) {
    return this.createElement('template', {
      html: (html || '').trim()
    }).content;
  },
  override: function (obj, functionName, callback, conditon, runbefore) {
    this._overrides = this._overrides || {};
    let subKey = '';
    try {
      if (obj.ownerDocument === document) {
        this._overrides._elements = this._overrides._elements || [];
        const element = this._overrides._elements.find(function (item) {
          return item.element === obj;
        });
        let id;
        if (element) {
          id = element.id;
        } else {
          id = this.generateUUID(this._overrides._elements.map(function (item) {
            return item.id;
          }));
          this._overrides._elements.push({
            element: obj,
            id: id
          });
        }
        subKey = '_' + id;
      }
    } catch (e) { }
    const key = functionName + '_' + obj.constructor.name + subKey;
    if (!this._overrides[key]) {
      this._overrides[key] = [];
      obj[functionName] = (function (_super) {
        return function () {
          let result;
          let conditon = true;
          for (let i = 0; i < gnoh._overrides[key].length; i++) {
            conditon = conditon && (typeof gnoh._overrides[key][i].conditon !== 'function' && gnoh._overrides[key][i].conditon !== false || typeof gnoh._overrides[key][i].conditon === 'function' && !!gnoh._overrides[key][i].conditon.apply(this, arguments));
            if (conditon === false) {
              continue;
            }
            if (gnoh._overrides[key][i].runbefore === true) {
              gnoh._overrides[key][i].callback.apply(this, arguments);
            }
          }
          if (conditon) {
            result = _super.apply(this, arguments);
          }
          for (let i = 0; i < gnoh._overrides[key].length; i++) {
            if (gnoh._overrides[key][i].runbefore !== true) {
              gnoh._overrides[key][i].callback.apply(this, arguments);
            }
          }
          return result;
        };
      })(obj[functionName]);
    }

    this._overrides[key].push({
      callback: callback,
      conditon: conditon,
      runbefore: runbefore
    });
    return key;
  },
  getReactEventHandlersKey: function (element) {
    if (!this.reactEventHandlersKey) {
      if (!element) {
        element = document.getElementById('browser');
      } else if (typeof element === 'string') {
        element = document.querySelector(element);
      }
      if (!element || element.ownerDocument !== document) {
        return;
      }
      this.reactEventHandlersKey = Object.keys(element).find(function (key) {
        return key.startsWith('__reactEventHandlers');
      });
    }
    return this.reactEventHandlersKey;
  }
});

(function () {
  'use strict';

  gnoh.addStyle([
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar { overflow: hidden; position: sticky; top: 0; right: 0; left: 0; background: var(--colorBg); box-shadow: 0px -1px var(--colorBorder) inset; z-index: 1; }',
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar button { background: transparent; border: 0; width: 32px; height: 32px; border-radius: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; }',
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar button:hover { background-color: var(--colorFgAlpha); }',
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar button.active { background: var(--colorBgIntense); border-left-color: var(--colorBorder); border-right-color: var(--colorBorder); border-top-color: var(--colorBorder); }',
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar button.disabled { pointer-events: none; }',
    '.UrlBar-AddressField .OmniDropdown .search-engines-in-address-bar button:first-child { border-left-color: transparent; }'
  ], 'search-engines-in-address-bar');

  const settings = {
    oneClick: true,
    searchEngines: {
      default: undefined,
      defaultPrivate: undefined,
      engines: {}
    },
  };

  const pattern = {
    searchEngines: undefined
  };

  let searchEngineButtons;

  let reactEventHandlersKey;

  function createPatternSearchEngines(searchEngineCollection) {
    settings.searchEngines = {
      default: undefined,
      defaultPrivate: undefined,
      engines: {}
    };
    pattern.searchEngines = undefined;
    const engines = searchEngineCollection.engines.filter(e => e.removed !== true);
    if (engines.length > 0) {
      const regKeywords = [];
      engines.forEach(function (engine) {
        settings.searchEngines.engines[engine.keyword] = engine;
        regKeywords.push(gnoh.encode.regex(engine.keyword));
      });

      pattern.searchEngines = new RegExp('^(' + regKeywords.join('|') + ')\\s(.*)', 'i');
    }
  }

  chrome.storage.local.get({
    'SEARCH_ENGINE_COLLECTION': {
      engines: []
    }
  }, function (res) {
    createPatternSearchEngines(res.SEARCH_ENGINE_COLLECTION);
  });

  chrome.storage.local.onChanged.addListener(function (changes, namespace) {
    if (changes.SEARCH_ENGINE_COLLECTION) {
      createPatternSearchEngines(changes.SEARCH_ENGINE_COLLECTION.newValue);
    }
  });

  function createSearchEnginesInAddressBar(omniDropdown) {
    const searchEnginesInAddressBar = gnoh.createElement('div', {
      class: 'search-engines-in-address-bar'
    }, omniDropdown, null, {
      isPrepend: true
    });

    const addressfieldEl = document.querySelector('input[type="text"].url.vivaldi-addressfield');
	const searchfieldEl = document.querySelector('input[type="search"].vivaldi-searchfield');

    searchEngineButtons = [];

    Object.values(settings.searchEngines.engines).forEach(function (engine) {
      const searchEngineButton = gnoh.createElement('button', {
        class: 'search-engine-button',
        title: engine.keyword + ' : ' + engine.name,
        events: {
          mousedown: function (event) {
            event.preventDefault();
            event.stopPropagation();
            if (!addressfieldEl) {
              return;
            }
            const match = addressfieldEl.value.match(pattern.searchEngines);
            let value = '';
            if (match) {
              if (match[1] === engine.keyword && !settings.oneClick) {
                return;
              }
              value = engine.keyword + ' ' + match[2];
            } else {
              value = engine.keyword + ' ' + addressfieldEl.value;
            }
            if (settings.oneClick) {
		// Does this work???
              searchfieldEl[reactEventHandlersKey].onChange({ currentTarget: { value: value } });
		searchfieldEl.focus();
              // searchfieldEl[reactEventHandlersKey].onKeyDown(new KeyboardEvent('keydown', { key: 'Enter', metaKey: true }));
		document.querySelector(".SearchField-ExecuteSearchButton").click();
            } else {
              searchfieldEl[reactEventHandlersKey].onChange({ currentTarget: { value: value } });
              setActiveSearchEngineButton(engine.keyword);
            }
          }
        }
      }, searchEnginesInAddressBar);
      const searchEngineIcon = gnoh.createElement('img', {
        class: 'search-engine-icon',
        src: engine.faviconUrl,
        width: 16,
        height: 16
      }, searchEngineButton);
      searchEngineButtons.push({
        keyword: engine.keyword,
        element: searchEngineButton
      });
    });

    const removeSearchEngineButton = gnoh.createElement('button', {
      class: 'remove-search-engine-button',
      events: {
        mousedown: function (event) {
          event.preventDefault();
          event.stopPropagation();
          if (!addressfieldEl) {
            return;
          }
          const match = addressfieldEl.value.match(pattern.searchEngines);
          let value = '';
          if (match) {
            value = match[2];
            addressfieldEl[reactEventHandlersKey].onChange({ currentTarget: { value: value } });
            setActiveSearchEngineButton('');
          }
        }
      }
    }, searchEnginesInAddressBar, '<svg style="width:16px; height:16px" viewBox="0 0 24 24"><path fill="currentColor" d="M12,2C17.53,2 22,6.47 22,12C22,17.53 17.53,22 12,22C6.47,22 2,17.53 2,12C2,6.47 6.47,2 12,2M15.59,7L12,10.59L8.41,7L7,8.41L10.59,12L7,15.59L8.41,17L12,13.41L15.59,17L17,15.59L13.41,12L17,8.41L15.59,7Z"/></svg>');

    searchEngineButtons.push({
      keyword: '',
      element: removeSearchEngineButton
    });

    const match = addressfieldEl.value.match(pattern.searchEngines);
    setActiveSearchEngineButton(match ? match[1] : '');

    if (!addressfieldEl.dataset.searchEnginesInAddressBar) {
      addressfieldEl.dataset.searchEnginesInAddressBar = '';
      addressfieldEl.addEventListener('input', function (e) {
        const match = e.target.value.match(pattern.searchEngines);
        setActiveSearchEngineButton(match ? match[1] : '');
      });
    }
  }

  function setActiveSearchEngineButton(keyword) {
    searchEngineButtons.forEach(function (seb) {
      if (seb.keyword === keyword) {
        seb.element.classList.add('active');
        if (!settings.oneClick) {
          seb.element.classList.add('disabled');
        }
      } else {
        seb.element.classList.remove('active');
        if (!settings.oneClick) {
          seb.element.classList.remove('disabled');
        }
      }
    });
  }

  gnoh.override(HTMLDivElement.prototype, 'appendChild', function (element) {
    reactEventHandlersKey = gnoh.getReactEventHandlersKey(this);
    if (this[reactEventHandlersKey] && this[reactEventHandlersKey].className === 'observer') {
      if (element[reactEventHandlersKey] && element[reactEventHandlersKey].className.indexOf('ignore-react-onclickoutside OmniDropdown') > -1) {
        createSearchEnginesInAddressBar(element)
      }
    }
  });
})();

Dancer18

@tam710562 Unfortunately your code doesn't work in newest snapshot 4.1.2358.15.
Where must it be modified to get work again?

tam710562

@dancer18 I have updated mod to fix the problem

Dancer18

@tam710562 Oh thank you so much! It works!

Streptococcus

Why not just change the search engine in the search bar?

rrx

This post is deleted!

rrx

Why not just change the search engine in the search bar?

Does anyone else detest the people making these sorts of comments or is it just me

//MODEDIT: Edited for language. User is reminded to observe the Code of Conduct. Please try to avoid making harsh comments. Thanks!
~pafflick

//USEREDIT: Edited for language in a way that better reflects what was originally said while being less harsh.
~rrx

Pesala

@rrx I find your post far more offensive than a suggestion for a workaround to save a lot of coding and debugging. If the suggestion is not helpful to you, then ignore it, and carry on debugging. To despise a person for making a comment with good intentions is foolish, just because the comment is unhelpful to you. It might be helpful to others who come looking for solutions.

This is the modifications forum, so kudos to those who dedicated their free time to innovate, but time is precious, so why duplicate in the Address Field what is already available in the Search Field?

If the purpose is to save space on the Address Bar, showing the search as a button uses very little.

rrx

I'm not looking to offend people and I'm all for good suggestions, @Pesala. Here's the thing, though: what the user above said is A. evident to virtually any user on this forum, and B. not a suggestion.

It was an expression of obtuse narrow-mindedness aimed at the OP's mod, and if paraphrased, it reads "Having the search bar enabled and choosing the search engine from its drop down menu is a way that is convenient for me, so I assert it must be convenient for everyone else and declare this mod unnecessary".

And you're doing the very same thing. But newsflash: neither of you speak for everybody, and what's convenient for you personally might not be convenient for another user. Can't believe I have to spell this out on a forum of a browser whose main purpose is to provide users with unparalleled customization capabilities.

Dancer18

@rrx I am very thankful to have this mod of @tam710562 available, and I'm using it quite often, although I have other options to get to the preferred search engine.

As it is with all mods and features you are free to use them or not.

Talking against this mod i.e. isn't constructive and helpful. I'll be open for any of your constructive posts.

rrx

Read a little more carefully and you'll see that I am actually defending the mod, @Dancer18.

What is it with Vivaldi userbase sometimes