Run Javascript in the URL(plugins.)

Question

How do I run snippets of Javascript in the address bar, I tried in Firefox something like: javascript: alert("lol"), but it seems to be an old and not working technique(at least not in Firefox).

The idea is to have a bookmark in the bookmark bar in which it is a Javascript snippet, so that I click it and it does some procedures on the current page (on which the user is present), such as displaying the page address, capturing an element value in the DOM..

Is it possible? There are special plugins for this(firefox, Chrome..), and yet, it would be possible to use Jquery to facilitate coding?

Answer 1

You can save as favorite as you wish.

I am with version 42.0 of firefox and it works as follows:

Add the page as your favorite.

Ctrl + D and finish.

After that, go to the page you added, right-click on top and click properties.

Once done, paste your javascript in place of the url and click save. Your javascript should follow this "syntax":

javascript:Alert('Lol');

Once done, just click on the favorite it will run the script.

Another way is to go straight into your browser, delete the link you have, type the script and press enter.

Finally, you can do it via browser console (Ctrl+Shift+J) and type the script you want.

These forms were tested in Firefox 42, Google Chrome 42 and Internet Explorer 11.

Answer 2

The name of this resource is bookmarklet and does not depend on plugins to work. According to Wikipedia:

A bookmarklet is a small Javascript program that is stored as a URL in Bookmarks.

The bookmarklets are favourites using the protocol javascript: instead of http:// or https://

The most widespread method to create bookmarklets is to create a link with the tag <a> which can be "installed" by clicking and dragging the link to the bookmark bar.

<a href="javascript:alert('Olá mundo');">Olá mundo</a>

It is possible to use jQuery on bookmarklet, but it is necessary to include the library manually (code adapted from Bookmarklet Creator with Script Includer):

javascript:(function(){
  // cria script
  var s = document.createElement("script");
  s.src = 'http://code.jquery.com/jquery.js';
  // adiciona para executar depois que carregar
  s.addEventListener('load', function() {
    (function($){
      var jQuery = $;
      // seu código entra aqui
      // jQuer já estará carregado
    })(jQuery.noConflict(true))
  }, false);
  // adiciona script na página
  document.body.appendChild(s);
})()

In this implementation just check if jQuery is already loaded on the page.

Answer 3

I would like to add to the excellent answer chosen, that of Sanction, a solution to place the execution of a bookmarklet in the Chrome family extensions bar (Chrome, Canary, Chromium):

Bare minimum Chrome Extension to inject a JS file into the Given page when you click on the browser action icon. The script then Inserts a new div into the DOM.

NOTE: Affix the desired script/bookmarklet to the [inject.js] file, right after the code snippet:

Document.body.appendchild(div);

To enter the above extension in Chrome, proceed as follows:

• Open the Chrome extensions address: (Chrome://Extensions/)
• Enable [Developer Mode], located at the top right of the screen
• Click "Load without compaction"
• Select the extension folder you downloaded above (the folder that contains the manifest.json file)
• Confirm, and that’s it!
• Just click on the icon of the new extension and then the script or call to the desired bookmarklet will be executed
• If you want a shortcut to this new extension open the menu option [Extensions --> Keyboard shortcuts --> New extension] and add the shortcut

REFERENCE: Stack Overflow: How to Modify an Extension from the Chrome Web Store?