DEV Community: Seth Addo

From Zero to Chrome Hero: How to Build and Launch Your Own Browser Extension

Seth Addo — Thu, 29 Aug 2024 10:44:13 +0000

Chrome extensions are powerful tools that can enhance your browsing experience. In this detailed blog post, I'll walk through the process of creating a simple Chrome extension and uploading it to the Chrome Web Store. Get ready to transform from a coding caterpillar into a Chrome butterfly!

Step 1: Develop Your Extension

Create a new directory for your extension.
Create a manifest.json file:

   {
     "manifest_version": 2,  // Specifies the version of the manifest file format
     "name": "My First Extension",  // The name of your extension
     "version": "1.0",  // The version of your extension
     "description": "A simple Chrome extension.",  // A brief description of your extension
     "browser_action": {
       "default_popup": "popup.html"  // Specifies the HTML file to be used as the popup
     },
     "permissions": [
       "activeTab"  // Requests permission to access the currently active tab
     ]
   }

The manifest.json file is the heart of your Chrome extension. It provides important information about your extension to Chrome, such as its name, version, and required permissions. Please remove comments before proceeding

Create popup.html:

   <!DOCTYPE html>
   <html>
     <head>
       <title>My First Extension</title>
     </head>
     <body>
       <h1>Hello, World!</h1>
       <script src="popup.js"></script>  <!-- Links to the JavaScript file -->
     </body>
   </html>

This HTML file defines the structure of your extension's popup. It's a simple page with a heading and a link to a JavaScript file.

Create popup.js:

   document.addEventListener('DOMContentLoaded', function() {
     console.log('Extension popup loaded');
   });

This JavaScript file contains the logic for your extension's popup. The event listener waits for the DOM to be fully loaded before executing the function, which simply logs a message to the console.

Test your extension locally:
- Open Chrome and go to chrome://extensions/
- Enable "Developer mode" in the top right
- Click "Load unpacked" and select your extension directory

These steps allow you to load and test your extension in Chrome without publishing it to the Web Store.

Step 2: How to Make Your Extension Look Snazzy

Prepare for Submission

Create high-quality icons:
- 16x16: For favicon
- 48x48: For extension management page
- 128x128: For Chrome Web Store

These icons represent your extension in various places in Chrome and the Web Store.

Take screenshots (1280x800 or 640x400 pixels):
- Capture your extension in action
- Highlight key features

Screenshots give potential users a preview of your extension's functionality.

Write a compelling description:
- Clearly explain what your extension does
- List key features and benefits
- Use bullet points for readability

A good description helps users understand your extension and can improve its visibility in search results.

Choose appropriate categories:
- Select up to 5 relevant categories
- This helps users find your extension

Proper categorization makes it easier for users to discover your extension when browsing or searching the Web Store.

Step 3: Create a Developer Account (The $5 Ticket to Extension Stardom)

Go to the Chrome Developer Dashboard.
Sign in with your Google account or create a new one.
Pay the one-time developer registration fee ($5 USD).
Verify your email address if required.

This step is necessary to publish extensions on the Chrome Web Store. The fee helps prevent spam and low-quality extensions.

Step 4: Upload Your Extension

Click "New Item" in the developer dashboard.
Create a ZIP file of your extension:
- Include all necessary files (manifest.json, HTML, JS, CSS, icons)
- Exclude any unnecessary files or directories
Upload the ZIP file.
Fill in all required fields:
- Detailed description
- At least 2 screenshots
- Promotional tile image (440x280 pixels)
- Icons (16x16, 48x48, 128x128)
- Select primary category and additional categories
Set visibility options:
- Public: Visible to all users in the Chrome Web Store
- Unlisted: Accessible only via direct link
Set up pricing and distribution:
- Free or paid (if paid, set up a Google Payments Merchant account)
- Choose which countries to distribute in

These steps guide you through the process of submitting your extension to the Chrome Web Store.

Step 5: Publish Your Extension (The Moment of Truth)

Review all information for accuracy.
Accept the Developer Agreement.
Click "Publish" to submit your extension for review.
Wait for Google to review your extension:
- Usually takes a few business days
- You may be asked to make changes if issues are found
Once approved, your extension will be live in the Chrome Web Store!

