About Me

• Security Engineer at ServiceNow
• Interested in application security, automation, cryptography, ...
• Open-source developer
  • Find Security Bugs: Static Analysis for Java applications
  • Burp and ZAP Plugins: (Retire.js, CSP Auditor, Reissue Request Scripter, …)

Agenda

1. Why developed a Chrome extension?
2. Anatomy of a Chrome extension
   • manifest.json
   • Common components: popup, service worker, pages, context menu, ...
3. Tooling
4. Conclusion

Why develop a Chrome extension?

Non-technical reasons

• A great way to extended an existing web applications
  • Code repository, mail client, timesheet, etc.
• The browser is the main software used by most "office jobs"

Why develop a Chrome extension?

Technical reasons

• You can use your favorite Frontend framework (Vue, React, Angular, ...)
• A great complement to an existing JS CLI
  • It can share code with other JS projects.
• Lighter than yet another Electron application

Some extension ideas

• Shortcuts for the QA team.
• Tool to help complete timesheets with few clicks.
• Searching feature specific to your code project.

Return on investment will differ if you have 1 user or 100+ users.

Manifest: Basic configuration

manifest.json

{
    "name": "Acronym Finder",
    "description": "Simple acronym extension",
    "version": "1.0",
    "manifest_version": 3,
    "permissions": ["storage", "activeTab", "scripting","contextMenus"],
    "host_permissions": [
      "*://*/*"
    ],
    //[...]
}

Components

1. Service Worker (Also called Background scripts in MV2)
2. Content Script
3. Popup
4. Context Menu
5. Pages

1. Service worker

A event-based script that the browser runs in the background.
Chrome Developers Doc.

• Place where multiple event handler can be register:
  • chrome.runtime.onInstalled.addListener
  • chrome.runtime.onMessage.addListener
  • chrome.contextMenus.onClicked.addListener
• Isolated from other plugins.
• Not directly connected to tabs and popup context.

1. Service worker: Isolated?

Components communicate with messages.

1. Service worker: Messages

Sending a message

const urlParameters = new URLSearchParams(queryParameters);

chrome.tabs.sendMessage(tabId, {
   type: "NEW",
   videoId: urlParameters.get("v"),
});

1. Service worker configuration

{
   //[...]
   "background": {
      "service_worker": "background.js"
   },
   //[...]
}

2. Content Script

Script loaded in the context of the tab.

• It will have complete access to the DOM.
• It needs to use message or storage API to communicate with the main service worker or the secondary pages.

3. Context menu

Context menu with option to extract the text selected.

3. Context menu: Initialisation

4. Popup

4. Popup (configuration)

manifest.json

{
    //[...]

    "action": {
      "default_popup": "popup.html",
      "default_icon": {...}
    },
    
    //[...]
}

4. Popup

popup.js implementation

As an alternative to Content Script, you can inject a script to a tab.

5. Pages

5. Pages

You can get the full URL to a resource using:

chrome.runtime.getURL("search.html")

Using a relative path from the popup will also work:

<a href="./settings.html">Settings</a>

Webpack

[..] bundle JavaScript files for usage in a browser.

• Allow you to use powerful JavaScript libraries from NPM
  • Parser, API, Data utilities, Your own modules
• Allow you to use Bootstrap, SASS files, UI Framework
  • (Vue, React, ...)

Webpack fallback

module.exports = {
  //...
  resolve: {
    fallback: {
      assert: require.resolve('assert'),
      buffer: require.resolve('buffer'),
      console: require.resolve('console-browserify'),
      constants: require.resolve('constants-browserify'),
      crypto: require.resolve('crypto-browserify'),
      domain: require.resolve('domain-browser'),
      events: require.resolve('events'),
  //...

More info: Webpack configuration: resolve fallback

Testing

• Don't forget to test your code !
• The sample project include a demonstration of Jest integration.

Conclusion

• Think about a potential use case
• Start building your own extension
  • Identify the components needed
  • Look at examples
    • Build a Chrome Extension – Course for Beginners
    • Chrome Developers Documentation
    • The Acronym Extension from this presentation
• Deploy in development mode or publish on the Chrome Web Store.

There is more...

• This presentation is just a small sample of the possibilities
• To learn more :
  • Chrome Developers Documentation
  • Build a Chrome Extension – Course for Beginners

The End !

Social

• Twitter @h3xstream

• Website https://blog.h3xstream.com

• Slides and code : https://github.com/h3xstream/confoo-first-chrome-ext