injecting javascript to FireFox - javascript

I'd like to create a handle through which I would be able to inject javascript to Firefox.
I can do it very easily with IE but Firefox is a different story...
Can anyone help?

You can use the grease monkey extension.

What do you want to do exactly:
insert JS in your own browser manually?
insert JS in your browser automatically for some websites?
insert JS in somebody else browser when they visit your website?
Maybe you can describe how you do it with IE. Once we know what you are trying to achieve, we'll probably be able to answer you.

That's how I do it in a manual way, using Firebug extension.
Console.
Find a small triangle on the right that's "Command editor", press it.
Paste the code.
Run
The code:
var b = document.createElement("div");
b.innerHTML = "<button onclick='jarektest();'>text</button>";
document.body.appendChild(b);
// short code typed inline
var s = document.createElement("script");
s.innerHTML = "function jarektest() { alert(document.body.innerHTML); }";
document.body.appendChild(s);
// longer piece, taken from other file
var s2 = document.createElement("script");
s2.src = "file:///J:/lang/js/hello.js";
document.body.appendChild(s2);

Related

Adding JavaScript contained in a variable as a script element

The powers that be have asked me to look into this and as much as I think it's not possible I want to be sure before going back to them. Don't ask me why they want this haha
They want to be able to use JavaScript that is defined in a variable. Let me explain...
Let's say you have this variable:
var testvar = "function dan() { alert('hello world'); }";
They want to be able to call dan() and have an alert popup in the web page. Something like this doesn't appear to be useable (of course).
var importjs = document.createElement('script');
importjs.src = testvar;
document.getElementsByTagName("head")[0].appendChild(importjs);
Any ideas or jargon I can use to explain why it's not doable. I believe it's essentially a cross origin issue. Our solution requires users to install software, which uses web sockets. This software performs a file GET for the JS and we then want to use the JS in the browser.
You should set the innerHTML of the script element to your String. The src of a script element should only be used to load an external script.
var testvar = "function dan() { alert('hello world'); }";
var importjs = document.createElement('script');
importjs.innerHTML = testvar;
document.getElementsByTagName("head")[0].appendChild(importjs);
dan();

How to SSI include Variable Filename

I have recently discovered SSI and don't really fully know how it works. I have written this javascript code, shown below, that is supposed to turn the end of the link into a text file name (which it does just fine). Then all of the characters necessary to escape are escaped, code below.
var path = window.location.pathname;
var page = path.split("/").pop();
var res = path.replace(".html", ".txt");
var res = res.replace("/Iliad/", "");
console.log(res);
element = document.getElementById('book');
element.innerHTML = "\<\!\-\-\#include virtual="+res+" \-\-\>";
According to the console (inspect element), <!--#include virtual=1.txt --> is added perfectly correctly to an html div container's innerHTML, but it does not incldue the .txt file that it references. I have searched the internet and cannot find a solution to this. Is there something I'm doing wrong? If so, how do I accomplish this. Thanks!
Server-side includes are processed on the server (hence the name), so long as the server is properly configured.
Modifying the data in the browser (long after it has left the server) cannot trigger processing of the SSI on the server.
Look to Ajax and DOM manipulation instead.
Thanks to #Quentin for his speedy answer. After being told exactly what SSI is meant to do, I searched for another solution.
This worked for me! I modified the code as follows...
var request = new XMLHttpRequest();
request.open('GET', res, false);
request.send();
var textfileContent = request.responseText;
element = document.getElementById('book');
element.innerHTML = textfileContent;
Hope this helps anyone else!

What is wrong with my javascript for a browser I would like to create?

