☰

Better CodeHS

Enable autocomplete, set Vim mode, and apply Gruvbox theme the CodeHS editor + Keybindings for submit and check code.

  1. // ==UserScript==
  2. // @name         Better CodeHS
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.1
  5. // @license MIT
  6. // @description  Enable autocomplete, set Vim mode, and apply Gruvbox theme the CodeHS editor + Keybindings for submit and check code.
  7. // @author       Qyoh
  8. // @icon         https://static1.codehs.com/img/logo.png
  9. // @match        https://codehs.com/*
  10. // @grant        none
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.     // Function to simulate a button click using the class or ID
  16.     function clickButton(buttonSelector) {
  17.         const button = document.querySelector(buttonSelector);
  18.         if (button) {
  19.             button.click();
  20.         } else {
  21.             console.error(`Button with selector "${buttonSelector}" not found.`);
  22.         }
  23.     }
  24.  
  25.     function switchToTestCasesTab() {
  26.         const testCasesTab = document.querySelector('.r.c');  // Replace with actual selector
  27.         if (testCasesTab) {
  28.             testCasesTab.click();
  29.         } else {
  30.             console.error('Test Cases tab not found.');
  31.         }
  32.     }
  33.  
  34.     // Add event listener for keydown events
  35.     document.addEventListener('keydown', (event) => {
  36.         // Custom keybind for "Submit and Continue" (e.g., Ctrl + Enter)
  37.         if (event.ctrlKey && event.key === 'Enter') {
  38.             event.preventDefault();
  39.             // Target the "Submit and Continue" button by class (adjust if necessary)
  40.             clickButton('.StyledButtonKind-sc-1vhfpnt-0.fSozsy.sc-bkbkJK.eraKfR');
  41.             console.log('"Submit and Continue" triggered.');
  42.         }
  43.  
  44.         // Custom keybind for "Check Code" (e.g., Alt + C)
  45.         if (event.altKey && event.key === 'c') {
  46.             event.preventDefault();
  47.             // Target the "Check Code" button by ID and class
  48.             switchToTestCasesTab();
  49.             clickButton('#grading-unit-test-run.btn.btn-main.spinner');
  50.             console.log('"Check Code" triggered.');
  51.         }
  52.     });
  53.  
  54.     console.log('CodeHS keybinds loaded.');
  55.  
  56.     // Wait for the Ace Editor to be available
  57.     function waitForAceEditor() {
  58.         const editorElement = document.getElementById("ace-editor"); // Change ID if necessary
  59.         if (editorElement) {
  60.             initializeAceEditor();
  61.         } else {
  62.             setTimeout(waitForAceEditor, 500); // Retry after 500ms
  63.         }
  64.     }
  65.  
  66.     // Initialize Ace Editor with custom settings
  67.     function initializeAceEditor() {
  68.         const editor = ace.edit("ace-editor");
  69.         ace.config.set("basePath", "https://cdnjs.cloudflare.com/ajax/libs/ace/1.9.6/");
  70.  
  71.         // Load language tools for autocomplete
  72.         ace.config.loadModule("ace/ext/language_tools", function(languageTools) {
  73.             editor.setOptions({
  74.                 enableBasicAutocompletion: true,
  75.                 enableLiveAutocompletion: true,
  76.                 enableSnippets: true
  77.             });
  78.         });
  79.  
  80.         // Set Vim keyboard mode
  81.         editor.setKeyboardHandler("ace/keyboard/vim");
  82.  
  83.         // Set theme to Gruvbox
  84.         editor.setTheme("ace/theme/gruvbox");
  85.  
  86.         console.log("Vim mode, Gruvbox theme, and autocomplete enabled.");
  87.     }
  88.  
  89.     // Start the script
  90.     waitForAceEditor();
  91. })();