Skip to content

Instantly share code, notes, and snippets.

@soraxas

soraxas/SurfingKeys.js

Last active November 3, 2023 21:09
Show Gist options
  • Save soraxas/6586260248ae78180aab64db489a0f75 to your computer and use it in GitHub Desktop.
Save soraxas/6586260248ae78180aab64db489a0f75 to your computer and use it in GitHub Desktop.
Download ZIP
SurfingKeys settings (vim keybindings for browser)
Raw
SurfingKeys.js
// git.io url: https://tinyurl.com/SurfingKeys-settings or https://git.io/JfXjB
// inspired by https://github.com/Foldex/surfingkeys-config/blob/master/config.js
// remove conflict with browser's history, download pannel toggle
// unmap('<Ctrl-j>');
// iunmap('<Ctrl-j>');
// vunmap('<Ctrl-j>');
// unmap('<Ctrl-h>');
// iunmap('<Ctrl-h>');
// vunmap('<Ctrl-h>');
// ---- Unmap -----
// Proxy Stuff
// unmap('spa');
// unmap('spb');
// unmap('spc');
// unmap('spd');
// unmap('sps');
// unmap('cp');
// unmap(';cp');
// unmap(';ap');
// // Emoji
// iunmap(":");
// // Misc
// unmap(';t');
// unmap('si');
// unmap('ga');
// unmap('gc');
// unmap('gn');
// unmap('gr');
// unmap('ob');
// unmap('og');
// unmap('od');
// unmap('oy');
// ---- Map -----
// // 2. simulate vimium's behaviour of using HLJK
map('H','S'); // History back
map('L','D'); // History back
map('J','E'); // Tab on left
map('K','R'); // Tab on Right
// map('<Ctrl-d>','d'); // map pange half up/down with C- prefix
// map('<Ctrl-u>','e'); // map pange half up/down with C- prefix
map('`', "'"); // map vim mark key to backtick
map('oo','t'); // map oo as omni bar
// Misc
map('<Alt-f>', 'cf');
map('<Alt-y>', 'ya');
map('P', 'cc');
map('F', 'C');
map('gf', 'w');
// map('`', '\'');
// map('o', 'go');
// History Back/Forward
// map('H', 'S');
// map('L', 'D');
// Tab Delete/Undo
map('D', 'x');
mapkey('d', '#3Close current tab', function() {
RUNTIME("closeTab");
});
mapkey('u', '#3Restore closed tab', function() {
RUNTIME("openLast");
});
// Scroll Page Down/Up
mapkey('<Ctrl-d>', '#9Forward half page', function() { Normal.feedkeys('3j'); });
mapkey('<Ctrl-u>', '#9Back half page', function() { Normal.feedkeys('3k'); });
mapkey('<Ctrl-Space>', '#9Page Up', function() { Normal.feedkeys('5k'); });
// Tab Next/Prev
// map('<Alt-j>', 'R');
// map('<Alt-k>', 'E');
// Next/Prev Page
// map(']', ']]');
// map('[', '[[');
// mapkey('K', '#1Click on the previous link on current page', previousPage);
// mapkey('J', '#1Click on the next link on current page', nextPage);
// Move Tab Left/Right
// map('>', '>>');
// map('<', '<<');
// 3. Select search result in Omnibar
// <alt-[jkhl]>
cmap('<Alt-j>','<Ctrl-n>');
cmap('<Alt-k>','<Ctrl-p>');
cmap('<Alt-l>','<Ctrl-.>');
cmap('<Alt-h>','<Ctrl-,>');
// 4. Extra js
// Communicate with other extensions
function openTobyHtml(){
tabOpenLink("chrome-extension://gfdcgfhkelkdmglklfbndgopaihmoeci/toby.html");
}
mapkey('ot', 'Open toby extension', openTobyHtml);
// 5. set theme for ScriptingKeys UI
// ---- Hints ----
// Hints have to be defined separately
// Uncomment to enable
// Tomorrow-Night
// /* -- DELETE LINE TO ENABLE THEME
Hints.style('border: solid 2px #373B41; color:#52C196; background: initial; background-color: #1D1F21;');
Hints.style("border: solid 2px #373B41 !important; padding: 1px !important; color: #C5C8C6 !important; background: #1D1F21 !important;", "text");
Visual.style('marks', 'background-color: #52C19699;');
Visual.style('cursor', 'background-color: #81A2BE;');
// -- DELETE LINE TO ENABLE THEME */
// Nord
/* -- DELETE LINE TO ENABLE THEME
Hints.style('border: solid 2px #4C566A; color:#A3BE8C; background: initial; background-color: #3B4252;');
Hints.style("border: solid 2px #4C566A !important; padding: 1px !important; color: #E5E9F0 !important; background: #3B4252 !important;", "text");
Visual.style('marks', 'background-color: #A3BE8C99;');
Visual.style('cursor', 'background-color: #88C0D0;');
-- DELETE LINE TO ENABLE THEME */
// Doom One
/* -- DELETE LINE TO ENABLE THEME
Hints.style('border: solid 2px #282C34; color:#98be65; background: initial; background-color: #2E3440;');
Hints.style("border: solid 2px #282C34 !important; padding: 1px !important; color: #51AFEF !important; background: #2E3440 !important;", "text");
Visual.style('marks', 'background-color: #98be6599;');
Visual.style('cursor', 'background-color: #51AFEF;');
-- DELETE LINE TO ENABLE THEME */
// Monokai
/* -- DELETE LINE TO ENABLE THEME
Hints.style('border: solid 2px #2D2E2E; color:#F92660; background: initial; background-color: #272822;');
Hints.style("border: solid 2px #2D2E2E !important; padding: 1px !important; color: #A6E22E !important; background: #272822 !important;", "text");
Visual.style('marks', 'background-color: #A6E22E99;');
Visual.style('cursor', 'background-color: #F92660;');
-- DELETE LINE TO ENABLE THEME */
settings.theme = `
/* Edit these variables for easy theme making */
:root {
/* Font */
--font: 'Source Code Pro', Ubuntu, sans;
--font-size: 12;
--font-weight: bold;
/* -------------- */
/* --- THEMES --- */
/* -------------- */
/* -------------------- */
/* -- Tomorrow Night -- */
/* -------------------- */
/* -- DELETE LINE TO ENABLE THEME
--fg: #C5C8C6;
--bg: #282A2E;
--bg-dark: #1D1F21;
--border: #373b41;
--main-fg: #81A2BE;
--accent-fg: #52C196;
--info-fg: #AC7BBA;
--select: #585858;
-- DELETE LINE TO ENABLE THEME */
/* Unused Alternate Colors */
/* --cyan: #4CB3BC; */
/* --orange: #DE935F; */
/* --red: #CC6666; */
/* --yellow: #CBCA77; */
/* -------------------- */
/* -- NORD -- */
/* -------------------- */
/* -- DELETE LINE TO ENABLE THEME
fg: #e5e9f0;
bg: #3b4252;
bg-dark: #2E3440;
border: #4C566A;
main-fg: #88C0D0;
accent-fg: #A3BE8C;
info-fg: #5E81AC;
select: #4C566A;
DELETE LINE TO ENABLE THEME */
/* Unused Alternate Colors */
/* --orange: #D08770; */
/* --red: #BF616A; */
/* --yellow: #EBCB8B; */
/* -------------------- */
/* -- DOOM ONE -- */
/* -------------------- */
/* -- DELETE LINE TO ENABLE THEME
--fg: #51AFEF;
--bg: #2E3440;
--bg-dark: #21242B;
--border: #282C34;
--main-fg: #51AFEF;
--accent-fg: #98be65;
--info-fg: #C678DD;
--select: #4C566A;
-- DELETE LINE TO ENABLE THEME */
/* Unused Alternate Colors */
/* --bg-dark: #21242B; */
/* --main-fg-alt: #2257A0; */
/* --cyan: #46D9FF; */
/* --orange: #DA8548; */
/* --red: #FF6C6B; */
/* --yellow: #ECBE7B; */
/* -------------------- */
/* -- MONOKAI -- */
/* -------------------- */
/* -- DELETE LINE TO ENABLE THEME
--fg: #F8F8F2;
--bg: #272822;
--bg-dark: #1D1E19;
--border: #2D2E2E;
--main-fg: #F92660;
--accent-fg: #E6DB74;
--info-fg: #A6E22E;
--select: #556172;
-- DELETE LINE TO ENABLE THEME */
/* Unused Alternate Colors */
/* --red: #E74C3C; */
/* --orange: #FD971F; */
/* --blue: #268BD2; */
/* --violet: #9C91E4; */
/* --cyan: #66D9EF; */
}
/* ---------- Generic ---------- */
.sk_theme {
background: var(--bg);
color: var(--fg);
background-color: var(--bg);
border-color: var(--border);
font-family: var(--font);
font-size: var(--font-size);
font-weight: var(--font-weight);
}
input {
font-family: var(--font);
font-weight: var(--font-weight);
}
.sk_theme tbody {
color: var(--fg);
}
.sk_theme input {
color: var(--fg);
}
/* Hints */
#sk_hints .begin {
color: var(--accent-fg) !important;
}
#sk_tabs .sk_tab {
background: var(--bg-dark);
border: 1px solid var(--border);
color: var(--fg);
}
#sk_tabs .sk_tab_hint {
background: var(--bg);
border: 1px solid var(--border);
color: var(--accent-fg);
}
.sk_theme #sk_frame {
background: var(--bg);
opacity: 0.2;
color: var(--accent-fg);
}
/* ---------- Omnibar ---------- */
/* Uncomment this and use settings.omnibarPosition = 'bottom' for Pentadactyl/Tridactyl style bottom bar */
/* .sk_theme#sk_omnibar {
width: 100%;
left: 0;
} */
.sk_theme .title {
color: var(--accent-fg);
}
.sk_theme .url {
color: var(--main-fg);
}
.sk_theme .annotation {
color: var(--accent-fg);
}
.sk_theme .omnibar_highlight {
color: var(--accent-fg);
}
.sk_theme .omnibar_timestamp {
color: var(--info-fg);
}
.sk_theme .omnibar_visitcount {
color: var(--accent-fg);
}
.sk_theme #sk_omnibarSearchResult ul li:nth-child(odd) {
background: var(--bg-dark);
}
.sk_theme #sk_omnibarSearchResult ul li.focused {
background: var(--border);
}
.sk_theme #sk_omnibarSearchArea {
border-top-color: var(--border);
border-bottom-color: var(--border);
}
.sk_theme #sk_omnibarSearchArea input,
.sk_theme #sk_omnibarSearchArea span {
font-size: var(--font-size);
}
.sk_theme .separator {
color: var(--accent-fg);
}
/* ---------- Popup Notification Banner ---------- */
#sk_banner {
font-family: var(--font);
font-size: var(--font-size);
font-weight: var(--font-weight);
background: var(--bg);
border-color: var(--border);
color: var(--fg);
opacity: 0.9;
}
/* ---------- Popup Keys ---------- */
#sk_keystroke {
background-color: var(--bg);
}
.sk_theme kbd .candidates {
color: var(--info-fg);
}
.sk_theme span.annotation {
color: var(--accent-fg);
}
/* ---------- Popup Translation Bubble ---------- */
#sk_bubble {
background-color: var(--bg) !important;
color: var(--fg) !important;
border-color: var(--border) !important;
}
#sk_bubble * {
color: var(--fg) !important;
}
#sk_bubble div.sk_arrow div:nth-of-type(1) {
border-top-color: var(--border) !important;
border-bottom-color: var(--border) !important;
}
#sk_bubble div.sk_arrow div:nth-of-type(2) {
border-top-color: var(--bg) !important;
border-bottom-color: var(--bg) !important;
}
/* ---------- Search ---------- */
#sk_status,
#sk_find {
font-size: var(--font-size);
border-color: var(--border);
}
.sk_theme kbd {
background: var(--bg-dark);
border-color: var(--border);
box-shadow: none;
color: var(--fg);
}
.sk_theme .feature_name span {
color: var(--main-fg);
}
/* ---------- ACE Editor ---------- */
#sk_editor {
background: var(--bg-dark) !important;
height: 50% !important;
/* Remove this to restore the default editor size */
}
.ace_dialog-bottom {
border-top: 1px solid var(--bg) !important;
}
.ace-chrome .ace_print-margin,
.ace_gutter,
.ace_gutter-cell,
.ace_dialog {
background: var(--bg) !important;
}
.ace-chrome {
color: var(--fg) !important;
}
.ace_gutter,
.ace_dialog {
color: var(--fg) !important;
}
.ace_cursor {
color: var(--fg) !important;
}
.normal-mode .ace_cursor {
background-color: var(--fg) !important;
border: var(--fg) !important;
opacity: 0.7 !important;
}
.ace_marker-layer .ace_selection {
background: var(--select) !important;
}
.ace_editor,
.ace_dialog span,
.ace_dialog input {
font-family: var(--font);
font-size: var(--font-size);
font-weight: var(--font-weight);
}
`;
// =========================================
// Search Engines
removeSearchAliasX('b', 's');
removeSearchAliasX('d', 's');
// removeSearchAliasX('g', 's');
removeSearchAliasX('h', 's');
removeSearchAliasX('w', 's');
removeSearchAliasX('y', 's');
removeSearchAliasX('s', 's');
addSearchAliasX('amz', 'amazon', 'https://www.amazon.com/s/ref=nb_sb_noss?url=search-alias=aps&field-keywords=', 's');
addSearchAliasX('aur', 'aur', 'https://aur.archlinux.org/packages/?O=0&SeB=nd&K=', 's');
addSearchAliasX('aw', 'arch wiki', 'https://wiki.archlinux.org/index.php?title=Special:Search&search=', 's');
addSearchAliasX('d', 'duckduckgo', 'https://duckduckgo.com/?q=', 's');
addSearchAliasX('gh', 'github', 'https://github.com/search?utf8=✓&q=', 's');
addSearchAliasX('r', 'reddit', 'https://old.reddit.com/r/', 's');
addSearchAliasX('st', 'steam', 'https://store.steampowered.com/search/?term=', 's');
addSearchAliasX('w', 'wikipedia', 'https://en.wikipedia.org/wiki/Special:Search/', 's');
addSearchAliasX('y', 'invidious', 'https://invidio.us/search?q=', 's');
// =========================================
Front.registerInlineQuery({
url: function(q) {
return `http://dict.youdao.com/w/eng/${q}/#keyfrom=dict2.index`;
},
parseResult: function(res) {
var parser = new DOMParser();
var doc = parser.parseFromString(res.text, "text/html");
var collinsResult = doc.querySelector("#collinsResult");
var authTransToggle = doc.querySelector("#authTransToggle");
var examplesToggle = doc.querySelector("#examplesToggle");
if (collinsResult) {
collinsResult.querySelectorAll("div>span.collinsOrder").forEach(function(span) {
span.nextElementSibling.prepend(span);
});
collinsResult.querySelectorAll("div.examples").forEach(function(div) {
div.innerHTML = div.innerHTML.replace(/<p/gi, "<span").replace(/<\/p>/gi, "</span>");
});
var exp = collinsResult.innerHTML;
return exp;
} else if (authTransToggle) {
authTransToggle.querySelector("div.via.ar").remove();
return authTransToggle.innerHTML;
} else if (examplesToggle) {
return examplesToggle.innerHTML;
}
}
});
// My own overwritten settings
Hints.characters = 'asdfgyuiopqwertnmzxcvb';
settings.defaultSearchEngine = 's';
settings.hintAlign = 'left';
// settings.omnibarPosition = 'bottom';
settings.focusFirstCandidate = false;
settings.focusAfterClosed = 'last';
settings.scrollStepSize = 200;
// settings.scrollStepSize = 150;
// settings.tabsThreshold = 7;
settings.modeAfterYank = 'Normal';
settings.hintShiftNonActive = true;
// https://stackoverflow.com/questions/12317049/how-to-split-a-long-regular-expression-into-multiple-lines-in-javascript
const createRegExp = (str, opts) => new RegExp(str.raw[0].replace(/\s/gm, ""), opts || "i");
settings.blacklistPattern = createRegExp`
inbox.google.com.*|
overleaf.com|
trello.com|
duolingo.com|
youtube.com|
mail.google.com.*/
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment