How to inject javascript code in firefox? - javascript

In chrome I use custom javascript for websites to copy paste a certain script I need to test in multiple browsers. In this case it;s simple and easy just click on the extension and the editor opens.
I need to do the same in firefox. I have tried this extension, but the documentation for it is very unclear. I am not sure how to open the editor to paste the java script code into it.

You can use GreaseMonkey Add On for running user-scripts with Firefox. Very popular and works well.

Related

HTML Rich Text Editor problems with justify* commands

I'm writing a simple Rich Text Editor which is currently working perfectly in Chrome and Firefox.
Internet Explorer however, is another story. I have finally managed to get most things working in IE with work-arounds and such, but all of my justify commands do nothing.
That is, this bit of code has no effect.
iframe.contentWindow.document.execCommand('justifyRight', false, null);
This is despite all other commands (ie: bold, italic, etc) working just fine.
Any clues as to why the justify* commands are different and not working?
I have a live demo available at http://www.hazaarmvc.com/site/test
Turns out that it was simply the content inside the editor window (an iFrame) that was the problem. It was originally generated using a Mozilla editor. Due to the differences in how each browser renders it's HTML content, IE just didn't know how to apply it's version of justifyleft, etc. Working on an empty editor everything just worked as expected.
See "Internet Explorer Differences" here: https://developer.mozilla.org/en/docs/Rich-Text_Editing_in_Mozilla for an explanation of what is different.
I'm going to chalk this one up to IE just being crap.

Copying text to clipboard in Chrome extension

I'm writing a Google Chrome extension and I want to copy some text in clipboard in a content script. I tried selecting it and then document.execCommand('copy') - it doesn't work. I don't want Flash, because it's not easy and elegant way to achieve that. I tried background page and <input> - it doesn't work.
Is there any working, elegant and simple way to copy text to clipboard in Chrome extension? It may also use jQuery.
Regards
Here's some working (Coffeescript) code that does copy / paste: https://github.com/philc/vimium/blob/master/lib/clipboard.coffee
Note that the code above runs in the background page; there was a bug a while back which broke execCommand in content scripts, and I'm not sure if that was ever fixed.

How to find out what Javascript code is run after a specific event happens on a web page?

There's this web site for which I'd like to write a bookmarklet. To do this, I need to find out what Javascript code is run when certain links are clicked. The links are in the form Do something, so there's no onclick attribute for me to see what code is run.
So how do I accomplish this goal? I imagine I need to use a browser addon like Firebug in Firefox or Developer Tools in Chrome.
Sorry if this has been answered before.
You can use Firebug for Firefox or Chrome's builtin DOM/JavaScript console to look for event listeners. It will give you the function call/name, search the code for this name...

How to modify javascript code at run time?

Is there a way to modify JavaScript code while debugging? Visual Studio has "Edit and Continue", and similar hot swapping of code can be done in Java and other languages. Can this be done with JavaScript, and if so, how?
Chrome, Safari, and some other WebKit-based browsers contain a feature in the Web Inspector known as Live Edit. If you go to the Scripts panel and are stopped on a breakpoint (or maybe even if not stopped on a breakpoint — I'm not sure), you can double click on a line and start editing that line. The changes you make will take effect on the script.
With Chrome Developer tools, this is super easy.
Just pop open inspector, click on the scripts tab, select which one you want from the dropdown menu and then you are free to edit the script and add in breakpoints. If you refresh the page, your breakpoints will stay there.
If you watch this talk but Paul Irish, he shows how you can edit a script on the fly
http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/
also good:
http://blip.tv/jsconf/jsconf2011-paul-irish-5382827
If you're talking about while debugging, it's very easy to modify the running code. In your debugging console, you can enter in Javascript expressions and it will run in the context of the window, which contains all the objects and functions of your code, so you can swap them out by redefining them.
Because JavaScript can modify the DOM the you essentially have to change the JavaScript file, save it and reload. For me, I like IE so I run the webpage in a browser NOT IN DEBUG mode. Then you can change the script files, SAVE them. switch back to the browser and reload (F5) to see your changes. Supposedly IE 11 has this ability (probably like Chrome which is essentially what I am doing, changing saving reloading from what I can tell) but I can't get it to find, let alone open a js file. Super poor UI. I'm guessing the browser to open the file icon is but it is always grayed out.

Toolbar to modify displayed html/content in IE / Firefox / Chrome

I want to create toolbar, whose functionality would be:
Whenever the toolbar is "On/Activated", all pages should be parsed by a function, and the modified html should be displayed.
[Example:
i) There was this skype toolbar that would recognize phone-numbers in pages and automatically add skype links
ii) If you have used MacAfee / Alexa toolbars, they modify the search results page displayed by Google
My functionality would a lot simpler though]
I want to create this for all browsers (though answers/pointers to any one platform would be appreciated).
Please note that I am new to toolbar development, so detailed pointers from basics would be very helpful.
I have heard to GreaseMonkey. However, if I can do it in a more "basic" way, it would be very helpful. (Alternately, tips to make a "custom" toolbar using GreaseMonkey would be welcome - though I would like to do away with ability to add scripts, etc. Also I installed greasemonkey and it does show up as a toolbar in FF/IE at all! In IE, there is separate executable to add scripts - I want a standalone toolbar with ON/OFF facility in the browser).
Thanks much!
Regards,
JP
For Google Chrome you can create an Extension that uses a content script to inspect and modify the page. Extension can be developed in HTML and Javascript so they are very easy to create. Chrome also supports Grease Monkey scripts.
In firefox, Grease monkey scripts are the way to go.
In Internet Explorer, I believe there is a plugin you can install to have support for Grease Monkey scripts, although the liklihood of an IE user having it installed is very low.

Categories