Bookmarklets are natively available in all major browsers, including Mozilla Firefox and Chromium-based browsers like Chrome or Brave.

Scripting with JavaScript

Learning how to write scripts provides many benefits, namely the huge time-savings from automating repetitive or tedious tasks.

If you aren't a developer, the idea of learning to code might be intimidating, however scripting doesn't require software engineering knowledge or design patterns. The goal isn't to make scalable software, but rather to automate specialized or trivial tasks.

Regardless of profession, even if you've never written code before, consider what you do in your browser. If you ever feel what you do is repetitive or robotic, consider the possibility of delegating the task to an actual robot.

Use Cases for Bookmarklets

With bookmarklets, you can manipulate the current page as the function will have the context of the current tab. This means you can:

• Click buttons virtually

• Modify the content

• Use the content of the page to open a new page

• Remove elements from the page

You can also make bookmarks that don't utilize the context at all, such as conditionally opening a URL, or generating HTML for a new tab.

You'll find some bookmarklets I made for this article in Example Bookmarklets. They're just for demonstration, but should make the capabilities and implementations apparent.

How to Create Bookmarklets

Creating a bookmarklet is almost identical to creating a regular bookmark. The only difference is that you'll write JavaScript in the URL field instead of an HTTP/HTTPS URL.

Navigate to the Bookmark Menu

Mozilla Firefox

Either in your bookmarks bar, or in the Bookmarks sidebar (CTRL + B), you can right-click, then click "Add Bookmark...":

Chromium

You can right-click your bookmarks bar, then click "Add page...". Alternatively, you can go to your Bookmarks manager, then right-click and click "Add new bookmark":

How to Write a Bookmarklet

In the URL field of the bookmark modal, write a JavaScript function in the following format.

javascript: (() => {
  // Your code here!
})();

javascript: is the URL's protocol. This indicates that the browser should execute the bookmark as JavaScript.

(() => { }) defines an anonymous function (lambda). You should write the code you want to execute between the curly braces.

(); will execute the anonymous function you just created.

javascript: (() => {
  alert('Hello, World!');
})();

You can also make it generate HTML and open it as an HTML document:

javascript: (() => {
  return '<h1 style="color: white; background-color: black;">Hello, World!</h1>';
})();

Spacing for Bookmarklets

Most browsers don't allow a multiline input field in the bookmark URL, so you'll usually have to make strict use of curly braces ({ and }) and semi-colons (;) when writing bookmarklets. This is especially important when scoping conditional constructs (if/for/while).

Other than this, spacing doesn't matter. Don't be afraid to have a lot of code in one line because that's all you've got:

