Cross Browser Extensions

FOSDEM 2019

@trishulgoel

Hi, I am Trishul

WHAT

@trishulgoel

One size fits All

@trishulgoel

@trishulgoel

WHY?

@trishulgoel

bcoz JAVASCRIPT

@trishulgoel

What can an extension do?

@trishulgoel

Help you with grammar!

@trishulgoel

Block Ads / Trackers

@trishulgoel

Secure Browsing

@trishulgoel

Facebook

Containers

Better newtab experience

@trishulgoel

Manage Passwords

@trishulgoel

Anything you want!!!

@trishulgoel

HOW?

@trishulgoel

Structure of an extension

Manifest.json

Content Scripts

Background Scripts

Page action

Browser action

Options page

Web accessible resources

@trishulgoel

@trishulgoel

Content Scripts

javascript that executes once the page load is complete

@trishulgoel

Background Scripts

Javascript that executes in background :P

@trishulgoel

Page Action

Browser Action

@trishulgoel

Options Page

A HTML page which helps to set extension's preferences

@trishulgoel

Webextension APIs

@trishulgoel

@trishulgoel

Notifications API

@trishulgoel

BrowserAction API

@trishulgoel

Tabs API

@trishulgoel

NewTab API

@trishulgoel

webRequest API

@trishulgoel

mdn.io/WebExtensions/API

Lets get started

@trishulgoel

LINK PAINTER

@trishulgoel

@trishulgoel

@trishulgoel

WORD COUNTER

@trishulgoel

@trishulgoel

@trishulgoel

SECURITY

@trishulgoel

@trishulgoel

DEBUGGING

@trishulgoel

about:debugging

Load temporary addon

Select manifest.json

@trishulgoel

chrome://extensions

Load Unpacked

Select extension Folder

@trishulgoel

TOOLS

@trishulgoel

webextensions.tech

@trishulgoel

WEB-EXT

A command line tool designed to speed up extension development process

@trishulgoel

http://bit.ly/publishAddon

@trishulgoel

Resources

- http://bit.ly/webextensions

- http://bit.ly/webexttutorials

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

- http://bit.ly/publishAddon

@trishulgoel

@trishulgoel

Cross browser extensions - Fosdem

By Trishul Goel

Cross browser extensions - Fosdem

Cross browser extensions - lets create one | Fosdem

  • 1,663