As a developer, you understand the importance of having access to and . HazelBase is a powerful identity network that collects data from the internet and provides users with a wealth of information. accurate reliable data HazelBase understands the complexities of a developer's life and strives to make it easier. Also, tools provided by HazelBase are designed to streamline your workflow and simplify your tasks. With the ability to search billions of records, you can quickly access the information you need, making it easier to develop your applications. Their developer dashboard is intuitive and user-friendly, allowing you to manage your APis with ease. The generation of secure API keys ensures that your data is protected and safe from unauthorized access. Additionally, the HazelBase platform is you use, making it even more efficient and convenient. easily integrated with other tools However, this email look-up extension is just one of the many ways you can utilize HazelBase's tools to build powerful systems and applications. Background Logic Behind this Extension When you hit the search button, it triggers a request to the HazelBase API. This request is like asking for information, and the API endpoint responds by delivering the exact information you asked for. The process is simple and seamless, allowing you to access the information you need with just a click. To build this powerful extension you will need to have these four basic things; HTML CSS(Tailwind CSS) JavaScript As well as for to obtain an API key. ( ) sign up HazelBase Most Important This key acts as a unique identifier for your application and is required for authentication purposes. How does HazelBase APi Integration Works? Just like any other API integration, where we make use of , , , , a programming language, a development environment, and (optional). API endpoint URL API authentication method API request format API response format API documentation The HazelBase API endpoint URL is " ". This is where you will send your API requests to access and manipulate data stored in the backend. HazelBase uses , which is a query language for APIs that provides a more efficient and flexible way of retrieving data compared to traditional REST APIs. https://api.hazelbase.com/graphql GraphQL To retrieve data using HazelBase API, you will need to send a to the API endpoint. The query consists of a set of fields that describe the data you want to retrieve. GraphQL query You can send the query using any programming language of your choice, such as Python, Java, or JavaScript, along with libraries to handle the API requests and responses. Here is an example of a GraphQL query using the : curl command In this curl command, the header specifies the content type as " " and the API key as " ". The body of the request contains the GraphQL query, which in this case is asking for the ‘ ’ of the data. application/json Authorization: Bearer d9c5ca9c-3176-4363-9a55-0ff7b64d63a8 __typename How to Access HazelBase Developer Dashboard and Generate API Key Visit HazelBase Step 1: Sign in if you already have an account or click on get access to sign up. On your dashboard click on your organization Step 2: Step 3: On your organization section click on the dashboard Step 4: You may want to fill up your query balance to enable access (Each query cost $0.5. for more information contact HazelBase support Hello@HazelBase.com) Step 5: Click on the show developer dashboard Step 6: On the developer dashboard, you can create a secure API key and also get an overview of how to use HazelBase as a developer Step 7: How to Modify Data using HazelBase API To modify data using HazelBase API, you can send a GraphQL mutation. A GraphQL mutation consists of a set of fields that describe the changes you want to make to the data. The format of a GraphQL mutation is similar to a query, but with a different keyword (mutation) to indicate that you are making changes to the data. Before we start building the extension you may like to read google policies governing the creation of the chrome extension https://developer.chrome.com/webstore/policies Now let's build our extension; HTML and CSS Codes Explained The codes create a simple web page with a form to search for email information. The page uses the Tailwind CSS library for styling and has styles for the container, form-container, form-group, form-control, and btn. The body of the page includes a form with two elements, a label and an input, and a search button. The result of the search will be displayed in a div. The page also includes a reference to an app.js script for the form functionality. The use of Tailwind CSS makes it easy to style the page, while the JavaScript code provides the functionality for the form. Manifest Codes Explained This code is a manifest file for a browser extension. It specifies the version of the manifest file format used, the extension's name and the version number (1.0). The " " field indicates that the default action the user will see when they click the extension's icon is a popup window, defined in the "index.html" file. The "permissions" field lists the URL for the , which the extension requires access to in order to function. browser_action HazelBase API Why do we need a Manifest File? The manifest file acts as a blueprint for the extension, providing essential information to the browser to ensure the proper functioning of the extension. JavaScript codes (Search Feature Code Explanation) This code block is associated with the " " function. This means that when the web page finishes loading, the code inside the block will run. This block of code is setting up the functionality for a search button on the page. window.onload When you click the "search" button, the website checks to see if you've entered your email into the designated field. If you haven't, a message will appear reminding you to enter your email. The website uses a special key to help with the search process. This code makes sure that you enter a valid email before searching for information. JavaScript (Creating an API Request with XMLHttpRequest in JavaScript) This code creates a request using the . It opens a post request to the Hazelbase API with a URL of ' '. It sets the request header content-type to ' ' and the authorization header to 'Bearer ' plus an apiKey. XMLHttpRequest object https://api.hazelbase.com/graphql application/json The function checks if the request is complete and has a status of 200. If it does, it converts the response text to JSON and checks if there are any errors. If there are errors, it displays an error message in the . onreadystatechange resultDiv JavaScript (Displaying Person Information from a Search Result.) This code is using the data from a search result to display information about a person. The first piece of information it shows is the name of the person. It checks if the name is available and if it is, it displays the first and last name of the person. If the name is not available, it says 'Not Available'. Next, it checks if the person has any employment information and if they do, it uses the first employment in the list. It then checks if the organization information is available and if it is, it logs the name of the organization in the console. If there is no organization information, it logs 'No organization found'. If there is no employment information, it logs 'No employment found'. JavaScript(Finding Personal Information with an Email Address) This code helps find information about a person by using their email address. It asks for a database for the person's first and last name and the name of the company they work for. The request is made using a special way of asking for data called GraphQL(from HazelBase) and is sent to the database through a process that turns the request into a special format. The result of the request will give the needed information about the person being searched for. In conclusion, HazelBase is a platform that provides developers with a vast amount of information from the internet, making it easier for them to build applications. With HazelBase's APIs, you can easily build an email lookup extension for Chrome that makes it quick and simple to find information about emails. The HazelBase API is easy to integrate with and provides a secure way to access and modify data stored in the backend. You can access the developer dashboard by visiting HazelBase's website and signing up or logging in. From there, you can generate an API key, manage your APIs, and get an overview of how to use HazelBase as a developer. Building the email lookup extension involves creating a simple web page with a form and a search button, using HTML and CSS. The JavaScript code provides the functionality for the form, and the API sends requests to the HazelBase API to retrieve the information you need. To modify data, you can use a GraphQL mutation, which is similar to a query but allows you to make changes to the data. Also published . here

The writer has or has previously had a business relationship with companies mentioned in this article.

How to Build Email Lookup Extension for Chrome

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Here's How You Could Become a High Demand Blockchain Developer

10 Indications That You Should Invest in Automation Via APIs

113 Stories To Learn About Api Development

How To Import External Data Into Google Sheets Without Copy/Paste

4 Notion + Zapier Integrations You Can Implement Today

5 Best Practices for Integrating with External APIs

Here's How You Could Become a High Demand Blockchain Developer

10 Indications That You Should Invest in Automation Via APIs

113 Stories To Learn About Api Development

How To Import External Data Into Google Sheets Without Copy/Paste

4 Notion + Zapier Integrations You Can Implement Today

5 Best Practices for Integrating with External APIs

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps