I'm looking for an add-on for any browser that could copy any particular web page element with all it's styles to clipboard to be paste-in and show someone.
The aim is to have an opportunity to quickly share a small part of my big project or to assist in writing an article about this HTML and CSS tricks or to inspect a part of someone's else work.
Any ideas? If no such plugin exist, I'll try to write is by myself.
This is probably too late. But if anyone out there looking for the same thing, use SnappySnippet. It was built by Konrad Dzwinel
Firefox Add-on
Chrome extension
More details
It's a great extension.
Haven't seen anyone mention such an extension and a quick search doesn't yield one. You'll probably have to build one yourself.
The excellent Firebug add-on already collects this information, it may be easier to make a Firebug plugin to add the push-button convenience.
Note that this question is tagged as Greasemonkey, but Greasemonkey is not the best tool for this job.
Have you tried the Web Developer addon (firefox/chrome)? Not sure if it does exactly what you are asking for, but it displays the source in-page, allowing you to select specific sections of the page/source. You can use this feature and then copy-paste the relevant element you want to work with. That is if I understood your needs. If not, please clarify...
Related
Is there anyway that I can manipulate HTML in a Facebook post? Is it possible to edit the code in anyway without having to install a third-party app?
Sure, depending on which browser you are using, there are different ways. Just search for dev tools [your browser] and you will find a way. Guess it's mostly F12.
Of course that's just locally, you won't be able to change the data on the server, if you're not allowed to.
Right Click > Investigate or F12 on the Element you want to edit and on your right there should open the code you can freely edit it to your liking
Also when posting on SO please provide more than just saying i want to do that.. How to do it? Tell us what you have tried or where you have researched before asking the Question
If i have a css file with a lot of modification codes, is it any webpage or developer tool that can recognize loading a page, what css codes are used?
You can try using the code coverage functionality that is part of chrome developer tools. Please find the link below to explore more. In a nut shell, it will give you an idea of how much percentage of the code, css/js is used by you application. In your case with css, it can give you which classes are not used.
You can find more details here in the Chrome Official Documentation or in this blog.
Problem
So we have quite a big project with lots of different Partial Views and a client side data binding framework (Knockout.js in our case).
One of the more problemtic parts is that is getting harder and harder to figure out which partial view is rendering an element that I see on my page.
So I need to debug this particular DIV. Okay, where do I find it?
Usually I try to find a very specific class or ID close by this element and do a search through the whole platform - far from ideal.
Question
So I was thinking about the following; tagging all elements (in debug mode) with the source file where they have been generated.
Right now I'm thinking about something like a precompiler that adds a data-source="" to every element. I might refer to an ID within a dictionary to prevent repeating all the long filenames.
Before I'm reinventing the wheel:
is there already something similar?
are there better alternatives?
We're using ASP.NET MVC, but any hints to how other platforms do this are perfect too.
If you are using Visual Studio, I highly recommend the Web Essentials extension. Among many great features, it has one called "Inspect Mode", part of the larger "Browser Link" feature, that does exactly what you are looking for; it identifies the file that a particular DOM element came from. It might be worth a shot if that option is open to you.
#Dirk, as per my understanding your issue is to easily identify the element/view. Adding data-source can be an option but before that have a look at this link
Editing Styles and DOM - Chrome Dev Tools
This page has many demonstrations which might be helpful to your problem. Furthermore, I do agree with Kevin suggestion.
So I take this class, and I'm way ahead of everyone else and a lot of people steal code from my website, I have already disabled right clicking but it's rather easy to get around this, is their any way to stop people from being able to view my source code?
tl;dr: Nope.
You could look into obfuscation, as well as CSS & JS minification.
"If you steal from one author, it’s plagiarism; Steal from many, it’s art."
No, if someone wants it, they will get it, you can make it harder but, you will just alienate your users from normal functionality, focus on your backend code.
If they steal your code, your lector will hopefully notice, either way they only hurt themselves.
Afaik the only way to hide your source code is if you put it on the server-side.
It is not possible from hiding client-side source code from users - sorry.
One suggestion would be stopping the user from right-clicking but that might cause you more problems...
You could render the html pages server side and convert them into images which get sent to the client. You could then have some image maps that handle clicking on the various locations.
There isn't a perfect solution (100% bullet proof) to protect your JavaScript code on the client side, however there are some tools on the market that can help you to protect your code:
Code Compression/Minification (Usually don't protect the code)
Google Closure (Free)
Uglify JS (Free)
Code Obfuscation/Compression/Minification
JScrambler (Paid, but is on my opinion the best one on the market)
Jasob (Paid)
Stunnix (Paid, it seems to be outdated)
Hope this answers your question!
I'm looking to create an extension for personal and possibly personal friend usage as well that simply changes a few colors that are displayed on a website I visit. I use Reddit Enhancement Suite, which has options for 'Night mode' that completely changes the color appearance of Reddit.
I would like to know how to edit or inject CSS code to this website so that the colors used in the website are what I would like them to be when I view the page. Mind you, this is of course just in my browser or in another Chrome browser using my extension.
You can do exactly as you said: you can inject a CSS file or code into the page.
The easiest way is through the manifest (look at the CSS property).
You only need to complete your manifest.json in order for Chrome to know in which pages it has to insert your CSS file into.
If you want to decide programatically when to insert the CSS, you can use chrome.tabs.insertCSS(), where you can insert a CSS file or just the code as a string.
Instead of an extension, you could also do it in a user script. Then you can simply use GM_addStyle, just like with Greasemonkey scripts. It's much simpler to write and more lightweight in terms of memory usage.
There are already extensions made for this. The one I use is called Stylish, which only modifies appearance using CSS3 only, and not html. There are other extensions as well, do some google searches and you will find a few more.