javascript: (() => {   const documentHTML = document.documentElement.outerHTML;   const matches = documentHTML.matchAll(/[\w.+=~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/g);   const flatMatches = Array.from(matches).map((item) => item[0]);   const uniqueMatches = Array.from(new Set(flatMatches));      if (uniqueMatches.length > 0) {     const result = uniqueMatches.join('\n');     alert(result);   } else {     alert('No emails found!');   } })();

If your script is complex, it'll be easier to maintain your bookmarklet in a code editor like Visual Studio Code. You can copy and paste it over to your browser when it's ready.

How to Interact with Websites

The most common thing you'd do with bookmarklets is manipulating or interacting with websites you have open.

The Global Document Object

As the bookmarklet has the context of the page you're on, you have access to the [document](https://developer.mozilla.org/en-US/docs/Web/API/Document) object.

The ideal functions for selecting elements for our use case are:

• querySelector to select a single element by CSS selector.

• querySelectorAll to select all matching elements by CSS selector.

• [evaluate](https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate) to select all matching elements by XPath.

There are other functions like [getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) and [getElementsByClassName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName), but we want to avoid false-positives, so we'll always make a strict selection using multiple element attributes.

CSS Selectors and XPath

If you're only selecting elements based on element names, IDs, classes, and other attributes, using a CSS selector will be simple and efficient.

CSS selectors are used to select elements in HTML documents to apply styles. If you're familiar with web development or CSS in general, then you already know how to use CSS selectors. (More Info: MDN, freeCodeCamp)

If you need to match the text content of an element as well, then you'll have to use XPath instead.

XPath is used to traverse XML documents, it provides all the capabilities of CSS selectors and more, including comparing the content of elements or using a regular expression to match it. (More Info: MDN, Wikipedia)

How to Select Elements from the Webpage

One of the most common uses for bookmarklets is manipulating webpages. To interact with, manipulate, or remove elements from the page, you'll always have to select the elements first.

1. First open the browser development tools by pressing F12, or CTRL + SHIFT + I.

2. Click the Inspector/Elements tab, which displays the full HTML document of the page you have open.

3. Use the element selector tool (CTRL + SHIFT + C) and click on the element you want to interact with. The document viewer will scroll to the element you clicked in the HTML document. You'll see the element ID, classes, and attributes.

4. Check if you're on the correct element. Elements can be nested where it's easier to navigate to it manually in the HTML. For example, you may have clicked an svg element, but actually needed the button or div it was inside of.

5. Define a CSS selector or XPath that matches everything you want, you might want to make it more strict than necessary to avoid potential false-positives.

For example, suppose I wanted to dismiss all topic suggestions on Twitter because they're annoying. Here is how a clickable element to dismiss a topic looks like.

Twitter topic suggestions, with an X button to mark it as "Not interested".

<div aria-label="Dismiss" role="button" tabindex="0" class="...">
  <!-- The parent div element has the click listener. -->
  <div class="...">
    <svg viewBox="0 0 24 24" aria-hidden="true" class="...">
      <!-- The actual X icon. -->
    </svg>
  </div>
</div>

An appropriate selector is div[aria-label=Dismiss][role=button].

We need to use the querySelectorAll function from The Global Document Object, then call the [click](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click) method to simulate a click.

A bookmarklet can be implemented to select every dismiss button, and trigger a click event to all of them with a 250ms interval.

javascript: (() => {
  const selector = 'div[aria-label=Dismiss][role=button]';
  const topics = document.querySelectorAll(selector);

  for (let i = 0; i < topics.length; i++) {
    let topic = topics[i];
    setTimeout(() => topic.click(), i * 250);
  }
})();

How to Redistribute Bookmarklets

To "install" a bookmarklet, users create a bookmark on their browser and copy and paste the code to it.

This can be inconvenient, so it's common to link bookmarklets when sharing. This is as simple as putting it in the href attribute of your link anchor.

<a href="javascript: (() => {   alert('Hello, World!'); })();">
  Hello, World!
</a>

Now users can right-click and "Bookmark Link", or drag it to the bookmarks bar for easy access.

Clicking the link on the web page will execute the script immediately. Ensure it's not going to obstruct what a user is trying to achieve on your site if they accidentally click it.

For example, the following link will display an alert with "Hello, World!".

User Content and Content Security Policy Bypass

If you run a service that allows user-generated content to contain custom HTML, it's important to sanitize link anchors (a).

The bookmarklet is executing like code in the developer tools console, and bypasses the configured Content Security Policy (CSP).

The "Hello, World!" link can just as easily send data to another server, including the input of form fields, or cookies.

As a service provider, it's important to be wary that users can exploit this to share malicious code on your platform. If their link anchor is running on a page under your domain, it can access sensitive information on the page and [document.cookies](https://developer.mozilla.org/en-US/docs/web/api/document/cookie).

You can try it yourself in a sandbox environment:

<a href="javascript: (() => {   alert(document.cookie); })();">
  EvilScript
</a>

Only Run Code You Trust

As a user, it's important to note that any code can be malicious, only click or add bookmarklets where at least one of the following are true:

• It came from a reputable source.

• You know JavaScript, and you reviewed what it does.

• Someone you trust knows JavaScript, and they reviewed it for you.

Privacy and Security

Bookmarklets can be handy, but we also have web extensions and user scripts too. What makes them different?

Web extensions are incredibly user-friendly and flexible. Bookmarklets can't block network requests, update content as the page changes, or manage tabs.

However, there're some benefits to using bookmarklets over anything else, namely for privacy and security.

An extension that modifies the font on all pages must get permission to access all data on all web pages. On Firefox and Chrome, this includes all input and password fields. (More Info: Mozilla, Google)

In contrast, a bookmarklet only has access to the page for the very moment it's executing, and only when manually triggered by the user.

This results in less risk of malware, a rogue employee can't push a malicious update, and data won't silently get sent to other servers.

The Chrome Web Store has previously had several malicious extensions which had to be taken down. Some of which had millions of installations before being removed. (More Info)

Example Bookmarklets

Here's a list of bookmarklet ideas, along with the code that implements it. You can copy and paste them into new bookmarks to try them out.

javascript: (() => {
  const documentHTML = document.documentElement.outerHTML;
  const matches = documentHTML.matchAll(/[\w.+=~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/g);
  const flatMatches = Array.from(matches).map((item) => item[0]);
  const uniqueMatches = Array.from(new Set(flatMatches));

  if (uniqueMatches.length > 0) {
    const result = uniqueMatches.join('\n');
    alert(result);
  } else {
    alert('No emails found!');
  }
})();

javascript: (() => {
  const xpath = "//a [contains(., 'Jobs') or contains(., 'Careers') or contains(., 'Hiring')]";
  const elements = document.evaluate(xpath, document);
  const element = elements.iterateNext();

  if (element) {
    element.click();
  } else {
    alert('No links for jobs found!');
  }
})();

javascript: (() => {
  const allElements = document.querySelectorAll('*');

  for (let element of allElements) {
    element.style.fontFamily = 'Comic Sans MS';
  }
})();

javascript: (() => {
  const destination = "https://www.freecodecamp.org/";
  const alternate = "https://tenor.com/Y6jj.gif";

  const date = new Date();
  const hours = date.getHours();

  if (hours < 3 || hours >= 6) {
    window.open(destination);
  } else {
    window.open(alternate);
  }
})();

Thank you for reading! Now go forth and create your own bookmarklets.

But, on the other hand, what if you don't want a record of sites you've visited left on your computer? Perhaps your spouse or partner will discover you've been searching for their birthday gift (last minute, too!), or you've visited a site that you'd rather keep private and personal.

You could also be using a public computer, and just don't want strangers viewing your history. Fair enough.

Whatever the reason, it's a good idea to know how to view - and clear, or delete - your browsing history. And it's pretty easy to do so in various different browsers. So let's have a look.

How to clear your history in Chrome

Chrome stores the sites you've visited over the last 90 days in your browsing history. If you're using incognito mode (which you can read more about here) it won't store those sites. But anything you browsed in a regular Chrome browser will appear there.

Also, something to note: if you've synced up all your devices (laptop, iPhone, tablet, and so on), that history will be visible across all devices. Likewise, when you clear it, it will be cleared from all of the devices.

Clearing all your browsing history

On your computer, open the Chrome browser. In the upper right corner, you'll see three vertical dots. Click them to open that menu, and select the "History" tab from the options there.

How to get to your browsing history in Chrome

Once you click that option, you'll be brought to a summary of your recent browsing history. If you just want to check it out, great.

Your browsing history ready for your viewing (or deleting) pleasure.

If you want to clear it, just click the "Clear browsing data" tab on the left. You'll be brought to this screen (below), where you have the option to clear the data for the last hour, 24 hours, 7 days, 4 weeks, or all time. Choose your time frame, and the categories you'd like to clear:

Click the dropdown ("Time range") to choose your time frame. Check and uncheck boxes depending on your needs.

As you can see from the screenshot above, Chrome stores not only your browsing history, but also cookies from sites you visit and cached files.

Once you clear that data, it won't show up in your history. Chrome also won't autocomplete those sites for you if you start typing them in the address bar.

Clearing part of your history

What if you just want to clear a few sites, but want to keep the rest? That's possible, too.

Open Chrome, click on those three vertical dots, choose "History". Same process so far. Now, on that first page of history, instead of clicking "Clear browsing data" on the left, just select/check boxes for what you want to delete:

Just select the sites you'd like to delete.

Once you've selected all the sites you'd like to clear, just click "Delete" in the upper right corner. Only those sites will be removed from your history.

How to clear your history in Firefox

To clear your history in Firefox, the process is fairly similar to Chrome - the buttons just look a little different.

Clearing all browsing history

Open your Firefox browser, and click the library tab at the upper right (it looks like a few books leaning together):

Once you select "History", a new window will open up in the same spot.

Select the "History" tab, then the "Clear recent history" option from the menu that will replace the previous one.

You'll see this box pop up:

Be ready to delete it all!

And you'll notice that there's a "Time range to clear" dropdown. You can clear your history from the last hour, two hours, four hours, today, or all time.

You can also select what information you'd like to clear, similar to Chrome.

Now, be prepared: if you just select "Clear Now" at the bottom right, it'll clear all your history, no questions asked.

Clearing part of your history

If you'd like to select which bits to clear, the process is a bit different. Click that same library tab, select "History" and then "Show all history" down at the bottom.

This box will pop up:

You can select what history you'd like to see (today, yesterday, and so on) via the left side bar.

Then you'll see your history. If you only have a few sites there, you can just ctrl click (or right click) on the site you want to delete.

When you hold down the ctrl key and click on the site, a menu will pop up. Just select "forget about this site" from that menu and Firefox will delete it from your history.

Ctrl+click (or right click) to select a site. One at a time.

All history associated with that site (cookies, cache, browsing and logins, and so on) will be removed. Hooray!

How to clear your history in Safari

Last but not least, let's see how to clear your history in Safari.

Clearing all of your browsing history

Once again, the process is fairly similar to Chrome and Firefox. But in Safari, you just click the "History" tab at the top of your browser menu. From the dropdown, select "Clear History":

Easy as pie - just click the "History" tab and then "Clear history".

A box will pop up that will ask you whether you'd like to clear all your history (which includes caches, etc) and for what time frame (last hour, today, today and yesterday, all history).

Similar options.

Select the appropriate option, and click "Clear History". Boom, history cleared for that period of time (or all time).

Clearing part of your history

Again, you might not want to clear everything. Just one site. Totally doable.

Click the "History" tab and select "Show all history" at the top of the dropdown. All the sites you've browsed will be listed by day.

If you want to choose one specific site to delete, just ctrl click (or right click) on that site, and select "Delete" from the drop down:

Similar to Firefox - ctrl+click or right click to select sites to delete.

Just that site will be deleted from your browsing history.

Now you know how to delete your browsing history - all or part of it - from some of the major browsers in use today.

If you’re building a web app with React, you may want to see the state or props of components in real-time. Here’s a quick solution for Chrome & FireFox!

React Developer Tools

Install the React Developer Tools extension for Chrome or FireFox. It allows you to inspect React component hierarchies within the developer tools — the same way you would peek at the DOM elements, console, or network.

Inspecting React Components

1. Open your app and inspect the page with developer tools (Command+Option+I).
2. Select the React Developer Tools

3. Pick a component in the tree to see its state and current props.

You can also select a React element directly from the page by hovering over it with the selection tool:

Selection tool menu icon in developer tools

Modifying the State

If you want to update your state in the browser— you can! Modify it by clicking and editing state attributes in the React tab. This will re-render the DOM, passing the state down through the props.

Happy coding! ?

Currently, I’m working on a Firefox health dashboard as a part of my Outreachy internship with Mozilla. And here are the major goals we intend to achieve during the internship.

• Add new features to the graphical presentation of performance data
• Transfer existing JS Team (Firefox Performance) dashboard to the health dashboard
• Enhance existing information on charts and fix some bugs

The main purpose of this post is to explain the project to someone who is not in the community and not familiar with the stuff we are doing at Mozilla. The intention is to help newbies and other contributors to understand the dashboard so they can contribute to this opensource project with more sense of what is going on inside.

_Photo by [Unsplash](https://unsplash.com/photos/0-SGyQFiDRI?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="_blank" title="">rawpixel on <a href="https://unsplash.com/search/photos/health?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener" target="blank" title=")

What is Firefox Health Dashboard?

Firefox health is a project to create dashboards for project managers and engineers. It displays Firefox matrics and insights to help meet release criteria. It allows including data/metrics from Mozilla’s issue tracker (Bugzilla), performance data (Perfherder), product metrics (Telemetry) and few more sources. All data is displayed in the form of graphs using an open source graphing library ChartJS to display insights against different dates and platforms.

It was previously known as Platform Health. It was refactored in Jan 2018 as Firefox Health Dashboard. One of the major changes in this refactorization was to separate backend from the front-end. This improved code maintainability.

Technologies:

The backend is written using NodeJS and Koa. The front-end is built using ReactJS along with an open source graphing library ChartJS. Some of the data is coming from different hosts through different libraries. For example, perf-google is querying Mozilla’s Perfherder for performance data. Information about the reported bug is coming from Bugzilla. So if you are planning to contribute sometime in the future, you need to have an understanding of the technologies mentioned above.

This dashboard caters to performance of different Firefox versions and devices. But today we are going to talk about Firefox android and how engineers at Mozilla take care of its performance.

Data/metrics for Firefox android

Currently, data for Firefox android is coming from different sources. We display the data in the form of graphs for better understanding and analysis. You can see all insights to Firefox android on the health dashboard. Here are some sources and information about Firefox android to help engineers improve the performance of the browser.

Bugzilla:

Developed by Mozilla, Bugzilla is a free, open-source tool for tracking bugs, issues and change requests in large complex applications. It is used by thousands of organizations to keep track of their product performance. We are using it in the Health Dashboard to keep an eye on the bugs popping up in Firefox Android.

A graph displaying bugs from Bugzilla

As mentioned above, we are using ChartJS to display data. Here we have a graph representing the number of bugs reported on different dates for Firefox Android at Bugzilla. Bugs with P1 label have the highest priority. They need to be fixed as soon as possible. Then comes P2 bugs with the 2nd highest priority. P3 level bugs are with lowest priority and engineers can fix them whenever they have time. This helps developers and product managers to review bugs of different priorities more effectively and solve them according to the priority.

NimbleDroid:

We are using a third party service called NimbleDroid to get some data insights after running the tests against Firefox Android. NimbleDroid is a functional performance testing service for android and IOS devices.

Monitor every critical user flow for every build of your mobile app. Pinpoint issues that degrade user experience early in the dev cycle. Seamlessly integrate with your CI workflow. — Official Site

Showing data insights given by Nimbledroid

Telemetry:

Telemetry is a tool that has the capability to provide performance and usage information to Mozilla to help engineers and decision makers to measure the performance of Firefox in the real world. It has the ability to collect performance, hardware, usage, customization, and other non-personal information from the user of Firefox and send it to Mozilla on daily bases to help engineers improve the quality and efficiency of the browser.

Telemetry graph view

For an Android device, the browser measures the time taken by it to load a content page on a device and reports it back through Telemetry. We then display it in graphical form. For instance, the screenshot says 75% of the users reported a total content page load time of 4.9 seconds on Sep 19, 2018. And this data is gathered from different devices from different users. This helps the engineers to keep an eye on loading time of the browser to improve its speed and make it more efficient.

Perfherder:

Perfherder is a system to help engineers visualize and analyze the performance data produced by the many automated tests run against Mozilla products such as Firefox or Firefox Android. Perfherder is a part of Treeherder project. It is another dashboard for check-ins to Mozilla’s projects. The main goal of this tool is to make sure that the performance of the Firefox gets better over the time. It assists developers in the understanding of their changes and potential fixes by reporting regressions.

In the coming articles, we will talk about Firefox Quantum and JS team dashboard. We will see how these tools are working to improve the performance of the Firefox browser.

Contribution guide:

If you care about the health of Firefox or interested in contributing to the project, then here is the way.

• Clone and set up the project on your local machine
• Follow the readme
• And start with good-first-issues if you are finding it overwhelming to start

Stay tuned to know more about the awesomeness we are doing at Mozilla.