npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

browser-extension-oauth2

v1.1.0

Published

Browser extension oauth2 library

Downloads

11

Readme

browser-extension-oauth2

This module provides wrapper around browser.identity API for Oauth2.0 implicit flow. This module not only handles retrieving and renewing access token from authorization endpoints and properly cache it in browser.storage.local, but also provide enhanced fetch functon, callApi, to access protected resources with access token properly binded in headers.

Installation

Please follow either of following options to use this module in your extension project.

Build extension with bundler like webpack

npm install browser-extension-oauth2

Add bundle file directly in manifest.json

  • Clone repo

  • Install dependencies

npm install
  • Build bundle
npm run build
  • Add index.js from dist folder to your extension project. Then

Development

npm install
npm run dev

Examples

import Oauth2 from 'browser-extension-oauth2'

// Initial oauth2 instance
const oauth2 = new Oauth2({
  provider: '{provide name}', // Provider name, this will be used in redirectUrl and as storage key
  authorization_endpoint: '{oauth authorization_endpoint}',
  client_id: '{registered client id in idp}',
  scopes: ['{scope}'], // Scopes for api access
  api_base_url: '{api base url}' // Optional, only relative paths need to be provided if callApi method if this config exist
});

// Call resource api, this method follows `fetch` API input with addtional renew token logic provided.
// If no access token available, prompt will popup to ask for user's consent.
oauth2.callApi('/protected-resource')
  .then(data => {
    // Handle resource
  });

License

MIT