I know you people will think I am insane, and thus an idiot, but I really have a serious question, well at least to me. What is wrong with my javascript for a browser I would like to create?It will not open the URL in the iframe. I am creating an html source file with some javascript to split a "get" url,and echo the resulting variable into an iFrame. I wanna use Webkit as the rendering engine, so I'm using Google Chrome to create an application shortcut. Yes, I know it will require google chrome, but this is just a test.
function goTo(){
var urlb = window.location.href;
var urla = urlb.split('localhost/browser.html?url=');
var urlc = urla[1];
var urld = urlc.replace("+"," ");
var urle = urld.replace("%3A ",":");
var urlg = urle.replace("%2F","/");
var url = urlg;
document.getElementByID('url').innerHTML="<iframe src=' . url . "'width='100%'
height='90%'></iframe> Opened:" . url ."</div>";
}
This is the javscript function to open the url. I am pretty sure you would think that the html is just a simple input form and the blank Iframe, which it is.
Please help me if you can.
When you are trying to get the URL, you want to use decodeURIComponent(). Don't make up your own function to unescape the data. Also, get the query string parameters properly. See this StackOverflow post: https://stackoverflow.com/a/901144/362536
Now that you have the proper URL, don't simply inject it into your HTML. You're opening yourself up to security troubles, and a broken browser when you run into characters you don't expect. Create the iframe, then set its attributes programmatically. https://stackoverflow.com/a/710347/362536
Finally, fix your syntax errors.

Is there a way to refresh just the javascript include while doing development?

While doing development on a .js file I'd like to just refresh that file instead of the entire page to save time. Anyone know of any techniques for this?
Here is a function to create a new script element. It appends an incremented integer to make the URL of the script unique (as Kon suggested) in order to force a download.
var index = 0;
function refreshScript (src) {
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = src + '?' + index++;
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}
Then in the Firebug console, you can call it as:
refreshScript('my_script.js');
You'll need to make sure that the index itself is not part of the script being reloaded!
The Firebug Net panel will help you see whether the script is being downloaded. The response status should be "200 OK" and not "304 Not Modified. Also, you should see the index appended in the query string.
The Firebug HTML panel will help you see whether the script element was appended to the head element.
UPDATE:
Here is a version that uses a timestamp instead of an index variable. As #davyM suggests, it is a more flexible approach:
function refreshScript (src) {
var scriptElement = document.createElement('script');
scriptElement.type = 'text/javascript';
scriptElement.src = src + '?' + (new Date).getTime();
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}
Alexei's points are also well-stated.
I suggest you to use Firebug for this purpose.
See this video, it helped me a lot.
http://encosia.com/2009/09/21/updated-see-how-i-used-firebug-to-learn-jquery/
If you're talking about the unfortunate case of client-side/browser caching of your .js file, then you can simply version your .js file. You can:
Rename the .js file itself (not preferred)
Update the include line to reference yourfile.js?1, yourfile.js?2, etc.. Thus forcing the browser to request the latest version from the server. (preferred)
Unfortunately, you have to refresh the web page to see edits to your JavaScript take place. There is no way that I know of to edit JavaScript in "real-time" and see those edits effect without a refresh.
You can use Firebug to insert new JavaScript, and make real-time changes to DOM objects; but you cannot edit JavaScript that has already been run.
If you just fed up refilling the forms while developing just use form recover extensions like this one https://addons.mozilla.org/ru/firefox/addon/lazarus-form-recovery/

Problem when I try to open file and write into it

Could somebody explain why the following simple script doesn't work in Firefox and how can I fix it?
<script type="text/javascript">
var w = window.open("a.php");
w.document.write("hello");
</script>
Thanks much
(edited to make the code sample display better)
DOM Scripting is more up to date and more robust.
e.g.
var w = window.open("a.php");
w.onload = function(){//you could also use dom ready rather than onload but that is a longer script that I've not included here
var body = w.document.getElementsByTagName("body")[0];
body.appendChild(document.createTextNode("bar"));
}
I'm pretty sure you can't read/ write files using javascript because it's a client side language? I may be completely wrong though!
EDIT:
Try this code:
var new_window, new_window_content = [];
new_window_content.push('<html><head><title>New Window</title></head>');
new_window_content.push('<body>New Window</body>');
new_window_content.push('</html>');
new_window = window.open("", "", "status,height=200,width=200");
new_window.document.write(new_window_content.join(''));
Cheers, Sean
To the others posting answers here: he is not trying to open a file and write to it - it is impossible in javascript in a browser. What he is instead trying to do with the w.document.write is to write to the end of the web page he has just opened in a browser.
Google Chrome says this code fails as:
>>> var w = window.open("http://www.google.co.uk");
undefined
>>> w.document.write("lol");
TypeError: Cannot call method 'write' of undefined
You first need to open the document stream by using document.open() - this will add a write function in w.document:
<script type="text/javascript">
var w = window.open("a.php");
w.document.open();
w.document.write("hello");
w.document.close();
</script>

Categories

Resources