Thursday, April 25, 2019

Publish in the Chrome Web Store


To publish your app to the Chrome Web Store, follow these steps:
  1. Create your app’s zip file
  2. Create a developer account
  3. Upload your app
  4. Pick a payments system
  5. Get app constraints and finish your app’s code
  6. Get the app ID
  7. Get the OAuth token
  8. Finish the app
  9. Provide store content
  10. Pay the developer signup fee
  11. Publish your app
We’ll go into detail about each step below.
To upload your app, you need to create a ZIP file that contains at least one file: your app's manifest.
Manifest files are .json files that contain important information about your app. They contain the following:
  • App name - Displayed in the Chrome Web Store and in the Chrome launcher
  • Version - The version of the metadata, incremented
It should also contain a few images and any other files that the app requires. The contents of the ZIP file and manifest depend on the type of app you're writing and its capabilities. For details, see the documentation for the type of app you're writing:
Required itemHosted appsAppsThemesExtensions
Manifest fileYesYesYesYes
Background scriptYesYes
Window pageYes
  • Set the initial version number in the manifest to a low value, such as That way, you have room to increase the version number when you upload new versions of your app.
  • If your packaged app or extension uses Native Client, you can structure your application directory hierarchy and ZIP file in a way that reduces the size of the user download package. For details, see Reducing the size of the user download package.
Before you upload your app, you’ll be asked to pick a developer account to both own your apps and receive payments. Instead of your personal account, we suggest using a dedicated account.
We suggest using a new account just for your app instead of your personal account.
If you want to publish a hosted app, you'll need to prove that your developer account owns the URLs that comprise the app. Visit the Google Webmaster Tools Help Center for information on proving site ownership.
If you already host your app in Google Play and you want your Chrome Web Store app listing to show an "Available for Android" link, your app must have the same name as your Google Play listing, and both apps must be owned by the same developer account.To transfer your Chrome Web Store app to a different developer, submit this form.
To upload your app, use the Chrome Developer Dashboard.
If you need the app ID or an OAuth access token to complete your app's code, then you need to upload the app while you're still writing its code. Otherwise, you can wait until the app is finished. You can upload your app many times before publishing it.
When your app, its Chrome Web Store listing, and all the sites it relies on are ready, you can publish your app. You can publish up to 20 applications on Chrome Web Store.
Here's how to upload your app:
  1. Sign into the developer account you chose in Step 1.
  2. Click the Add new item button.
  3. If you've never uploaded an item before, you need to accept the developer agreement before going to the next step.
  4. Click Choose file > your zip file > Upload. If your app's manifest and ZIP file are valid, you can edit your app on the next page.
If you aren't going to use Chrome Web Store Payments, you can delay or (for free apps) omit this step.
If you want to charge for your app, set its price and payment system through the dashboard's edit page for your app.
To use Chrome Web Store Payments, you also need to signup your developer account as a Google Checkout merchant, and you need to associate your merchant account with the store. For details, see Register for a Google Checkout Merchant account.
Add the store listing information for your app that isn't in the ZIP file, such as a long description, screenshots, videos, and links to related sites. You’ll need the following to finish your app’s store listing:
  • detailed description of your application. Write your description to entice users to download your app.
  • A 128x128 icon to display in the store. You may re-use your app icon here.
  • At least one 1280x800 or 640x400 screenshot or YouTube video to show off what your app does.
  • A 440x280 small tile icon that will be displayed on the Chrome Web Store wall.
  • The primary category where your app should be listed.
  • Your app's language to help users find it.
