@mdsbzalam

Cross Browser Extensions

Hi, I am Shahbaz

WHAT

@mdsbzalam

One size fits All

@mdsbzalam

@mdsbzalam

WHY?

@mdsbzalam

bcoz JAVASCRIPT

@mdsbzalam

What can an extension do?

@mdsbzalam

Help you with grammar!

@mdsbzalam

Block Ads / Trackers

@mdsbzalam

Secure Browsing

Facebook

Containers

@mdsbzalam

Better newtab experience

@mdsbzalam

Manage Passwords

@mdsbzalam

Anything you want!!!

@mdsbzalam

HOW?

@mdsbzalam

Structure of an extension

Manifest.json

Content Scripts

Background Scripts

Page action

Browser action

Options page

Web accessible resources

@mdsbzalam

@mdsbzalam

Content Scripts

javascript that executes in DOM context

@mdsbzalam

Background Scripts

Javascript that executes in background :P

@mdsbzalam

Page Action

Browser Action

@mdsbzalam

Options Page

A HTML page which helps to set extension's preferences

@mdsbzalam

Webextension APIs

@mdsbzalam

Notifications API

@mdsbzalam

BrowserAction API

@mdsbzalam

Tabs API

@mdsbzalam

NewTab API

@mdsbzalam

webRequest API

@mdsbzalam

mdn.io/WebExtensions/API

@mdsbzalam

Lets get started

@mdsbzalam

LINK PAINTER

@mdsbzalam

@mdsbzalam

@mdsbzalam

WORD COUNTER

@mdsbzalam

@mdsbzalam

@mdsbzalam

SECURITY

@mdsbzalam

@mdsbzalam

DEBUGGING

@mdsbzalam

about:debugging

Load temporary addon

Select manifest.json

@mdsbzalam

chrome://extensions

Load Unpacked

Select extension Folder

@mdsbzalam

TOOLS

@mdsbzalam

webextensions.tech

@mdsbzalam

WEB-EXT

A command line tool designed to speed up extension development process

@mdsbzalam

http://bit.ly/publishAddon

@mdsbzalam

Resources

- http://bit.ly/webextensions

- http://bit.ly/webexttutorials

- http://bit.ly/web-ext

- http://bit.ly/publishAddon

@mdsbzalam

@mdsbzalam

Thank you

Cross browser extensions

By Mohammad Shahbaz Alam

Cross browser extensions

Cross browser extensions - let's create one

  • 685