📬 Tutorial: Create an Unread Badge Chrome Extension for Pipedrive.
Wavebox Flow is an open-source browser extension-building assistant that helps you write simple extensions to customize the apps and websites you use every day. Here are a couple of easy tutorials to help you get started. You can find out more about Wavebox Flow on GitHub and contribute to the open-source code.
⚠️ Important Notice! We recommend developing your extensions using test data as opposed to live data, and always check that a site's terms & conditions allow it!
🎨 Example 1: Customize a Website's Theme
This is a very simple example to get you started. We're going to create an extension to restyle the Wavebox blog—permission granted 😏—so it looks good in dark mode. Here's what to do:
- Open a new tab at https://flow.wavebox.io to get started.
- Click the Style button.
- Enter https://wavebox.io/blog as the website you want to customize.
- Next, you'll see our blog's style template, ready for you to edit. There are snippets of useful info throughout to help you get started—providing a quick introduction to how styles work. So, have a go at changing the background to a dark color, and the text to a light one.
- In the screenshot above, you can see the changes we've made to the style code highlighted in blue. By using flow in Wavebox split-screen, you are able to preview the output of your extension in real-time, and make tweaks as you go.
That's it. 5 steps and you've written your first extension 🤯. Amazing!
📬 Example 2: Add an Unread Badge to Pipedrive.
This next example shows how to be more productive using Wavebox Flow. Let's take a popular sales app, Pipedrive, which has its own badge count showing how many overdue activities you have. It would be useful to show this on the app's icon in Wavebox so that you can visually see the overdue count without having to switch to the app all the time to see it.
Let's start by inspecting the page on Pipedrive and seeing what properties the overdue activities counter has:
Here we see it has a class of "cui5-pill__label", so if we can search for this on our page every once in a while, we'll get the number of overdue activities. Great - so let's now create a new Flow to do this, by clicking on the (+) button in Wavebox and selecting "Create flow extension":
After selecting to create a new "Feature" extension on A Website of our Pipedrive app (at https://testcorp4.pipedrive.com in our example here), we get the editor for our new Flow. Let's start by asking our AI Assistant for some help in writing our code:
"help me with some code to check every 5 seconds the span element with class "cui5-pill__label" and do something if it's changed" - which gives a response we're happy to go with:
Since we're in Wavebox, we can reload our Flow extension easily by clicking the reload button in the editor and then check to see if the code is running as expected. We swap over to Pipedrive and check our console to see if we get the overdue activities count:
Yep! There's our count! Now, all we need to do is use this to call the right function to set the Wavebox badge count for this app.
Looking at the documentation, we need to use the Wavebox setBadge API call, and this needs to be done in a Service Worker on the Background page. We also need to give our Flow extension the permission to use the Wavebox api so that we get to call setBadge.
So let's add a Background page to our Flow extension in the editor, and follow the extension guide on background pages to add a message handler for setBadge from our content script.
The API says that the setBadge count should always be a number, so let's also make sure we check and change what's passed in to make sure it's an integer to match the API docs.
The next step from the API docs is to add the "waveboxApps" permission to our Flow extension. This is done in the manifest file, so we select "Show manifest" in the editor's side menu, and paste in our permission field:
The last thing we need to do is to actually call the setBadge function by sending the message from our Pipedrive checking code. So we switch back to the contentscript.js file and paste in the call to send a message to our Service Worker on the Background page, passing in the count we found on the Pipedrive page:
And that's it. When we reload the Flow extension within the editor, we now see the badge change on the Pipedrive app logo - both for the app itself in the top tab bar and also for the main Pipedrive group on the left. Job Done!
Using Flow in Other Browsers
When you're using Flow in Wavebox, we automatically take care of a few things in the background, like installing the extension, reloading it, and so forth. If you're using Flow in another browser, there are a few intermediary steps to take, however, the output is the same across most browsers.
When you create or load your extension, the browser will ask you where you want to save it on your machine. Once you've created your extension, you'll also need to load it into the browser, but don't worry, Flow provides some easy steps on how to do this, so you'll be up and running in no time! 👍
Coding Assistant
Not sure your extension coding skills are up to scratch? Wavebox Flow is here to help, we've included a super helpful ChatGPT Assistant that can help you with all kinds of extension coding tasks and error checking. Click on the assistant button in the top-right at any time and ask away. The assistant already knows that you're writing an extension and what kind of file you're working on (i.e. a stylesheet or JavaScript file) so can provide some contextual information about your question.
Note that it's your responsibility to satisfy yourself that any code or suggestion from the ChatGPT Assitant is adequate and safe - it can make mistakes, so make sure you check it's output!
- The editor that we've included does a really great job at helping you spot errors early on, but if you find that your extension isn't doing what you expect, the assistant is able to check over your code for errors and point you in the right direction. Just hover over the assistant button and use the Check my code tool.
Wavebox Flow on GitHub
We originally started working on Flow for Wavebox users, but we found it such a powerful tool that we decided to open-source the code and bring support to as many browsers as possible. This way, both experienced extension builders and those with coding but no extension writing skills could all take advantage of what Wavebox Flow has to offer.