See Supplying Images for help on designing the images for your app, and Branding Guidelines for information on how you can use Google brands.
Before you publish your first app, you must pay a one-time $5 developer signup fee. A reminder in the dashboard will appear until you pay the fee.
For more information, including troubleshooting tips, see the Registration article.
When you publish your app, you’ll get an app ID. If you make requests to Google APIs, you’ll need this information. For example, if you need the licensing API, you’ll need the app ID.
To get the app ID or OAuth token for your app’s code, follow the steps below:
The app ID appears in the URL of any dashboard or store page for your app. You’ll need the app ID if you want to use the Licensing API.
For example, the URL "" has the app ID “aaaaaaaaaabbbbbbbbbbcccccccccc.”
If you want to use Chrome Web Store Payments, you’ll need an OAuth access token and access token secret.
Now you can add any code that refers to the app ID or OAuth access token to complete your app.
You can update your app as many times as you want, just remember to increase the version number each time.
Before you publish your app, verify that everything is working properly:
  1. On the edit page, click Preview changes and check that the listing looks great and has all the info that it should.
  2. Check that the app and any websites and supporting pages all work.
  3. Publish any new websites and supporting pages that your app needs to work.
  4. Publish your app. You can choose the audience for your app using the information below:
When you publish to test accounts, your app’s store listing only appears to you and any users who are logged into these test accounts that you specify. Your app won’t appear in search results, so you’ll need to give testers a direct link to your app’s listing. Testing also gives you a chance to see how the license server integrates with your app if you plan to charge your it using Chrome Web Store Payments.
To edit your list of accounts, click Edit your tester accounts. You can enter single accounts, or create a Google Group so that this set of users can test your app. See the section below to learn how to set up Group Publishing.
Once you’re ready to publish, click Publish to test accounts.
You’ll need to unpublish the app if you want to publish to the world later.
You can share ownership of your items in Google Chrome Web Store with other developers by setting up group publishing. With group publishing, you can add developers to a Google Group, who can then act on your behalf. They'll have access to all the items you own and can make any changes to them that you can make.
Keep these important notes in mind:
  • Creating a Group Publisher is not reversible: a new Group Publisher account is created and the Google Group you select is permanently linked to that account.
  • You cannot change which group is linked to the Group Publisher account.
  • You still retain your personal publishing account and can publish from either your group or personal account.
