Skip to content

Instantly share code, notes, and snippets.

omarstreak / background.js
Last active May 28, 2021
Chrome API Extension
View background.js
//oauth2 auth
{'interactive': true},
//load Google's javascript client libraries
window.gapi_onload = authorize;
View pasteText.js
function pasteText({replacementText, cursorContext, activeQuery}: {replacementText: string; cursorContext: CursorContext; activeQuery: string;}){
// update text node content with replaced text
const lastIndex = cursorContext.textBeforeCursor.lastIndexOf(activeQuery);
cursorContext.textNode.textContent = cursorContext.textNodeContent.substring(0, lastIndex) + replacementText + cursorContext.textAfterCursor;
const selection = document.getSelection();
if(!selection) return;
// put cursor at the end of the replaced text
const range = document.createRange();
omarstreak / getCursorContext.js
Created Dec 6, 2017
Function to get information around cursor
View getCursorContext.js
/* @flow */
/* this code heavily borrows from */
export type CursorContext = {
textNode: Node;
textNodeParent: Node;
textNodeContent: string;
textBeforeCursor: string;
textAfterCursor: string;
omarstreak / cursorEvents.js
Created Dec 18, 2017
Kefir cursor handling
View cursorEvents.js
Kefir.fromEvents(input, 'keyup'),
Kefir.fromEvents(input, 'input'),
Kefir.fromEvents(input, 'click'),
Kefir.fromEvents(input, 'focus')
.onValue(() => /* do some stuff */)
omarstreak / positionMenu.js
Created Dec 6, 2017
Positioning the menu at the caret
View positionMenu.js
import containByScreen from 'contain-by-screen';
function positionMenuAtCaret({menuContainer, cursorContext, activeQuery}: {menuContainer: HTMLElement; cursorContext: CursorContext; activeQuery: string;}){
let textNode = cursorContext.textNode;
const menuLeftEdgeCharaterPosition = Math.max(cursorContext.cursorCharacterPosition - activeQuery.length, 0);
const range = document.createRange();
range.setStart(textNode, menuLeftEdgeCharaterPosition);
range.setEnd(textNode, menuLeftEdgeCharaterPosition);
View comment.js
/*! Streak launches new features to users every day. Users love our fast updates and quick response to bugs.
* In order to accomplish this we use the popular InboxSDK library ( Its used by
* several large organizations:
* Dropbox (
* HubSpot (
* Stripe (
* Giphy (
* Clearbit (
* The use of the library is similar to using other popular javascript libraries like jQuery and Underscore
View example.css
div input {
background-color: lightgreen;
border-radius: 5px;
padding: 0 5px;
View content.js
/* this file is the "app" file that loads the sdk and brings up the iframe */
function log() {
console.log.apply(console, ['iframe-test'].concat(;
InboxSDK.load(1, 'iframe-test').then(function(sdk) {
sdk.Compose.registerComposeViewHandler(function(composeView) {
title: "iframe test",
omarstreak / isStreakInstalled.js
Last active Apr 26, 2018
Check is Streak installed
View isStreakInstalled.js
var INSTALL_CHECK = 'chrome-extension://pnnfemgpilpdaojpnkjdgfgbnnjojfik/blank.png';
function isExtensionInstalled() {
//we have different logic for Chrome vs Safari
if(BrowserDetect.browser === 'Chrome'){
// the Chrome extension makes an image "web accessible", so we have the page try to load that image.
// if it loads successfully then the Streak extension is installed. If the image does not load successfully, then the image is not installed
var img = new Image();
img.onload = function() {
View contenteditable.html
<div contenteditable="true">
hi <span contenteditable="false">&lt;contact_givenName&gt;</span>,
How are you?