DEV Community: sanuj bansal

Developing Chrome extension using React

sanuj bansal — Fri, 06 Oct 2023 19:38:54 +0000

If you’re here because you’re either contemplating your journey into Chrome extension development or looking to sharpen your skills. Well, you’re in the right place. Allow me to introduce myself — I’m the developer behind the popular Chrome extension Careerflow’s Linkedin Optimization and More, which has garnered a dedicated user base of over 200,000 users. It’s been a remarkable journey filled with lessons, challenges, and, most importantly, achievements. Today, I’m excited to share my insights, lessons learned, and expert advice that I’ve gained through countless hours of developing and maintaining a successful Chrome extension. So, whether you’re just starting or looking to take your extension to the next level, join me on this enlightening journey into the world of Chrome extension development.

1. Permissions: Keep It Minimal

One of the first things you’ll encounter when developing Chrome extensions is permissions. While it’s tempting to request a wide array of permissions, it’s vital to avoid unnecessary ones. Users can become wary of extensions that ask for too many permissions, which may lead to them declining the installation. Always strive for the principle of least privilege — only request permissions that your extension genuinely needs to function.

Not only does this increase user trust, but it can also help your extension receive the coveted “Verified” and “Featured” badges on the Chrome Web Store. These badges signify that your extension adheres to best practices and respects user privacy, further increasing trust among users.

2. CSS: Mind the Spillover

When styling your extension, be cautious when using global CSS or importing themes. Any styles you apply will spill over into the web pages where your extension operates. To prevent unwanted interference, consider utilizing shadow DOM (shadow-root) to encapsulate your extension’s CSS. This way, your styles will only affect your extension’s components, maintaining a clean separation from the host page’s styling.

3. Code Optimization: Keep It Clean

While optimizing your code for performance is essential, be cautious when obfuscating or uglifying your code for quicker deployments on the Chrome Web Store. Google’s review process involves inspecting your code, and obfuscated code can raise red flags. Strive for clean, well-documented code that adheres to best practices to expedite the review process.

4. Bug Management: Test Thoroughly and Implement Feature Flags

Mistakes happen, but in the world of Chrome extensions, they can have repercussions. Once your extension is published, fixing bugs can take more than 24 hours due to review processes. This makes it crucial to thoroughly test your extension before each release. Additionally, consider setting up a beta testing channel to catch issues before they affect your entire user base.

Feature flags, controlled from a database field, can be a powerful addition to your extension development process. They allow you to enable or disable specific features remotely without deploying new code. Here’s a simplified example using JavaScript and a database (not production-ready):

// Assume you have a database field 'feature_flags' for each user. // Check if a feature is enabled for a specific user. const isFeatureEnabled = (userId, featureName) => { // Fetch feature flags from the database for the user. const userFlags = db.getUserFeatureFlags(userId); return userFlags[featureName] === true; }; // In your extension code, use the feature flag. if (isFeatureEnabled(currentUser.id, 'newFeature')) { // Enable the new feature. // ... }

5. Scripting: Go Modular

Chrome extensions limit the use of external scripts through the script tag. Instead, embrace pre-bundled modules. Tools like Webpack can help bundle your JavaScript code, making it compatible with the extension's environment. This approach ensures that your code is modular, efficient, and easier to manage.

6. Analytics: Measure with Precision

To gain insights into user interactions and usage patterns, consider integrating Google Analytics using the Measurement Protocol. This allows you to track user events, monitor extension performance, and make data-driven decisions to improve user experience. We recommend the Measurement Protocol because most traditional methods and modules for implementing Google Analytics include external scripts that may not be suitable for extensions.

7. Asset Management: Be Web Accessible

When importing images or other assets, employ the chrome.runtime.getURL method. Ensure that these assets are included in both your manifest file as web_accessible_resources and bundled by your module bundler, such as Webpack. This ensures that your extension can access these resources correctly and securely.

Here’s the web_accessible_resources example you can include in your manifest.json:

"web_accessible_resources": [ { "resources": ["content.styles.css", "src/assets/*"], "matches": ["https://*/*"] } ]

In conclusion, Chrome extension development offers a world of possibilities, but it also comes with its unique set of challenges. By carefully considering permissions, CSS encapsulation, code quality, bug management with feature flags, modular scripting, analytics with the Measurement Protocol, and asset management, you can build extensions that are user-friendly, efficient, and trouble-free. So, arm yourself with these insights, and dive into the exciting world of Chrome extension development with confidence. Happy coding!

Async Await Best Practices: Tips and Tricks for Faster, Smarter Code

sanuj bansal — Wed, 28 Jun 2023 06:52:09 +0000

Asynchronous programming has become an essential part of modern web development, allowing developers to write code that is both efficient and responsive. However, when it comes to working with async functions, there are some common mistakes that developers often make.

In this article, we will take a look at an example of how to use Async Await, and discuss some of the mistakes that can occur when using this method. We will also explore some alternative approaches that can help to avoid these mistakes and make your code more efficient.

Let’s start by looking at some code:

const ids = ['1', '2', '3'];
const getData = () => {
 for (const id in ids) {
 axios.get(`${baseUrl}?id=${id}`).then((data) => {
 // You can save the data here
 });
 }
 console.log('Data fetched successfully');
}
getData();

