web extensions 

Create cross browser compatible extensions using WebExtentions API

By

Supriya

What are browser extensions?

They are small software modules for customizing a web browser.

colorZilla

toby

Muzli​

pocket 

Grammarly

Stylus

Tree Style Tab

Dark Reader

LastPass
webMail Ad Blocker

  • Enhance a website : Grammarly, oneNote  web clipper
  • Personalize : Tabliss, My Web New Tab
  • add or remove content : Reader, uBlock Origin
  • games : Asteroids in popup, 2048 Prime 
  • add development tools : Web developer, aXe Developer tools
  • Integrate Web Search : open web from within your own extension
  • Tinker with Tabs: Hide, move, close, open tabs using API

Extensions can....

How to create a browser extensions?

Google Chrome and Opera - extension API

Fire Fox - WebExtensions API 

  • Extensions are restricted to a particular browser. 
  • To provide cross browser compatibility for your extension, use WebExtensions API.

Anatomy of an extension

Anatomy of an extension

your manifest.json  can contain pointers to several other types of files

  • Background scripts
  • sidebars, popups etc
  • content scripts
  • web-accessible resources

Background scripts

Why do you need Background scripts?

  • to maintain the extension in a long term state
  • to perform long term operations

independent of the particular web page or window

you can use any webExtensions API

Where do they run? 

Background page

  • they provide cross-origin access by making XHR (XMLHttpRequest) requests
     
  • They DO NOT get access to the  web pages.
     
  • They can load content scripts

How to include in the manifest? 

"background": {
  "scripts": ["background-script.js"]
}
"background": {
  "page": "background-page.html"
}

using the background key

Sidebars, popups etc.

you can include various UI components which are defined in an HTML document

  • sidebar
  • popup
  • options page : page that is shown when user access your add-on  which is attached to a  UI component
    • they need to have an entry in manifest.json
  • extension page :  HTML documents, which are not attached to predefined UI component
    • they need not have an entry in manifest.json
    • windows.create()
    • tabs.create()

Content Scripts

Manipulate web pages

  • make cross-domain XHR requests
  • use small subset of WebExtension API
  • exchange messages with background scripts 

 

cannot directly access normal page scripts. But uses

  • window.postMessage()

they are blocked on some domains 

Loading the content scripts

  • at  install time, when the browser loads the particular page 
    • content_scripts ​key
  • at run time 
    • contentScripts API
  • at run time, into a specific tab 
    • tabs.executeScript() API

 

Web accessible resources

  • HTML
  • CSS
  • Js
  • images
"web_accessible_resources": [
  "images/my-image.png"
]

thank you!

web extensions

By Supriya kotturu

Made with Slides.com

web extensions

create cross browser compatible extensions using WebExtensions API

  • 101

More from Supriya kotturu