My college has some web software that is absolutely horrific and I want to redesign it locally to save my eyes. Obviously I could use developer tools but that gets overwritten on a reload, but I was wondering if it's possible to edit something in the developer tools (like remove a div) and to then 'save' it as to intercept any response from the server and rewrite it using the HTML I have 'saved'
My solution was a hacky one but it worked. I decided to use TamperMonkey, which injects JavaScript code in the bottom on a HTML page. Using this and JQuery, I just modified the HTML.
Related
Our office has an email/filing system that is web based (runs on our local servers/intranet) and whilst the functionality is mostly there, it looks like an absolute pig; something that the creators of it appear to have no interest in fixing as it's looked awful for years.
Is there any way I can force the page to load with my own style applied? I use google chrome and have a decent (though not advanced) knowledge of creating web pages.
As far as I can tell, the system doesn't use CSS. I think it's all HTML?
I think you could use JavaScript and CSS to add your own style to the pages on load. Chrome has an extension called Tampermonkey that lets users create userscripts, which are scripts run automatically on pages you specify.
If you create your own style, you can use it on the page with a script like this (this is the jQuery function, I'll try to find out how to do it in plain JS):
$('head').append("<style>//your style</style>");
This should apply the style. If you set the script as a userscript in Tampermonkey, it will run automatically.
Tell me if you would like more details or if I need to be more clear! You can find Tampermonkey at this link on the Chrome store- their website is here.
I am using Emmet Livestyle with Chrome and Sublime text editor. I am editing my files locally and can update my css and js from the devtools so that those changes are reflected at the same time in my local files too. But how can I update my html code too?
We cannot persist HTML edits back. Because, well, you aren't editing HTML. Here is what is going on...
The server sends Chrome the page (HTML.) This is taken, tokenized, then a DOM (Document Object Model) is constructed out of it. The page is then trashed and only the DOM is kept in memory. That is what you are seeing on the Elements panel. That panel is the full DOM as it is, made to look like HTML markup for ease-of-use.
That HTML sent down from the server, can be generated by PHP, Ruby, C, hand-coded, whatever. There is no way for DevTools to know. So, there is no way for us to transfer source edits in the DOM back automatically. CSS and JS both can take advantage of sourcemaps so DevTools know where to send things back. It isn't 100%, since say if you are using a variable you aren't editing the variable back but changing the set value (at least in CSS.) But it is good enough for the majority of uses. With HTML generation by backend languages, these kinds of kinks become even more complex, unmanageable, and will end up providing not the best experience for developers.
The best thing you can do is setup workspaces and move to editing your source in DevTools. However, this has the pitfall that custom extensions are not supported at this time. So you have a very generic writing experience going this route.
Browser is a http client..... html code is supplied from the server...... If you're developing and owner of the server side code.... Then replicate the changes you made in the cascading style sheet at the server side.
I am working on a prototype for a project that is somewhat similar to the facebook's "like" button. Basically it's an embeddable piece of code that can integrated with any website.
I am looking for a way to fake this integration for a demo. Basically I want to show a familiar web page (like http://www.cnn.com) with my code already embedded. Since I obviously can't do the actual integration right now, I need some way of faking it.
The only thing I can think about is to use http://www.httrack.com/ to download the page I want, and then change it locally. The problem with this is that it is clear that the page is hosted locally and not on www.cnn.com.
Is there a better technique for doing this?
If you use Firefox browser, you can use Greasemoneky and with JavaScripts, embedd your content inside that page. You can eaven add events, that will open some popup windows, etc. to show action of such a script.
That is easy approach, there are ton's of examples in their forum, and good documentation, how to use it.
You can write your own userscript (i.e. greasemonkey) to modify the page on the fly.
Even though I think it's a bad idea to do this (not sure if stackoverflow allows to ask such questions), but what you can do is edit the hosts file (if you're on windows) and add a line
127.0.0.1 www.cnn.com
it means that when you visit the website cnn it will display the domain name in the browser but it will use your localhost server to display the content.
I am thinking to create an website that generates HTML through a wizard.Finally, I want to make the users to buy the generated HTML source if they like what they see.
But I don't want to let the users to steal the HTML, CSS and JS that I use to create the effect they want.
I want a technique which is immune to Firebug and Right Click -> View Page Source.
Any thoughts ?
edit: I remember something about iframes or frameset, but I'm not sure how to fool the browser and Firebug to execute the code without updating their capability of showing that source code. A popup is also a possible solution.
edit 2: html hosted in silverlight ? will you use it ?
The best thing you can do is to just obfuscate your code. Trying to hide the source is not going to work (for ex: if you disable right click-> view source that doesn't stop them from using the menu or saving the page or using a shortcut key or writing an app to stream the http request into a file and open that, etc).
Firstly, depending on what you are doing you can have the HTML code loaded through JS after the page load (AJAX).
As far as your JS goes:
Free Obfuscator
Not Free Obfuscator
In the end though, there is no stopping someone who really wants to get that source. Even obfuscated code can be rebuilt (though it's hell on wheels painful depending on how good the obfuscator is).
To really protect the sample HTML from prying eyes, you'd need to render it on the server-side and only pass image data to the client. If you want the user to be able to interact with the sample as if it were a normal Web page, you'll also need to send their pointer and keyboard inputs to the server and update the displayed image when necessary. At that point, though, you're basically making an HTTP-based version of VNC. This is definitely possible, but I don't think it will be easy, and I doubt there are any existing software packages to let you do this. If I were you, I'd rethink my business model a bit.
Sending XSL-templated XML to the browser may be enough fool some, and it will work more or less the same in many modern browsers including IE6 (maybe even 5.5).
But really, trying to hide the HTML code isn't going to work if anyone halfway serious wants to get it.
I am thinking to create an website that generates HTML through a wizard.
Finally, I want to make the users to buy the generated HTML source if they like what they see.
If this is what you need you might consider the possibility of creating a preview of the page as an image, and provide the download of the source only after the user agreed and paid. There is no magic way to let a browser display a code that you can't see.
You can make a video, showing the functionality and upload the same, which may help users to view / feel it.
I'm in the process of reproducing some standalone HTML forms as pages in a CMS that uses FCKEditor by simply copying and pasting the relevant code into the editor.
But when I save and view the page, the HTML has been changed and the tag has been moved up to just below the open tag -- and not at the bottom of the form. This obviously renders all of the fields in the form, including the submit button, useless.
Is there a way to tell FCKEditor that I know what I'm doing and I don't need it to validate the HTML output?
Unfortunately this is a hosted CMS service (actually part of an email blast tool) so making changes to the configuration will mean I need to go through the company's support system, which is fine -- but they haven't been able to solve it for me yet, so I'm hoping to get the answers for them.
Thanks!
This is a bit of a difficult thing because as far as I know, it's not necessarily the WYSIWYG editors that "fix" "broken" HTML, it's the browsers' HTML editing engines themselves, and it's often near impossible to talk them out of doing this.
You'd have to show your exact source to get detailed feedback, but check out whether protectedSource is something for you. It's supposed to protect code that is covered by the regular expression you specify.
I'm not sure about FCKEditor, but you might want to consider switching to TinyMCE. TinyMCE allows you to both edit a list of allowed tags, and to turn off HTML validation off completely if you like.