At first glance, this code seems to be working fine. However, it has a significant problem. The console.log statement that should run after the data is fetched will execute even before the data is fetched, which is not desirable.

To fix this issue, we can use async/await like so:

const ids = ['1', '2', '3'];
const getData = async () => {
 for (const id in ids) {
 await axios.get(\`${baseUrl}?id=${id}\`);
 }
 console.log('Data fetched successfully');
}
getData();

Now, the console.log statement executes only after the data is fetched. But there’s a problem: the code takes N times as long to execute since each Axios request must complete before the next can start, making the code synchronous and slow.

A better solution to this problem is to use Promise.all to execute all promises asynchronously and wait for them to resolve:

const ids = ['1', '2', '3'];
const getData = async () => {
 const promises = [];
 for (const id in ids) {
 promises.push(axios.get(`${baseUrl}?id=${id}`));
 }
 const results = await Promise.all(promises);
 // you will get results in the form of an array with the 
 // order preserved
 console.log('Data fetched successfully');
}
getData();

Using Promise.all ensures that all the promises execute asynchronously and waits for all of them to resolve. This helps you maintain the speed of processing while also letting you wait for the response. However, it’s important to note that even if one of the network calls fails, the rest of the promises will not be executed, and your code will throw an exception.

To handle errors more gracefully, ES2020 introduced the Promise.allSettled method. This method helps you handle errors more easily, as shown in the following code:

const getData = async () => {
 const promises = [];
 for (const id in ids) {
 promises.push(axios.get(`${baseUrl}?id=${id}`));
 }
 const results = await Promise.allSettled(promises);
 results.map((result) => {
 // Check if the promise was fulfilled or it failed
 if (result.status === 'fulfilled') {
 // You can do anything here with the result.value
 }
 })
 console.log('Data fetched successfully');
}
getData();

Promise.allSettled helps you handle errors with ease by ensuring that all promises are settled, regardless of whether they’re fulfilled or rejected.

In conclusion, Async Await is a powerful tool for asynchronous programming, but it requires careful handling to avoid common mistakes. Using Promise.all and Promise.allSettled can help you avoid these pitfalls and make your code more robust.

The Roller Coaster Launch on Product Hunt!!

sanuj bansal — Tue, 20 Dec 2022 17:06:12 +0000

Hi All, I am a Sr. Developer working on a mission to create ecosystem of tools with Careerflow.ai to help people in their careers especially the job seekers.

Working towards the same goal I created a chrome extension to which I got way above expected response. The extension was liked and rated highly by the users. Later it got featured on the chrome store and we followed all the right practices in development. Here is the link - https://chrome.google.com/webstore/detail/careerflows-linkedin-opti/iadokddofjgcgjpjlfhngclhpmaelnli.

After good response, we got confident about our product and then we decided to launch our product on product hunt today. Here is the URL to the listing:-
https://www.producthunt.com/posts/careerflow-linkedin-optimization-tool.

We launched Careerflow's LinkedIn Optimization tool on Product Hunt on 20th Dec 2022 night at 12.01AM. The next 24 hours, we have been starting our screens and trying to push our rankings by saying Upvote us, Support us, Review us etc. wherever we could reach.

Here's a run-down of the night and day after launching on PH:-

⌛ Within the first hour, another product which released had 5X the amount of "upvotes" (the social currency on PH) than everyone else, obviously they were using bots / buying upvotes.

🏆 However, within the first two hours we were still hovering between #2 and #3 after the bot-driven company. The whole team worked hard to reach out to various product hunt community members we were in touch with, let our friends know about the launch, etc etc.

🚗 While I slept through the next couple hours ( ☕ only takes you so far), the rest of the team continued the outreach, and communication with various hunters.

🌅 As I woke up, we were at #4, however we noticed an interesting phenomenon. The now, #1 product was the previous #2 product, and the rankings kept changing minute by minute.... (There's some interesting behind the scenes drama that I'll save for another day)

🚨 By around noon, the PH team woke up and deleted a bunch of spam upvotes on the previous #1 and #2 products, but they were still far ahead of the rest. I was afraid that we will end up at #5 looking at the increasing votes rate of current number #5.

📈 Now it was my turn to take over and let all my friends, family, and community members know about the launch. We received tons of support from folks sharing in their various communities, groups, etc. And we jumped back to #3!

🥉 Towards the end we tried to get ourselves to the #2 rank and our supporters did really well, but with only a few votes difference, we still made it to number #3.

🎉 Although we were number #3 but we still are very happy to have the prestigious honor of being #3 on the product of the day list and we received a badge to embed as well.

The positive take away from the launch were:-

Initial votes make a lot of difference, the first ranked product is naturally voted more by people, so ask your team to join product hunt so when the launch happens, you already have an initial vote count.
Even the first launch could win the product of the day.
A company and product on a positive mission is genuinely appreciated by the community.
The "Cool" products are naturally liked more and the product hunt team pushed out notifications and tweets about them (clearly a bias).
The graph below clearly shows anything could happen till end hour.

Ending this article for now! If you have any questions or need any suggestions, feel free to reach out!

Thank you