DEV Community: vinaynvd

Realtime Polling web application with Python FastApi WebSockets, PyMongo, HTML & JavaScript

vinaynvd — Thu, 17 Jun 2021 11:55:59 +0000

Want to know, how I build a real time polling web application with these 5 elements

Python’s FastApi
Websockets.
PyMango
HTML, CSS, JavaScript.
chart.js (For polling graph, we are going to use).

Here's the link of my original article

6 Steps to publish your Chrome Extension in chrome web store

vinaynvd — Sat, 05 Jun 2021 05:56:02 +0000

Heya!!
I’m going to show how to publish our chrome extension to the chrome webstore.

Before that, Please read my part 1 article [6 steps to create a Chrome Extension using Angular] if you haven’t read. Part 1 article covers about creating a chrome extension (browser-notes chrome extension) & testing it locally.

Before publishing our extension, I’m going to add a new feature to the chrome extension which we’ve developed in the previous article & then we can publish our extension.

Adding “Export to HTML” Feature for our browser notes extension.

I’m adding the project’s github repo link here. You can refer notes-editor component in this project.

In this component I’ve added **Export to HTML **button.
You can refer to this path in my repo browser-notes-extension/src/app/notes-editor.

When a user clicks Export to HTML button, extension is going to download their copied/typed content in the form of html file.
Also, what ever you type or paste in our extension, It’s going to save in user’s browser local storage.

This extension will use your browser’s local storage to store content.

Now let’s go publishing our chrome extension into the chrome web store.
Here are the 6 steps to publish your Chrome extension successfully in to the chrome webstore.

Step 1 : Register for a Google developer account

A Developer account is a normal google account that is used for publishing **extensions or apps on **Play Store or Web Store.
We need this account to publish our extension in to the chrome webstore. It’s easy to create a developer account, You need to spend 5$ as one time signup fee. Then you will be able to publish up to 20 different extensions.

Step 2 : Creating New Item

Once you are an owner of Google developers account, you can go to your developer’s dashboard. Here’s how it looks

To publish our extension, click on new Item. It’s going to ask the zip file of your chrome extension project.

In our Angular application case, we’ve already built our extension in dist directory by running this command & zipped it. You can refer the step 5 of part 1 article.

ng build --prod

After generating the build of our extension, you can go to **dist **directory & zip the browser-notes folder. Drag & drop that zip file in Add new item dialog in developers dashboard.

Step 3 : Store Listing

When you’ve successfully added your zip file in step 2. It’s going to take you to store listing page. By default this page is going to read the values like Title, version..etc from the manifest.json file (which is in your zip file).

My extension was rejected when my description was too short & it contains excessive & irrelevant keywords. So I got a mail like this

For successful approval of your extension, please note these points,
1. **Need to write a **long explanatory description, which was approved for the very next day.
2. We need to have store icon of 128x128 **pixels.
**3. Need to provide at least 1 screenshot whose size **should be **1280x800 or 600x400. You can provide a maximum of 5 screenshots.
4. Need to provide 1 small promo tile of 440x280 size & Large promo tile of size 920x680 & **Marquee promo tile **of size 1400x560.

Step 4: Privacy practices

After filling form in your store listing page, you’ll be redirected to **Privacy practices **page. Here you need to provide the following information.

Single purpose : An extension must have a single purpose that is narrow and easy-to-understand.
Permission justification : Are you using the remote code, if Y*es **then provide the **justification. In our case No. **3. **Data usage *: What user data do you plan to collect from users now or in the future ? In our case, we collect only website content like text, images, hyperlinks..etc.

Finally you need to check these disclosures in Privacy practices

Step 5 : Payments & Distribution

Here in this step, you need to setup your payment, if you want to monetize your extension. Right now, I’m publishing this extension for free.

You can select the visibility of your extension to **Public, Private or Unlisted. **Distribution, Here if you want to make your extension available to **All Regions, **you can do that or you can select the countries listed.

Step 6 : Submit for review

This is the final step to submit your chrome extension for review. Here All apps go through an automated review process and in some cases, an app will be published without further manual review. There may be some instances in which a manual review will be required before the app is published based on chrome extension program policies. In some cases, where sensitive permissions are requested, review times and/or approval times may be longer.

