https://github.com/extend-chrome/clipboard

Use the clipboard with ease in Chrome extensions.
https://github.com/extend-chrome/clipboard

chrome-extension chrome-extensions clipboard clipboard-api javascript javascript-library npm-module

Last synced: about 1 year ago
JSON representation

Use the clipboard with ease in Chrome extensions.

• Host: GitHub
• URL: https://github.com/extend-chrome/clipboard
• Owner: extend-chrome
• License: mit
• Created: 2019-02-28T23:22:20.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-08-03T06:41:35.000Z (almost 3 years ago)
• Last Synced: 2025-03-31T05:33:13.079Z (about 1 year ago)
• Topics: chrome-extension, chrome-extensions, clipboard, clipboard-api, javascript, javascript-library, npm-module
• Language: TypeScript
• Size: 222 KB
• Stars: 28
• Watchers: 1
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          


  

 



@extend-chrome/clipboard




[![npm (scoped)](https://img.shields.io/npm/v/@extend-chrome/clipboard.svg)](https://www.npmjs.com/package/@extend-chrome/clipboard)

[![GitHub last commit](https://img.shields.io/github/last-commit/extend-chrome/clipboard.svg)](https://github.com/extend-chrome/clipboard)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)

[![TypeScript Declarations Included](https://img.shields.io/badge/types-TypeScript-informational)](#typescript)





[![Chrome Extension Tutorials on YouTube](https://img.shields.io/badge/Chrome%20Extension%20Tutorials-YouTube-c4302b.svg)](https://www.youtube.com/channel/UCVj3dGw75v8aHFYD6CL1tFg)

[![ko-fi](https://img.shields.io/badge/Buy%20us%20a%20tea-ko--fi-29ABE0)](https://ko-fi.com/jacksteam)



---

Using the clipboard in a Chrome Extension can be a pain. The async Clipboard API [doesn't work in background scripts](https://bugs.chromium.org/p/chromium/issues/detail?id=874848&can=1&q=chrome%20extension%20clipboard%20api&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified) and workarounds require lots of boilerplate. This library works in all MV2 Chrome extension contexts. It emulates the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) `readText` and `writeText` methods using `document.execCommand`.

## Table of Contents

- [Getting Started](#getting_started)

- [Usage](#usage)

## Getting started 

You will need to use a bundler like [Rollup](https://rollupjs.org/guide/en/) or Webpack to include this library in the build of Chrome extension.

See [`rollup-plugin-chrome-extension`](https://github.com/extend-chrome/rollup-plugin-chrome-extension) for an easy way use Rollup to build your Chrome extension!

### Installation

```sh

$ npm i @extend-chrome/clipboard

```

Add the [permissions](https://developer.chrome.com/extensions/declare_permissions) `"clipboardRead"` and/or `"clipboardWrite"` to your [`manifest.json`](https://developer.chrome.com/extensions/manifest). Remember, only request the permissions you need! For example, if your extension only reads the clipboard, only request `"clipboardRead"`.

```json

{

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

}

```

### TypeScript Definitions 

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

## Usage 

```javascript

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')

})

```