Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@devtools-ds/create

Package Overview
Dependencies
Maintainers
1
Versions
21
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@devtools-ds/create

This is a package of browser extension templates, which removes a majority of the usual boilerplate needed to get started. We're still working on adding more templates, and simplifying the developer experience. If you see an area to improve, feel free to

  • 1.2.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

@devtools-ds/create

This is a package of browser extension templates, which removes a majority of the usual boilerplate needed to get started. We're still working on adding more templates, and simplifying the developer experience. If you see an area to improve, feel free to contribute!

Goals for templates:

  • Easy cross-browser extension development for Chrome and Firefox.
  • Hot reloading of extensions during development.
  • TypeScript support by default.
  • Simplify communication between extension pages and the current tab. (This is an area that gives many people trouble).
  • Provide scripts that help with extension packaging and publishing.

Install a Template

npm init @devtools-ds

Instructions for development will be included in the README.md for your chosen template.

Extension Development Basics

MDN has a great guide outlining the major components of a browser extension. We recommend taking some time to understand the pieces, but ideally the templates will allow you to focus on your extension code instead of browser APIs.

Many of the high-level pieces are provided for you in our template:

  • Panel: the main "devtools" tab inside of the browsers normal developer tools window.
  • Popup: the page that appears when you click the extension icon next to the URL bar.
  • Options: the page that appears when a user selects "settings" or "options" for your extension.
  • Background Script: a single process that is always running for your extension. We primarily use it to pass messages between the extensions pages and the current tab.
  • Content Script: a sand-boxed script which has limited access to the current page. We use it to add our "runtime" script to the page and pass messages back to the background script.
  • Runtime: the script that actually runs in the page. It can send and receive messages from the content script.

To learn more about Firefox extensions, web-ext, and the webextension-polyfill library that enables cross-browser extension development check out the Firefox extension workshop site.

To learn more about Chrome-specific development, visit the chrome developers site!

FAQs

Package last updated on 27 Dec 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc