How to add a JavaScript bookmark in Chrome

What is a JavaScript Bookmarklet?

A JavaScript bookmark, often called a bookmarklet, isn’t like a regular bookmark that takes you to a website. Instead, it’s a small piece of JavaScript code saved as a bookmark. When you click it, the code runs on the current web page you’re visiting, allowing you to perform actions that aren’t built into the website, like changing the page’s background color, extracting specific information, or removing annoying elements.

How to Create a JavaScript Bookmarklet in Chrome

Follow these simple steps to create your own bookmarklet. For this example, we’ll create a bookmarklet that changes the background color of any webpage to a light grey.

Step 1: Open the Bookmark Manager

First, you need to open Chrome’s Bookmark Manager. You can do this in two ways:

• Keyboard Shortcut: Press Ctrl + Shift + O on Windows/Linux or Cmd + Option + B on a Mac.³
• Menu Navigation: Click the three vertical dots (⋮) in the top-right corner of Chrome, hover over Bookmarks and lists, and then select Bookmark manager.⁴

Step 2: Add a New Bookmark

In the Bookmark Manager, click the three vertical dots (⋮) in the top-right corner of the manager’s blue bar and select Add new bookmark.⁵

Step 3: Name Your Bookmarklet and Add the Code

A dialog box will appear with two fields: “Name” and “URL”.

1. Name: Give your bookmarklet a descriptive name. For our example, you could name it “Change Background”.
2. URL: This is where you’ll paste your JavaScript code. It’s crucial to start the code with the prefix $javascript:$. This tells Chrome to execute the code instead of trying to navigate to it as a web address.

For our example, copy and paste the following code into the URL field:

JavaScript

javascript:document.body.style.backgroundColor = '#f0f0f0';

Your setup should look like this:

• Name: Change Background
• URL: javascript:document.body.style.backgroundColor = '#f0f0f0';

Click Save.

Important Note for rswpthemes.com Users:

If you are using a bookmarklet from rswpthemes.com, you must follow a specific process to get your code:

1. Download Your File: First, log in to your My Account page on rswpthemes.com and download the bookmarklet .js file.
2. Edit the File: Open this downloaded file in any text or code editor (you can use an online tool or a program like Notepad or VS Code).
3. Copy the Code: Select and copy the entire JavaScript code from within that file.
4. Paste in URL Field: Paste the code you just copied into the URL field of the new bookmark you are creating in Chrome. Make sure it starts with javascript:.

Step 4: Use Your New Bookmarklet!

Your new bookmarklet will now appear on your Bookmarks Bar (if it’s visible) or within your bookmarks list. To use it, simply navigate to any webpage and click the “Change Background” bookmark.⁸ The page’s background will instantly change to light grey. ✨