Before hitting submit for review **button, I suggest hit **Save draft **button first.
Once your application is submitted & their review is done & approved, you will get an **email **like this from **chrome webstore.

Finally you can see your extension in chrome webstore, when you hit the **Link to published item.
**Here’s our Browser notes extension published in chrome webstore. & Here’s the Browser notes extension link in chrome web store.
Yayy!! I already had 5 users & 2 reviews.
Come on!! Don’t feel shy to try our extension too 😉

Conclusion

Here in this article, we’ve seen how to publish our extension successfully in chrome webstore. Building & publishing chrome extension is easy, Use your creativity & publish your own extension in the web store.
Hope, this article helped you to begin your journey to successfully publish your extension.

Want to thank me ? Please show your Support & Love by buying me a coffee ☕ by hitting the below link 😃

https://www.buymeacoffee.com/vinaynvd

Thanks Alot!! 🙂

6 steps to create a Chrome Extension using Angular

vinaynvd — Fri, 04 Jun 2021 07:41:20 +0000

We all use chrome extension, don’t we ? We use them everyday in our browsers like Adblock, Dark reader, LastPass, FoxClocks…etc.

What do these chrome extension dooo…. ?
They add extra features to your chrome browser. You can customize & personalize on your desktop browser.

Let’s create a chrome extension

I’m a beginner in angular, but I’ve created a **Browser Notes chrome extension . **You can make use of this extension for free.

Let’s create a chrome extension, which can be used for write or pasting notes. With this extension, you can copy the contents for making notes & export it as html file.

In my next blog, I’ll be sharing how to publish our extension in chrome web store.

Now in this blog, let’s bother about creating an extension. Follow these steps :

Step 1 : Setup Angular Project in your local

Before creating an angular project, make sure you have npm installed already.
Then you can start installing angular/cli, If you don’t have in your local.

npm install -g @angular/cli

**Create a new workspace
**After installing angular/cli, we need to create a workspace for our project. Run this command.

ng new browser-notes-extension

I’m creating a new project by name **browser-notes-extension **in my local. It’s going to take few minutes to setup. After creation of new workspace, run these 2 commands.

cd browser-notes-extension
npm install --save bootstrap

First command is to go to your project directory & second one is for installing bootstrap.
Now Open angular.json file & bootstrap min css & js files in styles & scripts under build.

"architect": {
  "build": {
    [...], 
    "styles": [
      "src/styles.css", 
      "node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "node_modules/bootstrap/dist/js/bootstrap.min.js"
      ]
    },

Cool! We have our angular project setup in our local. We can run it with this command.

ng serve --open

It’s going to run your project in your default browser on port 4200. This’ll be the link http://localhost:4200

Step 2 : Write chrome extension code.

We’ll start with text editor

For our browser-notes-extension, we need text editor. So that we can type our notes or we can copy important notes from other sites.

Writing a text editor from scratch is Pain in the A (Please don’t ask what is A 😉). So instead of writing the text editor, I’m using already available ones **Medium-editor**.

Medium-editor is a simple inline editor with toolbar & this is not affiliated with medium.com. This editor serves our purpose & it is available as npm package too.

Install medium editor with this command

npm install medium-editor --save

Now in your angular project, medium-editor is installed. We need to integrate medium-editor with our script. So open your angular.json file & add this line in scripts array.

"scripts": [
              "node_modules/medium-editor/dist/js/medium-editor.min.js"
            ]

Step 3: Integrating text editor

Before directly adding text editor, we also need to import css in to our application. So open styles.scss/styles.css file and these lines in top.

@import '~medium-editor/dist/css/medium-editor.min.css';
@import '~medium-editor/dist/css/themes/default.min.css';

They are going to import medium-editor styles in to your application.
Now final touch, replace all the static html code from app.component.html file with this one

<div #medium-editor></div>

Yupp!!! We’ve integrated text editor successfully. But it won’t work 😅.

Step 4: To Make it work

To make our text editor work, we need to add few properties in our app.component.ts file.

import { Component, AfterViewInit, ViewChild, ElementRef } from '[@angular/core](http://twitter.com/angular/core)';

declare const MediumEditor: any;[@Component](http://twitter.com/Component)({
  selector: 'app-editor',
  templateUrl: './editor.component.html'
});

