Bookmarklets
Hello everyone, today we will talk about the use of bookmarklet, or bookmarks for the browser.
Who does not know, this is such a thing that you can add to your bookmarks (yes, today I will debut in the role of Captain Obvious :) and, when I click on it, produce some effect.
An example is the hero of today's note, which is located at http: // ulizko. com / demo / allthat / . Instructions for use:
')
A window will appear in which you can enter data. In general, it is assumed that this will be the interface for adding desires to wish lists (previously created on some site), set up alert triggers, and so on. There is even some kind of entry level validation. And the data exchange with the server is established - that is, on any domain you receive a list of your wishlists, and your new desire from any domain will reach the wings of love for the wishlist and comfortably fit in its arms on any wings 1 .
But. Today we are not talking about this, but about how to do such things in principle.
Before going directly to the analysis of the code, I would like to answer the question (which no one asked me :), namely, "What possibilities does the bookmarkt give?". The correct answer is any. Since we are able to load any script, we can do whatever you want with the client page. For example - to make a “portable” widget, in which on any page you can add an entry to a notebook or task manager. Or even make the entire task manager away. What is also important, they will work almost everywhere - they are not plug-ins to firefox and not widgets to opera. Bookmarklets do not matter (well, almost :), what is your OS or browser. In general, there is room for imagination.
So, how do you make these bookmarklets?
Very simple: you need to create an anchor element on the page with the href attribute containing javascript code. If you translate into Russian, then you need to make such a link, the address of which, by and large, will be a bookmarklet:
In order for the javascript code in the link address to work, you need to add the word
In any case, all these questions are discussed in detail by Ilya Kantor in his note Bookbooklets and the rules of their writing , to which I refer you for details.
The only thing we still need to know is that all browsers limit the maximum length of the bookmarklet code. And, just as the speed of the caravan is equal to the speed of the slowest camel, so the maximum size of the cross-browser bookmarklet is equal to the limit imposed by IE 6 SP2, that is, 488 characters.
Thus, we are unlikely to be able to code some kind of complex logic in incomplete five hundred characters, so most often the bookmarklets simply create a new script tag, into which the application code is already loaded.
So did I. Here is the code of my bookmarklet in a human-adapted form:
Then the code of the window itself is loaded directly. I think it may be of some interest in itself, so I'll post it here too (all comments are in English, as the customer is American):
If interested, here is the Source Code of the bookmarklet .
Notes :
Who does not know, this is such a thing that you can add to your bookmarks (yes, today I will debut in the role of Captain Obvious :) and, when I click on it, produce some effect.
An example is the hero of today's note, which is located at http: // ulizko. com / demo / allthat / . Instructions for use:
- Drag the “link” link to the bookmarks bar or right-click on it and select the “add to favorites” menu item.
- Go to any site, like http: // twitter. com , and click on this bookmark (well, or to favorites).
')
A window will appear in which you can enter data. In general, it is assumed that this will be the interface for adding desires to wish lists (previously created on some site), set up alert triggers, and so on. There is even some kind of entry level validation. And the data exchange with the server is established - that is, on any domain you receive a list of your wishlists, and your new desire from any domain will reach the wings of love for the wishlist and comfortably fit in its arms on any wings 1 .
But. Today we are not talking about this, but about how to do such things in principle.
Before going directly to the analysis of the code, I would like to answer the question (which no one asked me :), namely, "What possibilities does the bookmarkt give?". The correct answer is any. Since we are able to load any script, we can do whatever you want with the client page. For example - to make a “portable” widget, in which on any page you can add an entry to a notebook or task manager. Or even make the entire task manager away. What is also important, they will work almost everywhere - they are not plug-ins to firefox and not widgets to opera. Bookmarklets do not matter (well, almost :), what is your OS or browser. In general, there is room for imagination.
So, how do you make these bookmarklets?
Very simple: you need to create an anchor element on the page with the href attribute containing javascript code. If you translate into Russian, then you need to make such a link, the address of which, by and large, will be a bookmarklet:
< a href ="javascript:alert('I am bookmarklet'); void 0;" > Bookmarklet </ a >
* This source code was highlighted with Source Code Highlighter .In order for the javascript code in the link address to work, you need to add the word
javascript: in front of it. If my sclerosis does not change me, this is called “indication of the javascript pseudo protocol”. Another important detail is that if your code returns a value, the browser will take it as the address to go to and leave the current page. To avoid this, do not return values, that is, add void 0; to the end of the script void 0; , or wrap the whole code in an anonymous function, non-returning values ​​- (function(){... ...})() .In any case, all these questions are discussed in detail by Ilya Kantor in his note Bookbooklets and the rules of their writing , to which I refer you for details.
The only thing we still need to know is that all browsers limit the maximum length of the bookmarklet code. And, just as the speed of the caravan is equal to the speed of the slowest camel, so the maximum size of the cross-browser bookmarklet is equal to the limit imposed by IE 6 SP2, that is, 488 characters.
Thus, we are unlikely to be able to code some kind of complex logic in incomplete five hundred characters, so most often the bookmarklets simply create a new script tag, into which the application code is already loaded.
So did I. Here is the code of my bookmarklet in a human-adapted form:
( function () {
// a ( )
// window, ,
// ( , )
var a = window.allThat = {
userId : '123345456' ,
server : 'http://mysite.com/' ,
script : document .createElement( 'script' ), // ,
// - , ""
css : document .createElement( 'link' ) //
},
/* DOM : */
h = document .getElementsByTagName( 'head' )[0];
a.css.rel = 'stylesheet' ;
a.css.href = a.server + 'css/bookmarklet.2.css' ;
h.appendChild(a.css);
a.script.src = a.server + 'js/bookmarklet.7.js' ;
h.appendChild(a.script);
h= null ;
})();
* This source code was highlighted with Source Code Highlighter .Then the code of the window itself is loaded directly. I think it may be of some interest in itself, so I'll post it here too (all comments are in English, as the customer is American):
If interested, here is the Source Code of the bookmarklet .
Notes :
- In general, the script was made by me to order as part of my freelance work, so do not be surprised at the idea, logos and design.
Source: https://habr.com/ru/post/52346/
All Articles