Google reviews all extensions to ensure they meet the Web Store's policies before making them available to users.

Step 6: Maintain and Update Your Extension

Regularly check for user feedback and bug reports.
Update your extension to fix bugs and add new features:
- Increment the version number in manifest.json
- Upload a new ZIP file with changes
- Submit for review again
Respond to user reviews and questions.
Stay informed about Chrome extension policy changes.

Maintaining and updating your extension is crucial for its long-term success and user satisfaction.

How to Avoid Chrome Extension Faux Pas

Security: Minimize required permissions to build user trust.
Performance: Optimize your code to avoid slowing down the browser.
User Experience: Create an intuitive and responsive interface.
Documentation: Provide clear instructions on how to use your extension.
Testing: Thoroughly test on different versions of Chrome and various websites.

Following these best practices will help ensure your extension is secure, efficient, and user-friendly.

By following this comprehensive guide, you'll be well-equipped to create, publish, and maintain a successful Chrome extension. Remember, the key to a popular extension is solving a real problem for users in a simple and effective way. Now go forth and extend that browser!

What is this weird CSS Syntax?

Seth Addo — Fri, 28 Jun 2024 06:53:42 +0000

So I came across this yesterday and I want to share with you. Say you have div container with class of list and inside it are 10 more div each with a class of item,

<div class="list">
  <div class="item"></div>
  <div class="item"></div>
  etc..
</div>

with this CSS style:

.list .item:hover + * + * {
   // some styles
}

Explanation

we already know that + means the adjacent element, but the asterisk added allows the user to select the adjacent element which also has the same class.

The asterisk (*) character is used to expand the recognizable element types immediately after the hovered item class

This means that in the style specified above, we want to apply the styles to the second adjacent item of the same class (i.e .item). So if there are five adjacent div elements and I hover on the third element, the styles provided will affect the fifth element.

Check out this YouTube video below for a better understanding of how it works:

Spin up a full text editor in your browser 🌐 with GitHub Codespaces

Seth Addo — Mon, 12 Dec 2022 15:06:09 +0000

What Is GitHub CodeSpaces?

It was launched by GitHub a while ago

GitHub Codespaces is an instant, cloud-based development environment that uses a container to provide you with common languages, tools, and utilities for development. GitHub Codespaces is also configurable, allowing you to create a customized development environment for your project.

You can use Visual Studio, VS Code, Jupyter, or JetBrains with the editor, terminal, debugger, version control, settings sync, and all of your extensions. Work from any device in a browser, or you can run it in your local machine.

Benefits Of GitHub CodeSpaces

You can use bigger RAM or disk space that your local environment (your PC) does not have.
It is fast
You get all the features of an editor (including the terminal). You can install extensions sync your local setting to it.
Works seemlessly with GitHub

If you are excited about this, then read this article on how to set it up.

Hacktoberfest - Get Gifts By Contributing To Open Source Repos

Seth Addo — Tue, 04 Oct 2022 01:06:55 +0000

What is Hacktoberfest

Open Source is changing the world, one contribution at a time.
Hacktoberfest is a month-long celebration of open source development run by Digital Ocean. It is open to everyone, from firs-time contributors to seasoned open source developers.
Your journey starts with a pull request. After submitting four pull requests, you get the chance to win a T-Shirt or Plant a tree
This year's hacktoberfest is presented by DigitalOcean, AppWrite, and Docker.

Contribute

Anyone around the globe who desires to help drive the growth of open source and make positive contributions to an ever-growing community. All backgrounds and skill levels are encouraged to participate and learn more.

To contribute, Always look for repositories on GitHub with the #hacktoberfest-2021 or #hactoberfest tag
Hacktoberfest Link

Ways To Contribute To Repositories:

Bug Fixes
Writing tests for projects
Writing of Documentations/Technical Writing
and many more

Some Projects To Contribute:

Quotes-Generator: Quotes-Generator is an open source Website that generates random quotes. Link To Quotes-Generator

Search for repositories with the hacktoberfest label on GitHub

Thanks for your time and don’t forget to be friends with me on:

How to Write a Great Resume

Seth Addo — Sat, 20 Aug 2022 15:39:21 +0000

Resume Screeners

Resume screeners look for the same things that interviewers do. They want to know that you're smart and that you can code.
That means you should prepare your resume to highlight those two things. Your love of tennis, traveling, or magic cards won't do much to show that. Think twice before cutting more technical lines in order to allow space for your non technical hobbies.

Appropriate Resume Length

In the US, it is strongly advised to keep a resume to one page if you have less than ten years of experience.
More experienced candidates can often justify 1.5 - 2 pages otherwise. Think twice about a long resume. Shorter resumes are often more impressive. Recruiters only spend a fixed amount of time (about 10 seconds) looking at your resume.

If you limit the content to the most impressive items, the recruiter is sure to see them. Adding additional items just distracts the recruiter from what you'd really like them to see. Some people just flat-out refuse to read long resumes. Do you really want to risk having your resume tossed for this reason?

If you are thinking right now that you have too much experience and can't fit it all on one or two pages, trust me, you can. Long resumes are not a reflection of having tons of experience; they're a reflection of not understanding how to prioritize content.

Employment History

Your resume does not and should not include a full history of every role you've ever had. Include only the relevant positions, the ones that make you a more impressive candidate.

Writing Strong Bullets

For each role, try to discuss your accomplishments with the following approach: "Accomplished X by implementing Y which led to z:· Here's an example:

"Reduced object rendering time by 75% by implementing distributed caching, leading to a 10% reduction in log-in time:· Here's another example with an alternate wording:

"Increased average match accuracy from 1.2 to 1.5 by implementing a new comparison algorithm based on windiff:'

Not everything you did will fit into this approach, but the principle is the same: show what you did, how you did it, and what the results were. Ideally, you should try to make the results "measurable" somehow.

Projects

Developing the projects section on your resume is often the best way to present yourself as more experienced. This is especially true for college students or recent grads. The projects should include your 2 - 4 most significant projects. State what the project was and which languages or technologies it employed.

You may also want to consider including details such as whether the project was an individual or a team project, and whether it was completed for a course or independently. These details are not required, so only include them if they make you look better. Independent projects are generally preferred over course projects, as it shows initiative. Do not add too many projects. Many candidates make the mistake of adding all 13 of their prior projects, cluttering their resume with small, non-impressive projects. So what should you build? Honestly, it doesn't matter that much.

