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

#publish #javascript #github #chromeextension

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

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 —

Visit chrome://extensions/
Click on Load Unpacked button and select the folder in which those 2 files are present.
And there you are. Just See if it works.

Publishing —

Visit Chrome Developer Dashboard
You’ll have to pay 5$, one time fees, to upload up to 20 packages on Google Web Store.
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.

DEV Community

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