kdzwinel / snappysnippet Goto Github PK
View Code? Open in Web Editor NEWChrome extension that allows easy extraction of CSS and HTML from selected element.
Chrome extension that allows easy extraction of CSS and HTML from selected element.
How would I use this if I wanted to get something happening live, for example,
if you go to this website...
http://steamcommunity.com/market/listings/440/Mann%20Co.%20Supply%20Crate%20Key
and you scroll down to "Recent Activity", you see there are people posting things, and updates are occuring. How would I be able to continue to scrape the website each time it updates?
Thank you in advance,
rycao18
In codepen it comes out empty, and the JSBin fails
Hi, thanks very much for this extension.
My main use of this extension, is to creating png file from the extracted CSS/HTML. Currently I am using phantomjs to generate the png file, and using ImageMagick to autocrop the transparent edges. But this requires some copy paste, and it's a bit slow to run phantomjs and ImageMagick.
Before generating the image, I would like the HTML/CSS texareas to be editable. Because for example if I want to generate image from a button, I might want to remove the button text.
Thanks for your useful tool, kdzwinel. Recently I found that generated CSS has a bug with quotation marks. For example...
Source file
div:after { content : ' '; }
Unfortunately, css resulte generated by SanppySinppet look like this...
div:after { content: '""'; }
is there any way to keep original class and div names?
what code chooses/generates the div/class names?
thanks
When testing SnappySnippet on elements where all units are em
I would prefer to get em
instead of calculated px
in the snippet-css. Maybe you can introduce a keep original units-checkbox in settings to satisfy the various use-cases, since there in some cases would be optimal to get re-calulated values (only px
) and in some cases to get the actual values, non-recalculated. (as I want now)
Great work on this plugin. I've missed it without knowing of its existence... ๐
Removing everything that has display:none
can shorten HTML and CSS.
Test case: http://kdzwinel.github.io/TheBadLuckGame/ - button on the intro screen, there is a hidden loader just above it.
Notice the minor difference in YouTube's upload button. The text of the original is lighter. See screenshot:
JSFiddle: http://jsfiddle.net/g9Lmc3gr/
Both rendered in Chrome. Wondering why that happens.
When nodes border isn't the same for all edges getComputedStyle
returns empty value for shorthand property border
. It make sense because border
property does allow setting only one style of border for all edges.
Workaround needed.
User feedback: "Do you have any documentation on each of the 6 settings and their impact by enabling/disabling?"
Reported via Chrome Web Store
CSS Styles of children elements contain styles of parent elements.
In the following example the color rule exists in the parent element style DIV_550
and the child element style SPAN_552 >>color: rgb(166, 166, 166);<<
For example:
HTML:
<div id="DIV_550"> <div id="DIV_551"> </div> <span id="SPAN_552"></span> </div>
CSS:
#DIV_550 { color: rgb(166, 166, 166); visibility: hidden; width: 484px; word-wrap: break-word; border: 0px none rgb(166, 166, 166); }/*#DIV_550*/
#SPAN_552 { color: rgb(166, 166, 166); outline: rgb(166, 166, 166) none 0px; }/*#SPAN_552*/
Is there a way to only copy the minimum amount of styles rules. I don't need the color style rule in #SPAN_552 because it is inherited anyway through its parent! Thanks!
Hello,
I am trying to inspect the element given in the image and its giving me an error: DOM snapshot could not be created. Could you please look into the issue and let me know when it will be fixed? I think your feature is amazing!
Cheers.
Original URL: http://www.templatemonster.com/demo/51109.html
It's a great idea, and a nice design!
Now here's the problem.
I tried both not logged in, and logged into JS Bin with my Git credentials. Same result in both cases.
I am running Chrome 32.0.1700.107 on Linux.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html>
Hi,
I would have preferred to keep as much of actual css rules as given in actual files in the final code so it works same in different screen sizes etc and there is no need to compare generated code with actual code. Can there be a option to generate scalable html?
This so I can take a full page snapshot of the element I extracted via SnappySnippet. Specifically, a PNG of the page (formerly an element of another page) regardless of height.
Awesome Web Extension Konrad!
I know Firefox has been adding more and more Web Extension APIs lately, so I thought I'd try it and see if it works.
The good news is, the extension can be installed, and the panel appears in DevTools.
Now, when you try to create a snippet, it stays frozen on the "Please wait. Creating a snapshot..." overlay, and there's an error in the console:
chrome.devtools.inspectedWindow.getResources is not a function InspectedContext.js:56
Indeed, I don't think this API has been implemented yet.
@rpl: do you know if this is planned? I think this will require some work on Firefox DevTools' back-end side, I think Chrome has a getResources
RDP command that they can just use here behind the scenes, but we don't , so we'd have some wiring to do in order to get the resources using different DevTools actors I guess.
Occasionally life becomes easier if you retain the names rather than renaming everything to DIV_1 and the like. This simple feature would make SS useful for a new category of use cases.
<img src='bla.png' />
โก๏ธ <img src='http://example.com/bla.png' />
Take this simple HTML code :
<!doctype html>
<html>
<head>
<style type="text/css" media="screen">
div {
width: 200px;
height: 200px;
background: red;
border-radius: 0 0 30px 30px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Using SnappySnippet to copy the style, you'll lose a part of border-radius
value :
border-radius: 0 0 30px 30px;
become border-radius: 0 30px 30px;
I guess we can find the same issue with other 4-val properties
Would be nice to be able to namespace the ids, for cases where you might use the script multiple times.
Would be super cool to have the HTML and CSS combined into one and sent to the clipboard, when the user clicks a new "Sent/copy to clipboard" button in the same row as "Send to JsBin" (etc).
http://jsbin.com/?html,css,output gives "Internal Server Error"
I made a wrong assumption that empty 'content' property means that we can skip the pseudoelement (:before/:after) in the CSS. That check needs to be replaced with something else (display === none?).
Hi,
Would it be possible to add the option to capture hover states on elements? Not sure how to flag this as an enhancement but it's not a bug :-)
Cheers,
Carl
Would be great to automatically include all relevant css keyframes
I was wondering if it's currently possible to prepend IDs. The use-case is I want to use two SnappySnippet's on the same page. E.g extracting out the header and the footer.
The two snippets seem to have conflicting IDs. Is there any way to stop the IDs from conflicting.
Either by prepending the IDs e.g #DIV_1_100
or by using parent CSS selectors e.g #snippet_1 .div_1
Fetching huge chunks of HTML takes a lot of time. I've done some profiling and it turns out that styleDeclarationToSimpleObject
is the main bottleneck. It should be possible to improve current solution.
<a class="mint-button-primary">
<div class="mint-button-primary__hole">
Add question
</div>
</a>
โก๏ธ
<a id="A_1"></a>
<div id="DIV_2">
Add question
</div>
๐ข
The 'content' property in pseudo-elements ':before' and ':after' gets an improper assignment of empty strings like this:
#DIV_1:after {
content: '""';
}
The proper value should be just the empty string ''. In other words, 'content' is being assigned an empty string ("") inside another string (the outer ''). So the outer string isn't empty when it should be, and that is a problem.
You can try it at https://www.nytimes.com on any article box featured in the main page. It happens in other websites too.
Hello:
I try the extention to get body element and can't see anything after sharing it to jsFiddle.
Other elements from inspected elements is correct. Twitter page's body is shared to jsFiddle correctly.
With the prefix option , it's possible to avoid the conflict with any other class name. Using class names instead of ID's makes the snippet much more reusable.
This is my use case:
I want to convert the snippet to a template for my web application. If I am using class names instead of ID's , I can reuse the code and apply the template to several different items (for example, product search results, chat messages, a list of resources, a data table,...).
I encountered this situation when i wanted to clip part of a page with image tags with the src elements pointing to relative paths, when clipping that section, the URLs were copied as is, instead i think with the help of regular expressions, test (^/, /$, contains http[s]?) and set, we can use absolute URLs, this might be an issue with all kinds of linked/embedded resources, not just images, but also, audio, video, javascript or style files. please look into it.
Is it possible to grab all the js associated with an element and it's children instead of just the html/css?
Keep user settings in the LocalStorage.
i see it create new id. How i set options no create new id
Trying to test your tool I tested it on the following form:
https://webapp.imgix.com/sign-up
And got the following result which seems a little messed:
While being immensely useful, the extension does not allow the extraction of the entire ancestor tree (up to the root element, with the ancestor elements' CSS), which may be crucial for getting the element's HTML in its surrounding context (e.g. when debugging layout issues)
can i fork it and make a firefox add-on? i really like your extension, but firefox is my browser of choice.
HI! I want to save snippets of elements with there hover states included. For now I can only save snippets for static elements. However, can't save the interactivity part of it.
For instance, in the following example
I can only copy this
http://codepen.io/pen/
content: " ";
becomes content: "'" "'";
great tool tho, loving it so far.
Installed legit, reloaded tab(s) then browser, then cleared cache... I have no changes (like the new menu/panel in the product screenshot) at all in DevTools!?!?! I must have a flag off, a settings no-no, etc.... Any thoughts?
Levi
Sending code to codepen brings in no content (either logged in or out).
At one point, I got lucky enough to get this plugin to work (but the output HTML and css seemed to be greatly missing), but since then (same session), I can't get it to work again. No matter what technique I use to select an element, I get the error message mentioned in the subject.
What am I missing?
Some snippets don't look the same in Firefox
An error message is displayed when an attempt to build a snippet for an element inside an iframe is made.
I'd like to include the HTML element in an email template, and to that the styles need to be set inline. It would be nice to have an option to make all the style information be put in "style" attribute of HTML nodes
Hey there, first of all thank you for this amazing tool! ๐
I was wondering is it possible to copy snippets retaining webfonts and iconfonts used? Simple test case, I went to Fontawesome page and tried copying home main features section, with this result http://codepen.io/Gruber/pen/EVaaMm.
I guess I'm asking something quite hard to achieve, or maybe I'm just blind and missed something obvious of your great tool! ๐
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.