Create your own chrome extension — and deploy to Chrome Web Store
Tags: publish, javascript, github, chromeextension
Published: 2019-07-15 04:32:04

---
title: Create your own chrome extension — and deploy to Chrome Web Store
published: true
tags: publish,javascript,github,chrome-extension
canonical_url: https://medium.com/@romedy65i/create-your-own-chrome-extension-and-deploy-to-chrome-web-store-66685bc18b8
---

### Create your own chrome extension — and deploy to Chrome Web Store

[Github Readme Markdown](https://chrome.google.com/webstore/detail/github-readme-markdown/paacehodnnofnmhogoclomamladkpabg?hl=en&authuser=0)

> Web Extensions

### Intro

First of all, I’ll tell you it is very easy. There is only one important file, that is —  **_manifest.json._** Everything there is to know about this file —

```
{
_// Required_
 "[**manifest\_version**](https://developer.chrome.com/extensions/manifest/manifest_version)": 2,
 "[**name**](https://developer.chrome.com/extensions/manifest/name#name)": "My Extension",
 "[**version**](https://developer.chrome.com/extensions/manifest/version)": "versionString",

_// Recommended_
 "[**default\_locale**](https://developer.chrome.com/extensions/manifest/default_locale)": "en",
 "[**description**](https://developer.chrome.com/extensions/manifest/description)": "A plain text description",
 "[**icons**](https://developer.chrome.com/extensions/manifest/icons)": {...},

_// Pick one (or none)_
 "[**browser\_action**](https://developer.chrome.com/extensions/browserAction)": {...},
 "[**page\_action**](https://developer.chrome.com/extensions/pageAction)": {...},

_// Optional_
 "action": ...,
 "author": ...,
 "automation": ...,
 "[**background**](https://developer.chrome.com/extensions/background_pages)": {
_// Recommended_
 "[**persistent**](https://developer.chrome.com/extensions/event_pages)": false,
_// Optional_
 "[**service\_worker**](https://developer.chrome.com/extensions/background_pages)":
 },
 "[**chrome\_settings\_overrides**](https://developer.chrome.com/extensions/settings_override)": {...},
 "[**chrome\_ui\_overrides**](https://developer.chrome.com/extensions/ui_override)": {
 "bookmarks\_ui": {
 "remove\_bookmark\_shortcut": true,
 "remove\_button": true
 }
 },
 "[**chrome\_url\_overrides**](https://developer.chrome.com/extensions/override)": {...},
 "[**commands**](https://developer.chrome.com/extensions/commands)": {...},
 "content\_capabilities": ...,
 "[**content\_scripts**](https://developer.chrome.com/extensions/content_scripts)": [{...}],
 "[**content\_security\_policy**](https://developer.chrome.com/extensions/contentSecurityPolicy)": "policyString",
 "converted\_from\_user\_script": ...,
 "current\_locale": ...,
 "declarative\_net\_request": ...,
 "[**devtools\_page**](https://developer.chrome.com/extensions/devtools)": "devtools.html",
 "[**event\_rules**](https://developer.chrome.com/extensions/manifest/event_rules)": [{...}],
 "[**externally\_connectable**](https://developer.chrome.com/extensions/manifest/externally_connectable)": {
 "matches": ["\*://\*.example.com/\*"]
 },
 "[**file\_browser\_handlers**](https://developer.chrome.com/extensions/fileBrowserHandler)": [...],
 "[**file\_system\_provider\_capabilities**](https://developer.chrome.com/extensions/manifest/file_system_provider)": {
 "configurable": true,
 "multiple\_mounts": true,
 "source": "network"
 },
 "[**homepage\_url**](https://developer.chrome.com/extensions/manifest/homepage_url)": "http://path/to/homepage",
 "[**import**](https://developer.chrome.com/extensions/shared_modules)": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
 "[**incognito**](https://developer.chrome.com/extensions/manifest/incognito)": "spanning, split, or not\_allowed",
 "input\_components": ...,
 "[**key**](https://developer.chrome.com/extensions/manifest/key)": "publicKey",
 "[**minimum\_chrome\_version**](https://developer.chrome.com/extensions/manifest/minimum_chrome_version)": "versionString",
 "[**nacl\_modules**](https://developer.chrome.com/extensions/manifest/nacl_modules)": [...],
 "oauth2": ...,
 "[**offline\_enabled**](https://developer.chrome.com/extensions/manifest/offline_enabled)": true,
 "[**omnibox**](https://developer.chrome.com/extensions/omnibox)": {
 "keyword": "aString"
 },
 "[**optional\_permissions**](https://developer.chrome.com/extensions/permissions)": ["tabs"],
 "[**options\_page**](https://developer.chrome.com/extensions/options)": "options.html",
 "[**options\_ui**](https://developer.chrome.com/extensions/optionsV2)": {
 "chrome\_style": true,
 "page": "options.html"
 },
 "[**permissions**](https://developer.chrome.com/extensions/declare_permissions)": ["tabs"],
 "platforms": ...,
 "replacement\_web\_app": ...,
 "[**requirements**](https://developer.chrome.com/extensions/manifest/requirements)": {...},
 "[**sandbox**](https://developer.chrome.com/extensions/manifest/sandbox)": [...],
 "[**short\_name**](https://developer.chrome.com/extensions/manifest/name#short_name)": "Short Name",
 "signature": ...,
 "spellcheck": ...,
 "[**storage**](https://developer.chrome.com/extensions/manifest/storage)": {
 "managed\_schema": "schema.json"
 },
 "system\_indicator": ...,
 "[**tts\_engine**](https://developer.chrome.com/extensions/ttsEngine)": {...},
 "[**update\_url**](https://developer.chrome.com/extensions/autoupdate)": "http://path/to/updateInfo.xml",
 "[**version\_name**](https://developer.chrome.com/extensions/manifest/version)": "aString",
 "[**web\_accessible\_resources**](https://developer.chrome.com/extensions/manifest/web_accessible_resources)": [...]
}
```

At least we know, there is nothing more than this. Now while making an extension, we don’t need to use every code written above.

#### Now we’re gonna make the Github Readme Markdown Chrome Extension whose link I gave in the beginning.

( Go have a look at it. )

Step 1: Creating a **_manifest.json_** file

```
{

“manifest\_version”: 2,

“author”: “https://github.com/Anant016",

“name”: “Github Readme Markdown”,

“icons”: { “48”: “./demo.png”, “128”: “./demo.png” },

“version”: “1.0”,

“description”: “Show options, how to edit while Readme.md is being edited in browser”,

“content\_scripts”: [

{

“matches”: [

“https://github.com/\*/new\*?readme\*"],

“js”: [“showoption.js”],

“run\_at”: “document\_end”

}

]

}
```

In this, we can specify **_author_** that will be you, the **_name_** of the extension, It’s **_icons_** , i.e how it will be displayed. the basic **_description_** which will be shown, when you publish the app to the store.

In **_matches_** attribute, we specify the URL, with some regular expression and when this URL matches, it will run the **_showoption.js_** file

> Step 2: Creating **showoption_.js file_**

```
buttton = document.createElement(“button”);

buttton.innerHTML = “See Markup”;

buttton.setAttribute(“type”, “button”);

buttton.setAttribute(

“class”,

“flex-item-equal nav-link flex-md-auto preview tabnav-tab js-blob-edit-preview js-blob-edit-tab”

);

buttton.setAttribute(“data-togggle”, “popover”);

buttton.setAttribute(“title”, “Headings\n# The largest heading\n## The second largest heading\n######“ );

var a = document.querySelector(“.tabnav”);

if (a == undefined || null) {

} else {

a.appendChild(buttton);

}
```

> That’s it. You have your extension.!!!!!! :)

### Testing —

1. Visit [chrome://extensions/](chrome://extensions/)
2. Click on **_Load Unpacked_** button and select the folder in which those 2 files are present.
3. And there you are. Just See if it works.

### Publishing —

1. Visit [_Chrome Developer Dashboard_](https://chrome.google.com/webstore/devconsole)
2. You’ll have to pay 5$, one time fees, to upload up to 20 packages on Google Web Store.
3. After Paying you can publish your extension by following the simple procedure and uploading a .zip file for your extension.

> If you like my content, do give it a few claps. I would appreciate it.