@bumble/clipboard v1.0.5

Using the clipboard in a Chrome Extension can be a pain. The async Clipboard API doesn't work in background scripts and workarounds require lots of boilerplate. This library works in all Chrome extension contexts. It emulates the Clipboard API readText and writeText methods.

Table of Contents

• Getting Started
• Usage
• Features

Getting started

You will need to use a bundler like Rollup or Webpack to include this library in the build of Chrome extension.

See rollup-plugin-chrome-extension for an easy way use Rollup to build your Chrome extension!

Installation

$ npm i @bumble/clipboard

Add the permissions "clipboardRead" and/or "clipboardWrite" to your manifest.json.

{
  "permissions": ["clipboardRead", "clipboardWrite"]
}

Usage

import { clipboard } from '@bumble/clipboard'

// Read text from the clipboard, or "paste"
clipboard.readText()
  .then((text) => {
    console.log('clipboard contents', text)
  })

// Write text to the clipboard, or "copy"
clipboard.writeText('write this to the clipboard')
  .then((text) => {
    console.log(text, 'was written to the clipboard')
  })

Features

TypeScript Definitions

TypeScript definitions are included, so no need to install an additional @types library!

Notify on Copy

This library contains an extra function that creates a desktop notification when text has been copied, with a button to copy that text again.

This feature requires the "notifications" permission in your manifest.json.

It uses @bumble/notify, a Chrome extension notification library with a simpler API than chrome.notifications.

import { clipboard, notifyCopy } from '@bumble/clipboard'

// Write text to the clipboard
clipboard.writeText('copy this')
  // then create a copy notification
  .then(notifyCopy)