Улучшение web-интерфейса при помощи Javascript

Достаточно часто возникает желание изменить или расширить функциональность web-страниц, загруженных в браузер, удалить надоедливую рекламу и др. При помощи ранее рассмотренного расширения Stylish можно изменять стили CSS, но более мощные возможности предоставляют браузерные расширения, позволяющие писать собственные скрипты, как, например, Greasemonkey. Как правило, разработчики не спешат делать web-страницы удобными для пользователей. Значит, мы это сделаем сами на примере расширения и функциональности Thunkable X IDE.

Для работы с расширением Greasemonkey его необходимо установить в выбранный браузер. После этого нажимаем на пиктограмму мартышки, и в выпадающем меню выбираем команду New user script.

Откроется окно редактора с единственной пиктограммой для сохранения скрипта.

В начале кода указаны директивы по умолчанию. Дополнительно к ним нужно добавить директиву @include с указанием целевого домена, а ниже код скрипта.

// ==UserScript==
// @name     Thunkable
// @version  1
// @grant    none
// ==/UserScript==
// @include https://x.thunkable.com/projects/

document.addEventListener('keydown', function(event) {
// обработка нажатия на клавишу

if (event.altKey || event.metaKey) {

if (event.code == 'KeyW'){

let _el = findControl('Blocks');

if (_el){
        _el.click();
      }

} else if (event.code == 'KeyQ'){

let _el = findControl('Design');

if (_el){
        _el.click();
      }
      
    }  else if (event.code == 'KeyE'){
      
			let _tree = document.querySelectorAll('.tree-node-children-wrapper');
			
      for (let _i of _tree){
      
				_i.style.maxHeight = 0;
      }
    } else if (event.code == 'KeyR'){
      
			let _tree = document.querySelectorAll('.tree-node-children-wrapper');
			
      for (let _i of _tree){
      
				_i.style.maxHeight = "100%";
      }
    } else if (event.code == 'KeyB'){
			
      window.open("https://github.com/thunkable/thunkable-issues/issues", '_blank');
      
    } else if (event.code == 'KeyS'){
			
      let _url = document.location.href;
		  let _urlList = _url.split('/');
      let _share = "";
  		
      for (let _i = 0;_i < 5; _i++){
        
        _share += _urlList[_i] + "/";
      }
      
			_share += "project/properties/designer/";
      navigator.clipboard.writeText(_share)
      .then(() => {
      })
      .catch(err => {
        console.log('Error copy', err);
      });
    }
  }
});

document.addEventListener("click", function(e) {
// обработка щелчков мыши

let _target = e.target;

if (_target.hasAttribute('role')){

if (_target.textContent=="Advanced"){

_target.click();

let _downList = document.querySelectorAll('.ant-collapse-header');

for (let _i of _downList){

_i.click();
      }

}
  }
}, false);

Расширение функциональности происходит за счёт добавления горячих клавиш и автоматического раскрытия свёрнутых свойств на панели Advanced: