Better Living Through Bookmarklets

Core points

• Bookmark applet is a small JavaScript code embedded in browser bookmarks that enhance the functionality of a web browser and simplify the workflow of web developers.
• The bookmark applet has a wide range of uses, from simple navigation tasks to more complex operations, such as modifying page content, analyzing page structure, and even automating tasks on the website.
• While bookmark applets are generally safe and reliable, they can cause namespace conflicts. This problem can be avoided by creating anonymous functions with its own variable scope as bookmark applets.
• For complex bookmark applets, there is a way to bypass the length limit of bookmarks in some browsers. The actual bookmark applet implementation can be hosted on a web server as an external .js file, while the bookmark applet can contain a load stub for loading the rest of the scripts.

Bookmark applet is an easy way to add functionality to your web browser and can be a useful addition to the workflow of web developers. In this article, I will point out some useful bookmark applets, provide tips on building your own bookmark applets, and demonstrate some advanced techniques to make the most of these powerful tools. Bookmark applets are short JavaScript code snippets embedded in browser bookmarks. When a bookmark is selected, JavaScript code is executed. Magically, this execution takes place in the context of the current page . The bookmark applet can access the full document object model of the page and can modify it and use the information in it to start a new window or redirect the browser to another site. If you have never tried using the bookmark applet before, it is recommended that you try it before reading the rest of this article. Both www.bookmarklets.com and www.favelets.com provide a large collection of bookmark applets, and Jesse Ruderman has a collection of bookmark applets on www.squarefree.com/bookmarklets. Jesse's web development bookmark applet should especially be a must-have addition to any web developer's browser. Bookmark applets are suitable for all modern browsers that support JavaScript, but some browsers are more friendly than others. Internet Explorer 6 for Windows has an annoying 508-character bookmark size limit, which severely limits the scope of bookmark applets available to this browser, although the technology I will cover later does provide a partial remedy. To make the most of the bookmark applet, I recommend you use a Mozilla-based browser, such as the excellent Firefox, which also comes with many useful tools to help with the development of the bookmark applet. However, one of the charms of bookmark applet development is that the cross-browser problem that often plagues severe JavaScript development can be avoided: there is no problem in developing bookmark applets for a specific browser (especially bookmark applets used by individuals), so developers can actually do anything the browser allows them to do.

Common bookmark applet variants

If you have browsed any of the sites mentioned above, you should have some idea of ​​the huge range of features that bookmark applets can offer. The simplest and most common type of bookmark applet is the simple navigation bookmark applet, which takes the URL of the current page and passes it to another site. A classic example is the Verification Bookmark applet, which redirects users to the online HTML or CSS verification service on the current page. These bookmark applets are very simple to create, but can be adapted to some very useful uses. I really like to create the Edit This Page bookmark applet for websites powered by a web-based content management system. Many such systems embed IDs in public site page URLs, which directly correspond to the IDs used in the form URLs used in the site management system to edit the contents of that page. The Edit This Page bookmark applet extracts the URL of the current page and uses it to immediately redirect users to the editing interface of the page. For example, imagine a site with the following URL:

<code>http://www.site.com/articles/123</code>

The site also has a password-protected management interface, which provides the "Edit Page" interface at the following address:

<code>http://www.site.com/admin/edit-article?id=123</code>

The "Edit this page" bookmark applet of the above site can be implemented like this:

javascript:document.location='http://www.site.com/admin/edit-article?id='+document.location.href.split('/').pop()

This concept can be greatly expanded if you have some control over the content management system you use on your site. For example, in a site where the internal ID of an article is not exposed in a URL, you can instead provide the ID in the HTML meta tag, which can then be provided to the Edit This Page bookmark applet via the DOM. Many bookmark applets modify the current page in some way. Common examples include bookmark applets for "eliminating" annoying content, such as unwanted Flash animations, and even images that resize to commonly used sizes for banner ads. These can be interesting, but are usually limited by the need to manually activate each time the page is loaded. What is more useful is a bookmark applet that helps web developers analyze page structure and even modify page structure ("real-time"). My favorite applets of this type are Jesse Ruderman's "test style", "edit style", and "ancestor" from his web development collection. The latter shows the HTML element hierarchy leading to the page section under the mouse cursor, which is useful for figuring out how to apply CSS to the page. The first two allow the CSS of the current page to be modified "real-time", thereby providing instant feedback on potential design changes. My Mozilla Image Drag Bookmark applet makes every non-background image on the page "dragable", which may also be helpful when considering tweaks of page design. A useful but often overlooked JavaScript trick is that the entire HTML page can be embedded in a bookmark applet. Try entering the following directly in the browser's URL bar:

