kdzwinel / snappysnippet Goto Github PK

View Code? Open in Web Editor NEW

1.1K 41.0 166.0 2.6 MB

Chrome extension that allows easy extraction of CSS and HTML from selected element.

JavaScript 40.37% CSS 53.52% HTML 6.11%

chrome-extension web-development jsbin

snappysnippet's People

Contributors

Stargazers

Watchers

Forkers

zhangtianyi1234 agile-website-development jsbin palimadra crdev davgit alexandrubaban carellano001 seanmtracey josedacosta bradparks imclab marcelovani raspat1 chinna1986 darielnoel anderson-easylogic ilovejs ahashem atojs jbenesch purrfectt victor-gt devangkantharia janewzhao leonardopasquini-infocorp afshinator webdev1001 cdht joshvar88 msylvia jeremys6 greatrepos mohamedaltaib cnnode shreychaturvedi123 qcgm1978 art2u anilkk codevlabs jsanch ddiazunsj modulexcite allanjun mnjstwins noscripter antback choullanaresh benbek du5t vistaxpman stefdev777 atouhou digideskio kevinrogerteng dinh ssnet-xyz wooodhead hhy5277 master2645 alphanissen gew637 eddieli postpcera xtremus fstfwd drmcnellis photomania achraf-jeday equalll nonconforme roman-murashov xbb123 juancho5312 abbasbaloch dewdad yuhaoju godhelpjun sidz1 jithinanchanattu 914955868 djhir rahulyhg koolkeith codeshif getaclue00 c0ns0le georg-malahov presleyhank jperl federicosan rathoresuryansh196 pisee alfie-max kartiksoneji hieubct mxbonn agrublev yoimhere mattslight

snappysnippet's Issues

browser compatibility

Some snippets don't look the same in Firefox

Extract DOM and CSS up to the root element

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)

Preserve settings

Keep user settings in the LocalStorage.

Make hrefs and srcs in HTML absolute.

<img src='bla.png' /> ➡️ <img src='http://example.com/bla.png' />

Very minor difference in button text color

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.

Add option to use class names instead of ID's

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,...).

Bug with CSS "content" property quotation marks.

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: '""'; }

Keep measurement units

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... 👍

Firefox Add-on

can i fork it and make a firefox add-on? i really like your extension, but firefox is my browser of choice.

class names are not preserved, replaced with generic names

When using SS to extract codes, the plugin seems to lose the original CSS classes on the elements and replaces them with generic names. I need to keep the class names. See screenshots for an example.
Am I using the extension incorrectly?

Inspected element:

Generated snippets:

Documentation for settings

User feedback: "Do you have any documentation on each of the 6 settings and their impact by enabling/disabling?"

Issue with border-radius

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

Can you give a link to download?

chrome store does not working a bit

Conversion of Relative URLs to Absolute URLs

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.

Preserving original class names

is there any way to keep original class and div names?

what code chooses/generates the div/class names?

thanks

Inherited styles not removed

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!

Fourth output target: copy to clipboard

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).

JS support?

Is it possible to grab all the js associated with an element and it's children instead of just the html/css?

Fourth output target: "open in new tab"

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.

Improve Snapshooter's performance

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.

The following form cannot be extracted correctly

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:

http://codepen.io/meysam-m/pen/RpVJBg

Add 'Generate PNG image'

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.

Add Option to Retain id's and class Names

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.

`border` property invalid when shorthand filter used

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.

https://developer.mozilla.org/en-US/docs/Web/CSS/border

Send to Codepen and JSBin doesn't work

In codepen it comes out empty, and the JSBin fails

Snippets not being sent to JS Bin, JSFiddle, CodePen

It's a great idea, and a nice design!

Now here's the problem.

When I ask to have a snippet made it does it, but there's no state change in the HTML or CSS windows. The text appears there, but it's grayed out. Seems like it shouldn't be.
When I click on Send to {CodePen,JS Bin,jsFIddle) I get a new tab but nothing is in any of the windows except for JSBin which gives me the markup below.

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>

Support for custom fonts missing

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! 😉

No change to DevTools after install...

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

Width Height calculated in pixels, it should be fluid

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?

How would we use this to get information from a website updating constantly?

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

Add ability to namespace the ids

Would be nice to be able to namespace the ids, for cases where you might use the script multiple times.

Add filter that removes HTML&CSS of nodes that are not visible

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.

'content' property with empty string is assign a non-empty string

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.

Error! DOM snapshot could not be created. Make sure that you have inspected some element.

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?

Feature: Prepending DOM/CSS IDs

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

DOM snapshot could not be created

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

Bug when css content is empty double quote.

When an element has content set to an empty string,

content: "";

It sets it to

content: '""';

Which means something that should look like this:

Looks like this:

Add support for Firefox

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.

The extension does not work for elements in iframes

An error message is displayed when an attempt to build a snippet for an element inside an iframe is made.

Inline style

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

Some pseudoelements missing in the CSS

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?).

JSBin support - Internal Error

http://jsbin.com/?html,css,output gives "Internal Server Error"

Add support for keyframes

Would be great to automatically include all relevant css keyframes

content on pseudoelements

content: " "; becomes content: "'" "'"; great tool tho, loving it so far.

Hover states

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

Codepen Support - Empty Pen

Sending code to codepen brings in no content (either logged in or out).

HTML cleanup plugin messes up the HTML structure

<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>

😢

Request to record Hover States and Responsiveness in Elements

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

http://charlottetang.com/

I can only copy this
http://codepen.io/pen/