CODEWITHSUNDEEP
javascript
Lukin Trewqu
Lukin Trewqu

Reputation: 9

Other way than running javascript: from url?

Is there other way to inject my own javascript into another page without changing its url? For example look at this website: http://somadesign.ca/projects/fontfriend/

It is working through entering into url address long script, something like: javascript:{script code} which later injects script to any website.

Is there any other,more autmoated, simpler way to do it?

Upvotes: 0

Views: 96

Answers (2)

Leo
Leo

Reputation: 13848

The link you posted in the question is actually a use case of bookmarklet, as I've briefly explained in my previous comment.

According to your description I'm guessing that you misunderstood how it is surposed to be used. Please correct me if I'm wrong, and you can jump to the last part.

A bookmarklet is an anchor (<a> tag), whose href starts with javascript: pseudo protocol. A typical bookmarklet may look like this:

<a href="javascript:alert(document.title)">Say my name!</a>

(Please open the snippet demo) When you click the link, it alerts current page title. However, it's NOT surposed to be used like this! What you need to do is, drag it to your browser's bookmark bar, save as a bookmark! Then, on any web page you are visiting, click the bookmark. The script will be executed in THAT page's context, and tell you its page title. This is the right way to use a bookmarklet.

Bookmarklet has limited length, because URL has the limit (2,000+ or so). So you can't write too much content in a bookmarklet. Good news, you can insert <script> tag with that bookmarklet. For example, this bookmarklet injects jQuery to you visiting page if you click it:

<a href="javascript:(function(){var s = document.createElement('script');s.src = 'http://code.jquery.com/jquery-2.1.1.min.js';document.body.appendChild(s);})()">Inject jQuery</a>

So if your application exceeds the limit, you can save it to a JS file, and inject via the bookmarklet.

As you told your requirement: services aiming at aged people, I think this is a practical solution. They just save a bookmark, and click when needed. That's it!

Plus this technique has very good cross browser compatibility (even down to last century). One more thing, IE6 has a limited URL length of 500+ (which is still enough for script injection though).

Last but not least, as I addressed earlier, this might also be dangerous due to potential XSS! So keep an eye on your service, don't get your JS file hacked!

EDIT: I missed one thing last time. DO NOT return anything within the bookmarklet function, other than undefined.

Look at this example. After the alert dialog, the page content will be replaced with the returned value 'Oops', works just like document.write('Oops'):

<a href="javascript:(function(){alert('Oops');return 'Oops';})()">Oops</a>

So a more guaranteed way is using void keyword, which forces a function call to return undefined:

<a href="javascript:void function(){alert('Oops');return 'Oops';}()">Oops</a>

EDIT: And alternatively, more user-friendly approach is to develop browser extensions: CRX for Chrome, XPI for Firefox, etc. If an extension is well designed, it only requires user to install. On the other hand it's obviously costlier.

Upvotes: 1

James Hibbard
James Hibbard

Reputation: 17775

You could do this by means of a userscript (small snippets of JavaScript code that change the behaviour of a website).

Userscripts normally have a format similar to:

// ==UserScript==
// @name Example Script
// @description Whatever it does
// @match http://www.example.com/*
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==
alert("hello");

What is important here is the line beginning @match, which specifies when your script should run. The above example will alert "hello" whenever you visit a page whose url begins with http://www.example.com/. The @require allows you to import other scripts, such as jQuery.

To make life easier, most people use a userscript manager such as Tampermonkey or Greasemonkey. These allow you to edit, debug and generally your scripts within the browser. They also take care of the bolierplate for you.

If you are interested, I wrote a short tutorial on how to setup and get started with Tampermonkey.

Upvotes: 1

Related Questions