export class AppComponent implements AfterViewInit {
  editor: any;
  title = 'browser-notes-extension';
  [@ViewChild](http://twitter.com/ViewChild)('medium-editor', { static: true }) medium-editor:ElementRef;
  editorConfig = {
                 imageDragging: true,
                 toolbar: false,
                 anchorPreview: true,
                 autoLink: true,      
                 paste: {
                         forcePlainText: false,
                         cleanPastedHTML: false,
                         cleanAttrs: ['style', 'dir'],
                         cleanTags: ['label', 'meta']
                 },
                 buttonLabels: false,
                 keyboardCommands: false,
                 placeholder: {
                               hideOnClick: true
                              },
                 spellcheck: true,
                 updateOnEmptySelection: true
                }

  constructor() { }

  ngAfterViewInit(): void {
   // Initializing the editor object after view init.
   this.editor = new MediumEditor(this.medium-editor.nativeElement, this.editorConfig);
  }

}

Here in the above code, we’ve added our editorConfig. They can be modified according to your needs, you can find more options to modify your text editor from here yabwe/medium-editor .

Step 5: Converting our application to chrome extension

We have fully working text editor application. We just need to convert it to chrome extension. Here’s how we do it.

First we need to define the size of our chrome extension popup. Chrome extension popups can have a maximum height of 600px and maximum width of 800px. Changing the width or height using CSS on the html or body element will just cause scroll bars.

Open styles.css/styles.scss file and these lines

html { 
     position: relative; 
     min-height: 
} 
body { 
     margin: 0; 
     font-family: Roboto, “Helvetica Neue”, sans-serif; 
     width: 400px; 
     height:430px !important; 
     overflow-y: scroll; 
     overflow-x: scroll;
} 

/* Hide scrollbar for Chrome, Safari and Opera */
#medium-editor::-webkit-scrollbar { display: none;}

Next add manifest.json file in src folder. Here’s the directory structure
browser-notes-extension/src/manifest.json

This manifest.json file is going to define the chrome extension. Add these lines in manifest.json

{    
    "name": "Browser Notes",
    "version": "2.0",
    "description": "You can take notes, which includes text, lists, links & images. We can export our notes in the form of html..",
    "manifest_version": 2,
    "browser_action": {
        "default_icon": {
            "19": "assets/path-to-your-icon-image (it should be in png form)",
            "38": "assets/path-to-your-icon-image (it should be in png form)"
        },
        "default_popup": "index.html"
    }
}

Finally!! We did it.

Now let’s build our project by running this command.

ng build --prod

This command is going to build our project in dist directory. Directory structure : browser-notes-extension/dist/browser-notes-extension

Zip **browser-notes-extension **folder in dist directory. So that we can use it for testing.

Step 6 : Test it

To check if our application can be run as chrome extension or not, we first need to enable developers mode in our chrome browser. You can check it here.

Next in application’s terminal/cmd run this

Now in url bar type

chrome://extensions

It’s going to launch extensions page. Now you can see load unpacked option as shown in the below image & check the Developer mode in the top right too.

Now click on load unpacked button & select your zipped project from dist directory. If there are no errors in our application, it’ll be active directly. Otherwise, it’s going to throw up some error message & you can resolve it & rebuild & re-upload it.

Now you can check your extension in your extensions page (chrome://extensions)

Finally, you know how to pin your extension & use it. This is the end output

You can see the demo of working browser-notes extension here .

In my next article

I’ve done abit styling and code to “Export to html” functionality.
How to publish our chrome extension & make it public. Here’s the link

Conclusion

Building an extension doesn’t require much work. You just need a manifest.json, right css, images & proper functionality of your code.

If you want your application to manage events with background scripts, you can add background.js script file in your manifest.json as shown here & write your background.js’s scripts in it.

Use this link for managing events with background scripts for reference. Here’s the chrome extension documentation link.

Want to thank me ? Please show your love by buying me a coffee ☕ by hitting the below link 😃

https://www.buymeacoffee.com/vinaynvd
Thank You 🙏