javascript:'<h1>This is HTML</h1>'

The browser should display the HTML rendered in the string. It does this because the string is evaluated as an expression, and the result is then displayed in the current browser window. The same trick can even be used to turn your browser into an overly specified calculator:

<code>http://www.site.com/articles/123</code>

Sometimes it can be useful to write bookmark applets that embed entire pages in this way, especially if they require a more complex user interface than the simple confirm() and prompt() boxes.

Auxiliary text input

I spend a lot of time online staring at the textarea box. The three blogs I updated are maintained through textarea, as are the sites I develop at work and various online forums I participate in. Textarea is everywhere. They are also a far from the best way to process text, especially when compared to dedicated text editor software. Bookmark applets can make handling textareas significantly less painful and can provide them with useful additional features. My favorite example of textarea enhanced bookmark applet is another from Jesse Ruderman: Blogidate XML Benefits – a Mozilla/FireFox bookmark applet that checks whether the text in each textarea on the page is well-structured XML and changes the background color of the textarea accordingly. This is useful for capturing simple errors in XHTML before publishing it to the site. Jesse also has a set of HTML verification bookmark applets that use the WDG validator to check the syntax of HTML fragments in textarea. Another tool I often use is my extension HTML shorthand bookmark applet. It applies a series of simple transformations to text in textarea:

1. Blocks of text separated from each other by blank lines are wrapped with paragraph marks
2. Convert lines starting with the = symbol to #### Title
3. Lines starting with * become bulleted list

Example:

<code>http://www.site.com/admin/edit-article?id=123</code>

becomes:

javascript:document.location='http://www.site.com/admin/edit-article?id='+document.location.href.split('/').pop()

• list 1
• list 2

The shorter version is suitable for IE. This release sacrifices title support to accommodate the 508-character limit: Extended HTML shorthand IE. Extended HTML abbreviation:

javascript:'<h1>This is HTML</h1>'

Extended HTML abbreviation IE:

javascript:1 + 4;

Unexpanded source code (before the space is removed) looks like this:

<code>= Header

Paragraph

* list 1
* list 2</code>

Bookmark applet creation tool

You can create bookmark applets using just a text editor—or, if you are very confident, you can type them directly into the New Bookmark field in your browser. However, for content that is more complex than a simple navigation bookmark applet, it makes sense to use dedicated tools. If you are using Firefox, you can already access some useful bookmark applet creation helpers. Firefox's JavaScript console is a valuable debugging tool. The DOM inspector is an excellent aid for exploring the page DOM tree when writing bookmark applets that modify page content. Jesse Ruderman’s Firefox and Mozilla’s shell bookmark applets provide an interactive JavaScript prompt attached to the current page context, a great way to try new technologies before submitting them to a text editor. Although bookmark applets cannot contain line breaks, the source code must be indented for writing more than a few statements. My Remove Line Newline Bookmark applet (below) is a tool for removing tabs, newlines, and multiple spaces from JavaScript code blocks. In many cases, this is exactly all you need to do to create a bookmark applet from a simple block of code, although you have to remember to terminate each line with a semicolon before converting. The bookmark applet is also an example of HTML pages embedded in the bookmark applet. Remove line breaks:

<code>http://www.site.com/articles/123</code>

Avoid variable scope conflicts

A potential problem introduced by bookmark applets is namespace conflict: What happens if your bookmark applet uses or redefines the variables that other scripts on the page are already using? One technique to avoid this problem is to use random variable names that are unlikely to have been used, but this will make the bookmark applet code harder to read and will increase the unnecessary length of the bookmark applet. A better solution is to create anonymous functions with its own variable scope as a bookmark applet. Here is how it works:

<code>http://www.site.com/admin/edit-article?id=123</code>

