JS Create bookmark Gadget theory

We have been looking for ways to increase our browsing experience, some of which are well known, and others obscure. I originally thought that the bookmark gadget belonged to the latter, very annoying thing. To my great chagrin, I found that I was completely wrong in this matter. It's not boring, it's user-centric, it's a lot of good functionality, and as people expect, it's a central part of my interaction with the browser and the Web.
Here I'd like to introduce you to the whole process of developing bookmark widgets to achieve some subtle bookmarks. Yes, bookmarks, we will create more than one bookmark, even for very small bookmarks. Are you curious? Here we go!

What exactly is a bookmark gadget?
Quote from the previous article:
The bookmark gadget is a small piece of very good JavaScript code that resides in your browser and provides additional functionality to the Web page, with just a click.

The word is a crafting word for a bookmark and applet, also called a Collection gadget (Favelets), which allows you to summon extra functionality when you browse any page. Because they are only JavaScript, they are mobile and can support all browsers, even mobile devices and tablet devices. Installing them is also fairly simple, just drag them to the Favorites folder!

So, what is the key?
The key thing is that the bookmarks widget makes you think you can do a lot of things that you're supposed to be a developer-centric. Any feature you can get with a bookmark widget is available in a small amount of time using the browser's console. The bookmark gadget simplifies this process by wrapping code that implements some functionality in a small button. The bookmark gadget can be broadly divided into the following categories:

Used to transfer data. It is used to submit a page to a specific service. Deal with social media, look up dictionaries, search all belong to this category. We will create a bookmark widget that submits information to Reddit (a news site).
Used to get information or modify the current page. We'll create a gadget that sets the background color of the page.
For background operation. Clearing the bookmark widget for the current Web site cookie is a major example and we will create one below.
1. Start
The 1th thing you need to remember is the "JavaScript" URI on all JavaScript code prefixes. The browser implements a specific prefix so the content behind the prefix can be treated as JavaScript code correctly, parsing.
For example, clicking on "This link" (the code below) will give you a strong dialog box.

Copy CodeThe code is as follows:
<a href= "javascript:alert (' text link ');" > This link </a>

2. Packaging as anonymous function
Remember that your code will run on the page that is currently loaded, and it might have its own JavaScript code, which means there might be a conflict with the code of the bookmark gadget. The last thing you need to do is get your gadget to abort the current page.
Wrapping your code in an anonymous function guarantees No name collisions. In addition, JavaScript novice will be confused and think you are God if you do so.

Copy CodeThe code is as follows:
JavaScript: (function () {//Your code here});

This is also appropriate when you are using JavaScript code elsewhere, keeping an eye on your code isolation.
3, on-demand externalities
Bookmarks gadgets don't have to be small, you can write as much as you want. In these cases, it is best to create a wrapper to get the code that is needed in order to make it easier to publish and keep the code up-to-date without the user's manual intervention.

Copy CodeThe code is as follows:
JavaScript: (function () {
var jscode = document.createelement (' script ');
Jscode.setattribute (' src ', ' http://path/to/external/file.js ');
Document.body.appendChild (Jscode);
}());

The code above becomes a lot more flattering, it creates a script tag, sets the SRC attribute to a file elsewhere, and then eventually attaches it to the document. In this way, no matter which part of your code changes, you can deploy your modified files and immediately propagate to each user.

Note: This is not limited to JavaScript. If your bookmarks gadget uses the front end, you also have the freedom to introduce external HTML and CSS so that your gadget really updates automatically.

4. Add the class library with caution
If you want to create a large bookmark tool, you may need a JavaScript class library. But using them on your page is not just about including them, you need to make sure that the library is not already there. Libraries such as jquery and MooTools, which occupy a large market, have to be handled carefully to ensure that it is not loaded beforehand.
On the other hand, the Web page may have loaded other class libraries, which could cause a "$" symbol component to conflict. Version conflicts can also occur in some cases, so be aware of them.

Here is a script used in my code. Note that in your code you need to be aware of the points I have mentioned above.

Copy CodeThe code is as follows:
if (! ( $ = window.jquery)) {//typeof jquery== ' undefined ' works too
Script = document.createelement (' script ');
SCRIPT.SRC = ' http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js ';
Script.onload=releasethekraken;
Document.body.appendChild (script);
}
else {
Releasethekraken ();
}

function Releasethekraken () {
The Kraken has been released, master!
Yes, I ' m being childish. Place your code here
}

The meaning of this code should be very clear, we simply have to go through.

First we determine if jquery is already loaded by judging whether the jquery object exists in the namespace.
If it does not exist, we introduce it. We can load it with a CDN based on best practices. Finally, we make sure to point to the program main function that contains the code you want to execute.
If it already exists, run the main function directly.
If you find it troublesome to solve this problem, I highly recommend Ben Alman's "Bookmark Gadget Builder". It solves the full space and version conflicts in a very complete way. Good stuff!

5, do not have to mess with the mother page
This is too important. If you accidentally break a parent page, the bookmark gadget is useless. Please note that JavaScript is not the only thing you need to deal with. If you have a front end, HTML and CSS will also run in the page. Do not give your container and class A very ordinary name, such as you call it "container", I will always hate you. An easy way to do this is to add a special prefix (or suffix) string with a tool accent to all names. When you write CSS, you need special special. It's nice to use styles, but use the highest precision. If a style is leaked to the main page, it is noncompliant and will cause mistrust.

6, test, test, re-test
If you are creating a smaller bookmark gadget that references a fragile third-party class library, you may encounter a perpetual nightmare-cross-browser compatibility issue. It seems obvious, but this is a lot of people will forget a little bit.
Another pitfall is that gadgets that want to work on all sites only work on several websites. Web pages can have different levels, using different methodologies. Some sites may contain HTML5 and use the relevant containers while others may be safe to use common div tags. Ensure that every situation is considered when collecting information.

JS Create bookmark Gadget theory