Skip to content

Instantly share code, notes, and snippets.

@modulexcite

modulexcite/chrome_snippet_gui_export_import_2016.js

Forked from soundyogi/2018_chrome_snippet_gui_import_export.js
Created December 10, 2016 02:18
Show Gist options
  • Save modulexcite/dc730f3e731f22a7089ed4df2a5c6a68 to your computer and use it in GitHub Desktop.
Save modulexcite/dc730f3e731f22a7089ed4df2a5c6a68 to your computer and use it in GitHub Desktop.
Download ZIP
A snippet to export and import your chrome snippets
Raw
chrome_snippet_export_import_2016.js
/*
* Import / Export snippets from chrome (2016)
* hacked together by: http://github.com/soundyogi
* inspired by: aaran etc.
*/
void function(){
"use strict"
let_us("init tests", function(){
if(location.origin !== "chrome-devtools://devtools") throw Error("not in devtools of devtools")
ok(location.origin === "chrome-devtools://devtools", 'we are in devtools of devtools, good to go')
})
const style = `
<style>
grid {
display: flex;
-webkit-flex-flow: column;
display: flex;
align-items: center;
justify-content: center;
}
cell {
background: tomato;
width: 90vw;
min-height: 20vh;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
</style>
`
const markup = `
<grid>
<cell>
<label>sdsdsd</label>
<input type='checkbox'>
</cell>
<cell>
<input id="import" type='file' multiple='true'>Drop Files Here</input>
</cell>
<cell>
<select>
<option>Rename imported content</option>
<option>Import overwrites existing content</option>
</select>
</cell>
<cell>
<button id="export_json">export</button>
</cell>
</grid>
`
/* Main logic
*/
const main = create_window("menubar=false, height=700, width=700", "chrome snippets import/export")
main.document.body.innerHTML = style+markup
main.document
.getElementById("export_json")
.addEventListener("click", export_files)
main.document
.getElementById("import")
.addEventListener('change', import_files)
// helper functions
function import_files(event){
const files = event.target.files
const stack = Object.keys(files)
.forEach((key)=>{
const file = files[key]
const reader = new FileReader()
reader.onerror = (()=> {throw Error})
reader.onabort = (()=> {throw Error})
reader.onload = file_loaded
reader.readAsText(file)
})
}
function export_files(){
// TODO add export options and such
}
function file_loaded(event){
const content_string = event.target.result
debugger
get_prefs(function(prefs){
add_snippet(name, content_string, prefs)
})
}
function export_js(){
}
function export_json(files){
get_snippets(function(snippets){
const json_data = serialize({'snippets': snippets}, ['snippets', 'name', 'content'], 2)
download(json_data)
})
}
function download(data){
const Blob = new window.Blob([data],{
'type': 'text/utf-8'
})
const a = document.createElement('a')
a.href = URL.createObjectURL(Blob)
a.download = JSON.stringify(Date.now())
a.click()
}
function getDownloadFileName(count) {
var abbrevCount;
var d = new Date();
var fileName = 'chrome-snippets-' + count + '-'; //$NON-NLS-0$
fileName += d.getFullYear();
var month = d.getMonth() + 1;
fileName += "-" + ((month < 10) ? "0" + month : month); //$NON-NLS-0$ //$NON-NLS-1$
// TODO Please note getDay() returns the day of week,
// see http://www.ecma-international.org/ecma-262/5.1/#sec-15.9.5.16
var day = d.getDate();
fileName += "-" + ((day < 10) ? "0" + day : day); //$NON-NLS-0$ //$NON-NLS-1$
var hours = d.getHours();
fileName += "T" + ((hours < 10) ? "0" + hours : hours); //$NON-NLS-0$ //$NON-NLS-1$
var minutes = d.getMinutes();
fileName += ((minutes < 10) ? "0" + minutes : minutes); //$NON-NLS-0$
var seconds = d.getSeconds();
fileName += ((seconds < 10) ? "0" + seconds : seconds); //$NON-NLS-0$
var timeZoneOffset = -d.getTimezoneOffset();
var offsetMinutes = timeZoneOffset % 60;
var offsetHours = (timeZoneOffset - offsetMinutes) / 60;
// TODO FIXME >= 0 ?
fileName += (offsetHours > 0 ? "+" : "") + ((offsetHours < 10) ? "0" + offsetHours : offsetHours) + ((offsetMinutes < 10) ? "0" + offsetMinutes : offsetMinutes); //$NON-NLS-0$ //$NON-NLS-2$ //$NON-NLS-1$
fileName += '.json'; //$NON-NLS-0$
return fileName;
}
function get_prefs(cb){
InspectorFrontendHost.getPreferences(function(prefs){
cb(prefs)
})
}
function get_snippets(cb){
get_prefs(function(prefs){
cb(prefs.scriptSnippets)
})
}
function set_pref(name, data_string){
InspectorFrontendHost.setPreference(name, data_string)
}
function add_snippet(name, snippet_content_string, current_prefs){
const snippets_deserialized = deserialize(current_prefs.scriptSnippets)
const new_id_string = serialize(parseInt(current_prefs.scriptSnippets_lastIdentifier)+1)
if(is_duplicate(name, snippets_deserialized)) throw Error("script "+name+" already exists")
const new_snip = {
content: snippet_content_string,
id: new_id_string,
name: name
}
snippets_deserialized.push( new_snip )
set_pref( "scriptSnippets", serialize(snippets_deserialized) )
// update lastIdentifier
set_pref( "scriptSnippets_lastIdentifier", new_id_string )
}
function serialize(object, ...rest){
if(!object) throw Error("serialize needs an object")
return JSON.stringify(object, ...rest)
}
function deserialize(string){
if(typeof string !== "string") throw Error("deserialize needs a string")
if(string === "") throw Error("no snippets present")
return JSON.parse(string)
}
function is_duplicate(name, snippets_arr){
const result = snippets_arr.filter(function(snippet){
return snippet.name === name
})
if(result.length === 0) return false
return true
}
function reset_snippets(){
prompt("DELETE ALL SNIPPETS IN DEVTOOLS?")
set_pref("scriptSnippets", "[]")
set_pref("scriptSnippets_lastIdentifier", "0")
}
function create_window(options, title){
const w = window.open("", "", options)
w.document.title = title
return w
}
/*
* UNIT TESTS
*/
/*
let_us("reset all snippets", function(){
reset_snippets()
get_prefs(function(prefs){
var snippets_parsed = deserialize(prefs.scriptSnippets)
ok(snippets_parsed.length === 0, "all snippets are gone")
ok(prefs.scriptSnippets_lastIdentifier === "0", "last identifier should be 0")
})
})
let_us("insert a new snippet", function(){
get_prefs(function(prefs){
var snippets = prefs.scriptSnippets
var snippets_parsed = deserialize(snippets)
add_snippet("test_snippet", "var a = 4", prefs)
// make a seperate test out of this
get_prefs(function(prefs){
var snippets = prefs.scriptSnippets
var snippets_parsed = deserialize(snippets)
console.log(snippets_parsed)
var new_snippet = snippets_parsed.filter(function(snippet){
return snippet.name === "test_snippet"
})
ok(new_snippet.length === 1, "snippet is there!")
})
})
})
let_us("get the snippets and parse them, so the individual scripts can be iterated", function(){
get_prefs(function(prefs){
var snippets = prefs.scriptSnippets
var snippets_parsed = deserialize(snippets)
ok(snippets, "are defined")
ok(typeof snippets === "string", "are a string")
ok(typeof snippets_parsed == "object", "parsing successful")
snippets_parsed.map(function(snippet){
ok(snippet.content !== undefined, "snippets have content")
})
})
})
*/
// TODO: testint is not async
/* Nanoharness
*/
function let_us(msg,f){
console.log("__group: "+msg)
try { f() }
catch (exception) {
console.warn(exception.stack.replace(/:(\d+):(\d+)/g, "$& (Line $1, Column $2)"))
}
}
function ok(expr, msg){
log(expr, msg)
}
function log(expr, msg){
expr ? console.log("!pass "+msg) : console.log("?fail "+msg)
}
function html_log(){
const queue = []
return function log(expr, msg) {
queue.push( expr ? `!pass ${msg}` : `?fail ${msg}` )
}
}
}("thank you for reading this")
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment