Git Product home page Git Product logo

browser-extension-playground's Introduction

Browser Extension Playground

This repository is mainly intended to try out some things with browser extensions in order to debug / test how some functionality works. Currently it contains the following:

  • reading/writing from storage across multiple pages
  • background worker event registration
  • content script injection
  • basic message passing from content script to background worker

Terminology

Term Description
Extension Small software program to customize the browsing experience.
Content script Files that are run in the context of web pages. Content scripts only have access to a very limited api subset https://developer.chrome.com/docs/extensions/mv3/content_scripts/. Can be auto-run on match patterns or programmatically injected.
Extension process The actual process the extension runs in (vs the process the content script or webpages run in)

Extensions

  • built on web technologies - Manifest v3 should be fairly cross browser
  • run in a separate, sandboxed execution environment

Important considerations

  • some code runs in your 'extension code' / some code (potentially) runs in a window/tab context
  • seems like it's not that straightforward to 'import' code (to investigate further) => it is possible to import a background service worker as a module
  • with a 'standard' integration your extension code will not be running anymore on page refresh / page navigations
  • when working with storage there are several constraints/considerations. To provide a consistent experience some form of storage will be required however
    • ensure to use the same key value in 'get' as the item you actually need on the returned items object
    • access is possible across multiple pages if the page is run in the context of the extension (for example through chrome.runtime.getURL)
    • 'sync' storage has very strict quota

Debugging

  • console.log will be written out depending on the execution context. By default they will not be consolidated
    • from extension context: visible in chrome://extensions 'Errors' view
    • from window/tab context: visible in DevTools of the webpage itself

References

browser-extension-playground's People

Contributors

msioen avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.