The function() { } part here is an anonymous function - a function whose name is not declared. By enclosing the function in brackets and adding () at the end, the function will be executed once immediately after creation, that is, the moment the bookmark applet is activated. As long as variables within the body of anonymous function are declared with the "var" keyword, they are confined to the scope of the function and do not interfere with variables with the same name in the rest of the document. Thanks to JavaScript's function nature, you can even declare other functions in anonymous functions without adding them to the global scope of the document.

Append longer scripts

I mentioned earlier that there is a way to bypass Internet Explorer's limit on bookmark length. This approach also allows writing bookmark applets in standard indented JavaScript without having to keep the entire script on a single line, making it a useful technique for more complex bookmark applets implemented by any browser. The trick is to host the actual bookmark applet implementation as an external .js file on some web server. The bookmark applet then only needs to include the "stub" code used to load the rest of the scripts - this can be easily achieved with a 508-character limit. The following is the mini program code that loads the stub bookmarks, indents for readability:

<code>http://www.site.com/articles/123</code>

After removing the space, the above code (minus the external script URL) reaches 193 characters. This code has one drawback: it does not work with Macintosh version IE5. If Macintosh version IE5 support is important for your bookmark applet, liorean also has an extended version of the load stub that uses browser detection to satisfy that browser at the same time.

Further reading

The best way to know about bookmark applets is to view bookmark applets written by others:

• www.bookmarklets.com
• www.favelets.com
• www.squarefree.com/bookmarklets/

I hope this quick browsing of the bookmark applet will inspire you to try creating your own bookmark applet.

FAQs about bookmark applets

What is the bookmark applet? How do they work?

Bookmark applet is a small JavaScript code snippet stored in a URL in a web browser bookmark. When you click on a bookmark, the JavaScript code runs on the current page instead of loading the new page. This allows you to add new features to your website, automate repetitive tasks and even play games without installing any software or extensions.

How to create a bookmark applet?

Creating a bookmark applet is as simple as creating a bookmark. Instead of entering a URL, you enter a piece of JavaScript code. This code is executed when you click on a bookmark. You can write your own code or find pre-made bookmark applets online.

Is the bookmark applet safe?

Bookmark applets are usually safe and reliable because they run in your browser and cannot access your computer's file system. However, like any code, they can be used maliciously. Be sure to use only bookmark applets from trusted sources and understand the functionality of the code before using it.

Can I use the bookmark applet on any website?

Theoretically, the bookmark applet can be used on any website. However, some websites may have implemented security measures to prevent bookmark applets from working. In addition, the functionality of the bookmark applet may depend on the structure of the website it uses.

Why does my bookmark applet not work?

There may be several reasons why your bookmark applet does not work. The websites on which you are trying to use them may have implemented security measures to prevent bookmark applets from working. The code in the bookmark applet may be expired or incompatible with the website. Or there may be errors in the code itself.

How to debug bookmark applet?

Debugging bookmark applets can be a bit tricky because they don't have a traditional debugging environment. However, you can use the browser's developer tools to check the code and view any error messages. You can also try running the code in the browser's console to see if it works there.

Can I use the bookmark applet on my mobile device?

Yes, you can use the bookmark applet on your mobile device. However, the process of adding and using them can be more complicated than on a desktop browser. You may need to bookmark JavaScript code manually, because mobile browsers generally do not support the drag and drop method used on desktop browsers.

Can I share bookmark applets with others?

Yes, you can share bookmark applets with others. Just send them JavaScript code and instructions on how to add it to their bookmarks. However, remember to share only bookmark applets from trusted sources and you understand the functionality of the code.

Can I use the bookmark applet to change the appearance of the website?

Yes, you can use the bookmark applet to change the appearance of the website. This is done by operating the website's CSS. However, these changes are only temporary and will be lost after refreshing the page.

Can I use the bookmark applet to automatically perform tasks on the website?

Yes, you can use the bookmark applet to automatically perform tasks on the website. This can be anything from filling out the form to clicking a button. However, the functionality of the bookmark applet will depend on the structure of the website and the tasks you want to perform automatically.

The above is the detailed content of Better Living Through Bookmarklets. For more information, please follow other related articles on the PHP Chinese website!