To set up group publishing, follow these steps:
  1. Sign in to your Chrome Web Store dashboard page.
  2. If you don't see a drop-down at the top of dashboard page, go to step 3.
  3. If you do see a drop-down, you've already been added to group publishing by another developer. From the drop-down, select your own account instead of the group publisher account.
  4. At the bottom of the dashboard page, you'll see one of two links:
    • Google Group publishing: Choose existing group or create new group This link shows up if you're the owner of one or more Google Groups, and those groups haven't already been linked to a publisher account.
    • Google Group publishing: Create new group You'll see this link if you aren't an owner of any Google Groups, or if all the groups that you are an owner of have already been linked to other publisher accounts.
  5. You can do one of the following:
    • Create a new Google group and link to this new group: 1. Click Create new group. You'll see the Google Groups page in a new tab. 2. Create your new group. 3. Reload the Chrome Web Store dashboard page in your browser, then follow the steps below under "Link to an existing Google Group."
    • Link to an existing Google group: 1. Click Choose existing group. 2. Select a group from the drop-down. (We recommend linking to a group that you're using only for group publishing of your items.) 3. Click OK in the confirmation box. 4. Click Save Changes at the bottom of dashboard page.
After you complete the steps above, a new Group Publisher account is created. The Google Group you selected or created is linked to this new publisher account, and the group email is the new publisher account's email.
Your dashboard page will show the new Group Publisher account and the linked Google Group. You can add or remove developersAll members of the linked group can act on behalf of the new publisher account. For example, they can edit items, publish items, edit the publisher's display name, etc.
  • Each member of the group must pay the developer fee.
  • You can only set up group publishing once and create one group publisher account.
  • You must be the owner or administrator of a Google Group to link the group. The drop-down list on the dashboard page only shows groups that you're a direct member of (for example, if you are a member of Group A and Group A is a member of Group B, you are not a direct member of Group B, and Group B is not shown on the drop-down list).
  • Once you finish the group publishing setup, it can take up to 30 minutes for developers in your group to see the changes.
  • Your domain is the default domain of the new group publisher account. A group publisher can publish items either to the public or to its default domain. A publisher cannot publish to other domains.
  • A developer can act on behalf of multiple publishers if the developer is a member of multiple Google Groups linked to publishers.
  • If a merchant account is needed or is already set up, any member of the group can choose to re-link their own merchant accounts to the publisher on the dashboard page.
  • When you want to create new store items, you will have the opportunity to choose whether to make them part of your personal publisher account or the group publisher account before you upload the item.
Once you set up a Group Publisher account (or once you're added as a member of a Google Group linked to a Group Publisher account), you can transfer your own items to the Group Publisher.
Remember that once you move items to a Group Publisher account, you won't be able to move them back to your personal publishing account.
To transfer items to a Group Publisher account:
  1. Sign into your Chrome Web Store dashboard page.
  2. From the publisher selection drop-down at the top of the dashboard, select the Group Publisher you want to transfer your items to. It will load the dashboard page for the selected Group Publisher.
  3. Select Transfer existing item(s), next to the Add new item button. You'll see a page with a list of items you own personally.
  4. Select the item(s) you want to transfer, and click the Transfer link to the right of the item.
  5. Click Transfer in the confirmation box.
After your items are moved, you'll see the item transfer page again. Any items you transferred will no longer be on the page. At the top of the page, you'll see a yellow bar with the status of the last item transfer.
  • If either your personal publishing account or the Group Publisher account is suspended, you won't be able to transfer items.
  • If the Group Publisher account has reached its published item limit, you won't be able to transfer your published items to this Group Publisher.
  • You can't transfer a paid item to a Group Publisher account that doesn't have a Google Wallet merchant account set up and linked.
When you publish to the world, it’ll be immediately visible to the world, and it’ll be visible in the store’s search results.
You can select the regions that you want to support, pick your app’s price in each region (if you use Chrome Web Store Payments), and internationalize your app.
To publish to the world, click Publish next to your app. You can also visit the dashboard’s edit page and click Publish changes.
If you build an app for K-12 education, you can opt in to Google Play for Education.
Google Play for Education is a separate store that lets educators find, buy, and deploy apps to their students with just a few clicks. Learn more about publishing in Google Play for Education.
You can control how fast a new version of your app reaches existing users with Controlled Rollout. By using the “max deploy percentage” control, you can limit the percentage of existing users that are updated to the latest version of the app through the Chrome auto-update mechanism.
If your app has 20,000 users and the current version of the app is 1.0, you may want to test how the new version 2.0 of your app works for a small portion of users before you deploy it to all of them. You can set the “max deploy percentage” control for the new package to say, 10%, then publish the package. This way, a maximum of 2,000 users will be updated to version 2.0 of the app. If you’re happy with the test, you can gradually increase the max deploy percentage and republish the app, eventually turning off the max deploy percentage control to roll out to all users.
  • The max deploy percentage control only applies to auto-update for existing users. New users always get the latest version of your app.
  • If you don’t see the max deploy percentage control, it may be because of the following:
    • You have less than 10,000 users. Currently the “controlled rollout” feature is only available for items with at least 10,000 users.
    • You need to upload a newer (higher) version of a package to use the “controlled rollout” feature. We can’t apply a controlled rollout to an already published package, because it may have already reached 100% of users.

Building a Chrome Extension Using React


Last week I finished building a chrome extension for a customer. The extension was built with React as a view engine to render a popup. So I thought to myself — wouldn’t it be nice to write about how to build your own extension with React?
In this post I’m going to guide you through the process of building a simple Chrome extension using React. After this intro you will have a starting point to continue and build your own extension functionality.
So Let’s get started.

Creating The Project

The first thing you will want to do is to create the extension project. We will use create-react-app project to generate the project. If you haven’t installed create-react-app, just run the following code in your command line:
npm install -g create-react-app
Note: I’m assuming you already installed node and npm on your machine.
Once you have create-react-app on your machine, generate a new project. In the command line, run the following code:
create-react-app my-extension
create-react-app will create a new project with the name my-extension which includes all the needed React boilerplate to run a new project.
Generated Clean Project
Open the new generated project in your favorite IDE and let’s move on.

Adding The Manifest

Chrome extensions need to have a manifest.json file in their root folder. That manifest tells Chrome how to create the extension and how to run it. In the manifest you will configure things like logo, name and description of your extension. Since you will want to make the manifest as part of your build root folder, I suggest to put it in the project’s public folder. In create-react-app the public folder is just copied as is to the build folder when you compile the project. Other things that I suggest to put in the public folder include content and background scripts and assets.
Note: In this post I won’t discuss what are content and background scripts so I encourage you to read about them.
create-react-app already includes a manifest.json file in the public folder. override the file with the following manifest:
  "manifest_version": 2,

  "name": "My Extension",
  "description": "This extension is a starting point to create a real Chrome extension",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  "icons": {
    "16": "logo-small.png",
    "48": "logo-small.png",
    "128": "logo-small.png"
  "permissions": [
What is included in this manifest.json?
We have the manifest version, name and description which are self explanatory. The browser_action section tells Chrome that we will have a popup which will run the index.html file. The icons will be used to present the the icon in the extension tray and in Chrome extension list. Last but not least, the permissions array will include all the permissions that the extension will need to operate successfully. Currently it is left empty.
Note: For further reading about the extension manifest format I suggest to take a look at the manifest file format.
You can add any image, which is 128 pixel wide, to the public folder with the name logo-small.png (or change that name in the manifest to your logo image name).
Now that we have the manifest and logo, you can compile the project using the following code in your command line:
npm run build

Adding The Extension to Your Chrome

In order to check your new extension, you will have to install it in Chrome. You can do the following to install it:
In Chrome, open the extension list by opening a new tab and running the following URL:
Press the Load unpacked extension… button.
Browse to the build folder and press the OK button.
If everything goes right, you will have your extension installed in Chrome.
The Extension in Chrome Extension List
The Extension in Usage
Congratulation you have built your first Chrome extension. Later on, if you have a developer account in the Chrome extension store you will be able to load it to the store and distribute it publicly.


Latest versions of Chrome block inline scripts in Chrome extensions. Since create-react-app build in version 2 creates an inline script to run the app you might stumble upon an error message which is related to Content Security Policy (CSP) in the console. In the error message you will get a sha value which can be added to the manifest.json file to solve the problem. This is an example of the manifest I used (the sha key is marked in italic):
  "manifest_version": 2,

  "name": "My Extension",
  "description": "This extension is a starting point to create a real Chrome extension",
  "version": "0.0.1",

  "browser_action": {
    "default_popup": "index.html",
    "default_title": "Open the popup"
  "icons": {
    "16": "logo-small.png",
    "48": "logo-small.png",
    "128": "logo-small.png"
  "content_security_policy": "script-src 'self' 'sha256-GgRxr...'; object-src 'self'",  "permissions": [


In this post I showed you how you can start building a Chrome extension with React as it’s view engine. I used create-react-app and some simple manifest manipulations to get started. Of course developing an extension is more than just building an “hello world” like view but this is something that deserves it’s own post.
In the next two posts in this series I’m continuing to develop the extension. You can read the follow up posts here:

Saturday, March 23, 2019

How to develop, consume, and publish an Angular library to NPM


Angular is a really popular and powerful JavaScript Framework on which you can built Web Apps to serve millions of daily users. It’s an open source framework by Google and anyone can collaborate. Likewise, there are thousands of packages for Angular available as plug-and-play on NPM. Here in this article we’re gonna make one too 😃.
We will start this article as a tutorial to develop an Angular Component Library, consume it within an Angular CLI project, and then we’ll publish it to the NPM. This will be a step-by-step guide.
Then, we will convert that same Angular Library to Angular Pipe and we will go in more detail as to when to “use Pipes over Modules” and how pipes can reduce the load over the application. Wanna target only this part? Navigate three quarters of the way down in the article.
Pipes are much lighter, when compared to a third-party libraries as the cost of JavaScript is way too high on the client side when handled inefficiently. Addy Osmani explains this in his latest article.
This article will target two major domains: Angular Component and Angular Pipes (and when they are worth using).

Angular Component Library

We will create a small component library that will format large numbers into human readable format. For example: current metrics shows that Twitter has “55138719 Followers” and our library will format it as “55.1M Followers”.Isn’t this more intuitive and user-friendly? 😉 Some more examples:
  • 37574 -> 37.5K
  • 1222130 -> 1.2M
  • 12414770 -> 12.4M
  • 19121364128 -> 19.1B

Setting up the Project

We will be using Angular CLI as a base to our development as it’s more convenient than cloning the Angular Repo from Github. Plus we will be benefiting from the scaffolding and auto generation of modules, components and pipes. *Later, we will use this same project for the development of our component and pipes and will also use it as a Sandbox to test our Library.
Let’s start by installing the CLI globally and then initiating the Project.
npm install @angular/cli -g
ng new ng-number-formatter
Now that we have a basic structure of the project, we can navigate to the project folder “ng-number-formatter” and serve the Project.
ng serve // Navigating to `localhost:4200`

Initiating the Modules/Components for the Library

Now that our most simple Angular App is up and running, let’s add our custom modules and components to format numbers in a human readable format.
ng generate module modules/ng-number-formatter
ng generate component modules/ng-number-formatter
This auto-generation will create the mandatory files for the development of Angular Modules. In our case, these independent modules are meant to be isolated from each other so that we can export them as stand-alone Angular Libraries. It’s also good practice to make each module decoupled from every other just like the concept of MicroServices.
Modules in Angular can be considered as configuration files that will help reference our components to be a part of an Angular Project. These Modules are based on Components which actually makes our application productive and gets it up and running.

Number Formatter Module

This Module file is self expressive and in it we can see the declarations and exports of our library.
    imports: [
    declarations: [
    exports: [

Number Formatter Template

Now open the ng-number-formatter.component.html file within the app/modules/ng-number-formatter folder and add the required Html spanTag. For the sake of styling, we can manipulate the content of the ng-number-formatter.component.css file, but for now we will ignore that and let things stay as simple as possible.
Here, the variable ngNumber is defined within the associated ng-number-formatter.component.ts component. As we will be getting the number in a string format from some parent component (in our case that would be app.component.ts — we will show how these components are linked), we will format that number in into human readable format with our ng-number-formatter.component.ts. Then we will display it via the Html template to which we just added a Span Tag.

Number Formatter Component

Open the ng-number-formatter.component.ts file within the same app/modules/ng-number-formatter folder. You can see that there’s already basic code present for the Component. The template which we just modified is already linked in our component.
    selector: 'ng-number-formatter',
    inputs: ['ngNumber'],
    templateUrl: './ng-number-formatter.component.html',
    styleUrls: ['./ng-number-formatter.component.css']
Here, selector: 'ng-number-formatter' is a custom tag which we, as the consumer of our library, will be needing to reference our Component. Then inputs: ['ngNumber'] is with the two contexts.
In our “ng-number-formatter component” (the callee) it’s treated as a variable that will accept the incoming number string. On the other hand in the “app.component.ts” (the caller), it will be treated as a property to our selector which will send the value.
Then templateUrl: '.ng-number-formatter.component.html' and styleUrls: '.ng-number-formatter.component.css' are the ones linking the template.
Update the file with the required logic for the number conversion. Next our template doesn’t need to be in a separate file. So we can remove that and directly embed it to our component as template: '<span>{{ngNumber}}</span>'. The following Gist shows the complete contents of our component. Compare the changes which you made and then we will proceed to the next steps.
Consuming the Angular Component Library
To consume any Angular Library, first you need to get referenced within the Module and then the usage of its selector ng-number-formatter (as mentioned in our component’s selector tab) in the template.
There’s only one difference when consuming a third party library in a project and when used as a sandbox.
1. Since our library is not yet published and listed in the NPM Directory, we need its full path to reference within the Module.
import { NgNumberFormatterModule } from './modules/ng-number-formatter/ng-number-formatter.module';
2. And when our library gets published and listed in the NPM Directory, it will be with a much simpler reference link. Like this:
import { NgNumberFormatterModule } from 'ng-number-formatter';
And here’s our custom Tag to consume our brand new library:
<ng-number-formatter [ngNumber]="12414770"></ng-number-formatter>
// Resulting number into the Format much more convenient "1.2M"

Packaging and Publishing it to the NPM

Now that we have our independent Module developed and tested within the Sandbox project, we are good to go. First of all, the good part is that this Module is so simple and minimal in nature that it doesn’t have any other dependencies. Second, it’s good that our module is totally isolated and is easily plugged to the our component in the sandbox which makes it ready to be separately packaged and published.
The next step is to make it open to the world so others can download and use it to format numbers in their Angular Applications.
To get started with the packaging and publishing of our Number Formatting Module, we need a Packager that will transform this Module into a Library identifiable as an NPM Package. For that we choose “ng-packagr” which Transpiles your libraries to Angular Package Format. It is an NPM Package built as a wrapper over “Roll-Up” which is a module bundler that compiles code into Libraries and Applications.
Now let’s continue with our development process by installing our packager within the context of our Sandbox Project. We will be saving it as a dev-dependency as we only need to compile our module as a Library identifiable to
npm install ng-packagr --save-dev
The next step is to add two files manually in our project directory, namely ng-package.json and public_api.ts.
ng-package.json is to configure ng-packgr and point out the public_api.tsfile to get ready for the packaging. Here’s the content:
  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
  "lib": {
    "entryFile": "public_api.ts"
public_api.ts is the file that will be composed of one single line exporting the recently developed Angular Module.
export * from './src/app/modules/ng-number-formatter/ng-number-formatter.module'
Once the two files are created, we will register the ng-packagr command in the package.json file of our Application Project and will also toggle the property "private": false for the NPM Directory. Go ahead and update your files so that we can continue for the publication.
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e",
  "packagr": "ng-packagr -p ng-package.json"
"private": false
Now that ng-packagr is registered as a command, we can continue packing our module as a package recognizable for NPM Directory. This compiles our TypeScript-based Module into executable JavaScript in the dist folder. Next we navigate to the dist folder and run the final packaging as a standalone component library.
npm run packagr
cd dist
npm pack
That’s all on your local machine — now is the time to make it public. For that we need an account on Go ahead and signup and then we will run the last two commands for our Library to be publicly available 🏆.
Login to NPM via Terminal / Command Line Tool:
npm login
Publish to NPM:
npm publish

Your package is up and available just like this one of mine. :)

How others will consume your Library within their Project

This will happen the same way as in our app.component.ts file of our Sandbox Project, but in fact it’s a bit simpler. We only need the simplest module referencing directly with the name. The following three steps need to be executed one after another: InstallationImporting the Module, using the Selector.
// Installationnpm install ng-number-formatter --save
// Importing the Moduleimport { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgNumberFormatterModule } from 'ng-number-formatter';
    declarations: [
    imports: [
    providers: [],
    bootstrap: [AppComponent]
export class AppModule { }
// Selector<ng-number-formatter [ngNumber]="1222130"></ng-number-formatter>
For more, find the “ng-number-formatter” Package in the NPM Directory!

Publish in the Chrome Web Store

src: To publish your app to the Chrome Web Store, follow these steps: Create your app...