Some employers really like open source projects (it offers experience contributing to a large code base), while others prefer independent projects (it's easier to understand your personal contributions). You could build a mobile app, a web app, or almost anything. The most important thing is that you're building something.

Programming Languages and Software

Software
Be conservative about what software you list, and understand what's appropriate for the company. Software like Microsoft Office can almost always be cut. Technical software like Visual Studio and Eclipse is somewhat more relevant, but many of the top tech companies won't even care about that. After all, is it really that hard to learn Visual Studio? Of course, it won't hurt you to list all this software. It just takes up valuable space. You need to evaluate the trade-off of that.
Languages
Should you list everything you've ever worked with, or shorten the list to just the ones that you're most comfortable with? Listing everything you've ever worked with is dangerous. Many interviewers consider anything on your resume to be "fair game" as far as the interview.

One alternative is to list most of the languages you've used, but add your experience level. This approach is shown below:
Languages: Java (expert}, C++ (proficient), JavaScript (prior experience). Use whatever wording ("expert'; "fluent'; etc.) effectively communicates your skillset. Some people list the number of years of experience they have with a particular language, but this can be really confusing. If you first learned Java 10 years ago, and have used it occasionally throughout that time, how many years of experience is this? For this reason, the number of years of experience is a poor metric for resumes. It's better to just describe what you mean in plain English.

Conclusion

Where possible, try to truly diversify. The languages in the cluster of {Python, Ruby, and JavaScript} are
somewhat similar to each other. It's better if you can learn languages that are more different, like Python,
C++, and Java.

Thanks for your reading this article and don’t forget to be friends with me on:

Reference:
Cracking The Coding Interview Book

How To Activate "God Mode" on Windows

Seth Addo — Fri, 11 Feb 2022 16:38:48 +0000

Windows God mode

Windows God mode puts an icon on your desktop that contains quick access to over 200 settings you might need. Windows God Mode originated with windows vista in 2007. It can be activated in windows 10 and Windows 11.

The God Mode menu is very simple to implement but can be a bit difficult to remember since it requires entering a long sequence of characters

To implement the God Mode icon on your desktop.
"up, up, down, down, left, right, left, right, B, A." No, wait. Wrong cheat code. Just follow these two simple steps.

*Right-click on your desktop and select Create Folder.

*Now name it: GodMode.{ED7BA470-8E54-465E-825C-99712043E01C}, Now press Enter.

The folder icon will transform into what looks like a small control panel. Congratulations! You have activated God Mode!

Why God Mode?

God Mode is quite handy if you hate trying to navigate through the ever-changing Windows Control Panel a.k.a. Settings menu. God Mode gives you instant access to every control in Windows, including some you will not find in the regular Settings app, Some of these settings are well hidden.

Obviously, there are going to be tons of settings in the God Mode folder you will never use -- probably most of them -- but there are a few that frequently come in handy.
or
Thanks For Reading, Don't Forget to follow me here and on twitter @set_addo

The Best Productivity Tools You Will Ever Need

Seth Addo — Fri, 28 Jan 2022 16:52:39 +0000

Lorem Picsum Lorem Picsum is a placeholder generator for pictures, with lots of customization options. Provide parameters for your images directly in the URLs.

2.Remove.bg
Remove the background of any photo automatically. Just select your image and instantly download the resulting image with the background removed.

3.PFPmaker
PFPMaker generates professional profile pics from any photo. It uses background removal AI, beautifies your photo, and generates dozens of profile pic variations automatically.

4.Compressor.io
One of the most efficient image compressors out there with a modern-looking UI.

5.CSSGradient
CSS Gradient makes it dead simple to create fresh web gradients. Includes a collection of tools to help you level up your gradient game.

6.Neumorphism.io
Neumorphic shapes look incredible but are difficult to create. This generator makes it easy to create the shapes you’ve envisioned.

7.Animista
Animista is a great tool for creating custom CSS animations with various effects. Once you created your animation, generate the code and integrate it into your project.

8.FontJoy
Fontjoy finds interesting font pairings using the embedding layer of a neural net. Click a button and a unique pairing is served upon our minimal interface.

9.Logo Ipsum
When in a rush to get a placeholder logo, feel free to use Logo Ipsum with tons of available choices and different logo designs fitting every need.

10.Carbon
Create and share beautiful images of your source code. Another great alternative is ray.so.

10 GitHub Repositories You Should Know

Seth Addo — Mon, 24 Jan 2022 00:24:45 +0000

In this article, I have curated a list of GitHub repositories that contains interesting Open Source projects on the internet. There are other resources of all kinds: ranging from basics of API's, roadmaps, and to projects ideas and more. Check the list below;

1. Developer Roadmap

GitHub⭐: 184K+

Need some advice for getting started to your developer journey? then this repository will guide you through. It has all the technologies you need to know if you want to become a Frontend or Backend or DevOps Engineer. It has all the alternative technologies from which can choose whatever suits your need or comfort.

2. Free Programming Books

GitHub⭐: 184K+

Even though it has "Books" in its name, it offers a lot more than that. It contains sections of free online courses, interactive programming resources, problem sets and competitive programming, programming playgrounds and podcasts and cheat sheets for almost every programming language.

But has a major collection of programming books which makes it an "Awesome" collection. Link To Repository

3. OSSU Computer Science

GitHub⭐: 84K+

If you don't have a computer science background or degree and want the equivalent knowledge same as a Computer Science degree then this repository is for you. It's for those who want a proper, well-rounded grounding in concepts fundamental to all computing disciplines. It offers all the resources to help you become a self-taught computer science graduate equivalent and has a worldwide community of learners.
Link To Repository

4. Awesome

GitHub⭐: 150K+

As the name describes it has an Awesome lists of all kinds of interesting topics ranging from computer science to media, from gaming to business and the list goes on.
Link To Repository

5. Public API's

GitHub⭐: 184K+

Public Apis has a collective list of all the free API's available on the internet to use in your personal or professional projects. It offers a wide range of Application Programming interfaces (APIs) such as business, anime, animals, news, finance, games, and more.

6. Tech Interview Handbook

GitHub⭐: 50K+

It has a variety of material regarding How to prepare for coding interviews, Good questions to ask your interviewer, Helpful tips on resume, and many more.
Link To Repository

7. Awesome Repos

It has a number of resourceful repositories packed in just one place. All you have to do is just visit this repository and that's it.
Link To Repository

8. Build Your Own X

GitHub⭐: 100K+

If you are a person who believes in the principle of "Learning by doing" then this repository has the potential of becoming your daily stop at GitHub. It has links to the resources which help you build your own Cryptocurrency, Database, Bots, BitTorrent Clients, and many more.
Link To Repository

9. Coding Interview University

GitHub⭐: 160K+

Coding Interview University has a multi-month study plan to become a software engineer for a large tech company like Google, Amazon, Facebook, Apple, or any other software company. It offers advice on how to study to become a reliability engineer or operations engineer. It also has links to the flashcards for quickly brushing up your knowledge and stay updated originally created by the author of the repository who landed a job at Amazon. And there are much more success stories like that.
Link To Repository

10. Design Resources for Developers

GitHub⭐: 25K+

This repository has a curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more, available for free to use in your projects and applications.
Link To Repository

Thanks for reading this article. Follow me on twitter: @set_addo.

Follow me on:
Twitter: @set_addo
LinkedIn: Seth Addo

CrowdSource Vocalize Campaign (Earn Free Goodies)

Seth Addo — Wed, 24 Nov 2021 16:36:01 +0000

What Is CrowdSource?

Crowdsource is an android app from Google used for training various machine learning models through individual contributions. Individuals can signup and help train various machine learning models including speech recognition, text recognition and many more and stand a chance to win many amazing prizes.

Vocalize Campaign

The Vocalize Campaign is an initiative created by the Google Speech team to include selected languages into their dataset through the new Audio Donation task on the Crowdsource App.

Who Can Participate In The Campaign

Android Users (since Crowdsource app is only on android phones)
Anyone who speaks the following languages - [Africa] Akan, Hausa, Igbo, Kinyarwanda, Sesotho, Shona, Somali, Wolof, Yoruba. [India] Assamese, Gujarati, Hindi, Kannada, Malayalam, Odia, Tamil, Telugu.
Anyone who is at least 18 years of age

How To Participate

Download the CrowdSource App on PlayStore
Sign up with your email address
Now, Sign up for the campaign by filling this form - Vocalize Campaign

You will be asked to select your language(s) and a preferred team color. Depending on the color that you select, you will become a part of the four teams: Green (fyi, this is my team), Blue, Red and Yellow (You will be grouped with other participants across the two regions that made the same selection as you) - After a fun and friendly competition of contributing to the audio donation task, one group will emerge as the winner!

Contribute to the Audio Donation task on the CrowdSource app across a period of two months(Nov 15, 2021 to Jan 14, 2022); participate in campaign meetups and other activities.

Special Surprise!

Members of the top contributing group(out of the four cross-regional teams) and individual top contributors within each language will receive a curation of exciting goodies!.

Thanks For Reading and don't forget to follow me for more exciting opportunities like this one

Microsoft Learn Student Ambassador Program

Seth Addo — Mon, 15 Nov 2021 14:58:24 +0000

What Is Microsoft Learn Student Ambassadors Program?

Microsoft Learn Student Ambassador program is aimed at bringing students all over the world who has interest in technology together. These students get the opportunity to connect and interact with others on topics they are passionate about (mostly Microsoft Technologies). Also, they are able to organize events to teach each other various tech stacks.

Application Requirements

You must be 16 years or older.
You must be enrolled in an accredited academic institution(eg: college, university).
You must not be a Microsoft or Government employee.
You need to at least have some basic knowledge in coding.

Why Should You Join?

There are a lot of benefits for joining this amazing program. A few of them are listed below:

Free Swag Box from Microsoft
Access to Microsoft 365
Access to TechSmith products(i.e Camtasia and Snagit)
Name.com voucher
Azure credits
LinkedIn Learning Voucher

NOTE: Some of these benefits are given to you based on the milestone you have achieved.

How Do I Apply Then?

To apply, Use this Link: Apply for MLSA

Steps Involved:

Login or Create a new Microsoft account. After that, Click o Apply Now.
Read all the Terms and Conditions. Once you are done with the conformation, Click on Next to move to the Personal Information section.

Here, you will fill the fields with information about yourself (i.e your Name, Gender, Date of Birth, etc)
Now move onto the Academic Institution section, Enter the required information about your academic institution. After that, Let's go to the Written Sample section.
The Written Sample section is one of the most important section. Here you will talk about why you want to be a part of the program, how you will get students to attend your events and also how you will teach technical concepts to beginners. This helps the recruiters to see how valuable and passionate you can be to the program.

NOTE: For one of the 3 questions, you will have to produce a video presentation of yourself explaining that particular topic you have chosen.

When you are done with that, move to the social media section. Here, as the name indicate, you will provide links to your social media accounts including LinkedIn, twitter, Instagram, Stack Overflow, etc. If you have written an article about any tech product you can provide a link to it. You can also provide links to your portfolio website if you have one.

NOTE: This section is also very important because your online presence, projects and other amazing stuffs you have been will be viewed.

Finally, Now move to the Final Section (Additional Information), Provide any other information about yourself (it can be achievements or personal stuffs about you) that you think the recruiters need to know about you.

I hope that this was helpful to you. If you have any questions, please drop it in the comment section below and I will make sure to answer all questions you have. Also, you can connect with me on:
Twitter: https://twitter.com/set_addo
LinkedIn: https://linkedin/in/seth-addo-034327190

Thanks For Reading

Let's Discuss

Seth Addo — Fri, 12 Nov 2021 14:32:16 +0000

connect with me on twitter and let's about tech, If you have any questions about my journey, you can ask me on

Twitter

Responsive Design With CSS Media Queries

Seth Addo — Fri, 29 Oct 2021 10:41:02 +0000

It is very important to be able to design a website whose contents looks good on all screen sizes

What Exactly Is Responsive Design?

Responsive Design is the process of making your web content fit all screen sizes (ranging from mobile phones to large screens like desktop screen and much bigger screen). Every element or component on the site should be able to automatically adapt to the specific devices that opens the website.

An important thing to look at when we talk about responsive web design is media queries.

What Then Is Media Queries?

In CSS, a media query is used to apply a set of styles based on the browser's characteristics including width, height, or screen resolution. This allows the programmer to provide certain features on each devices, Thus you may see a search bar on larger screens but only a search button on a smaller screen.

Media Query Syntax

This is the basic syntax for a media query in CSS

@media media-type(media-feature){
  /*styles go here*/
}

Let's try to understand the syntax above, The @media is a type of At-rule in CSS. These rules will dictate what the CSS will look based on certain conditions.

The media-type refers to the category of media for the device. The different media types include all, print, screen and speech.

all - works for all devices
print - works for devices where the media is in print preview mode
screen - works for devices with screens
speech - works for devices like screen readers where the content is read out loud to the user.

According to documentation, Except when using the not or only logical operators, the media-type is optional and the all type is implied.

You can choose to omit the media-type and use the following syntax instead,

@media (media-feature){
  /*styles go here*/
}

If you want to create more complex media queries, then you can use logical operators like and, not or ,.

Devices and Their Width

Mobile Devices : 320px - 480px
Ipads, Tablets : 481px - 768px
Small Screens, Laptop : 769px - 1024px
Desktops, Large Screens : 1025px - 1200px
Extra Large Screens,TV's : 1201px and more

Examples

If we want to change the background color of a website to blue for only mobile devices and tablets, we will use the code below

@media (max-width: 768px){
  body{
    background-color: blue;
  }
}

Conclusion

If you want your website to look good and also to be able to run on more devices, then responsive design is a necessity for you.
Thank you for taking your time to read this article.

Please follow Me On:

by clicking on the link for more tech inspired tweets, articles and more...