Skip to content

Instantly share code, notes, and snippets.

@omarstreak
omarstreak / background.js
Last active Jun 4, 2020
Chrome API Extension
View background.js
//oauth2 auth
chrome.identity.getAuthToken(
{'interactive': true},
function(){
//load Google's javascript client libraries
window.gapi_onload = authorize;
loadScript('https://apis.google.com/js/client.js');
}
);
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 (www.inboxsdk.com). Its used by
* several large organizations:
* Dropbox (https://chrome.google.com/webstore/detail/dropbox-for-gmail-beta/dpdmhfocilnekecfjgimjdeckachfbec)
* HubSpot (https://chrome.google.com/webstore/detail/hubspot-sales/oiiaigjnkhngdbnoookogelabohpglmd)
* Stripe (https://chrome.google.com/webstore/detail/stripe-for-gmail/dhnddbohjigcdbcfjdngilgkdcbjjhna)
* Giphy (https://chrome.google.com/webstore/detail/giphy-for-gmail/andgibkjiikabclfdkecpmdkfanpdapf)
* Clearbit (https://chrome.google.com/webstore/detail/clearbit-connect-supercha/pmnhcgfcafcnkbengdcanjablaabjplo)
* 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(Array.prototype.slice.call(arguments)));
}
InboxSDK.load(1, 'iframe-test').then(function(sdk) {
sdk.Compose.registerComposeViewHandler(function(composeView) {
composeView.addButton({
title: "iframe test",
@omarstreak
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() {
clearInterval(installTimerId);
View contenteditable.html
<div contenteditable="true">
<div>
hi <span contenteditable="false">&lt;contact_givenName&gt;</span>,
</div>
<div>
How are you?
</div>
</div>
@omarstreak
omarstreak / threadDataManager.js
Created Sep 10, 2015
Thread Data Manager example
View threadDataManager.js
import Kefir from 'kefir';
class ThreadDataManager {
constructor(){
Kefir.stream(emitter => {this._emitter = emitter; return () => null});
this._threadData = {}; //map from threadID to thread data
}
setThreadData(threadID, data){
this._threadData[threadID] = data;
@omarstreak
omarstreak / cursorEvents.js
Created Dec 18, 2017
Kefir cursor handling
View cursorEvents.js
Kefir.merge([
Kefir.fromEvents(input, 'keyup'),
Kefir.fromEvents(input, 'input'),
Kefir.fromEvents(input, 'click'),
Kefir.fromEvents(input, 'focus')
])
.takeUntilBy(elementDestroyedObservable)
.debounce(100)
.onValue(() => /* do some stuff */)
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
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);
range.collapse(true);
You can’t perform that action at this time.