Skip to content

extend-chrome/clipboard

Repository files navigation

@extend-chrome/clipboard

@extend-chrome/clipboard

npm (scoped) GitHub last commit License TypeScript Declarations Included

Chrome Extension Tutorials on YouTube ko-fi


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 MV2 Chrome extension contexts. It emulates the Clipboard API readText and writeText methods using document.execCommand.

Table of Contents

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 @extend-chrome/clipboard

Add the permissions "clipboardRead" and/or "clipboardWrite" to your manifest.json. Remember, only request the permissions you need! For example, if your extension only reads the clipboard, only request "clipboardRead".

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

TypeScript Definitions

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

Usage

import { clipboard } from '@extend-chrome/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')
})