Is that possible to store snippets in files and load into Chrome?
tiye opened this issue · 12 comments
With snippets saving in files, we may use Git, CoffeeScript, and any editor.
Is it possible to use it now?
Portability of the snippets is a very important feature that isn't completely defined yet. I also think an import/export from a list of URLs could be a way to handle this, but direct access to a folder could be very good. I know Firefox scratchpad allows you to open from files. Maybe @paulirish has more information about support coming in Chrome?
See the note about localStorage in https://developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets-saving.
I was able to see localStorage entries corresponding to my Snippets in the Resources panel of the Developer Tools window opened from the undocked[1] Developer Tools window showing the snippets (using Ctrl+Shift+I).
[1] devtools need to run in their separate (undocked) window so that Ctrl+Shift+I will inspect devtools instead of closing devtools.
@anaran so are you able to see / modify the snippets successfully using the localStorage? And just to be clear, you are talking about opening devtools on itself to do this, or are you able to do it in the normal devtools window?
@bgrins yes, opening on itself.
If you do that you'll see entries the following.
The key has the format
"revision-history|%s|%s|%s",
FILENAME, WebInspector.resourceTreeModel.mainFrame.loaderId, TIMESTAMP
The value is the file text content.
I have not tried modifying content via localStorage.setItem yet.
Adrian
localStorage.getItem('revision-history|Script snippet
#2|3096.14|1368717689495')
"var bad = true;"
On Sat, Oct 26, 2013 at 12:15 AM, Brian Grinstead
notifications@github.comwrote:
@anaran https://github.com/anaran so are you able to see / modify the
snippets successfully using the localStorage? And just to be clear, you are
talking about opening devtools on itself to do this, or are you able to do
it in the normal devtools window?—
Reply to this email directly or view it on GitHubhttps://github.com//issues/28#issuecomment-27130155
.
It's quite interesting, but since it requires opening devtools on itself and it isn't strongly documented (beyond being mentioned) I'm not sure if it is ready to put into the workflow yet. It would be quite neat if we had a script that could bootstrap all the snippets into the browser though. If you could come up with a proof of concept I would be interested in it :)
basic instructions...
- open devtools
- undock devtools into its own window
- cmd-opt-i (or whatever) again to open devtools again (inspecting the inspector)
- open console
var stringifiedSnippets = localStorage.getItem('scriptSnippets');copy(stringifiedSnippets);will copy to clipboard- open another chrome, repeat same actions
localStorage.setItem('scriptSnippets', <clipboard data from earlier>)
This doesnt merge snippets by duping against the name property but that'd be the next place to take it.
@anaran i'd love your help fleshing this out into a hackers guide if you could.
cc @addyosmani
@paulirish At step 5 or 8 you have to use JSON.stringify(...).
Otherwise you store something like that to the localStorage: "[object Object],[object Object],[object Object],[object Object],[object Object]"
Thanks for that tip to transfer snippets from one chrome to another!
@paulirish Thanks Paul!
I already have pushed a snippet pretty far along, supporting snippet import in Chrome canary and Chrome stable (was a bit more tricky).
I will push to github within hours or days, depending on how my testing plays out.
Would be good if snippets are also synced between devices as Chrome settings!