Building Copy as Plain Text Google Chrome Extension in 15 mins

Today, I wanted to make it easy for me to copy text from the web in plain text format. I read a lot of stuff on the web. When I find good articles I take notes and store them in Evernote. Evernote provides a rich text editor to compose notes. The default behaviour provided by Chrome is to copy the text along with the page style. This is not what I want most of the time. To avoid this, I have to first copy the text in a plain editor like Notepad or browser address bar and then copy it again and paste in Evernote. I am doing this for long time. I thought there has to be a better way. It came to my mind that this can be easily solved by writing a Google Chrome Extension. A Google Chrome extension that adds copy as plain text context menu option.

In this step by step tutorial, I will show you how you can create such an extension in less than 30 mins.

We will start by creating a directory where we will house the code.

$ mkdir copy-as-plain-text

Every Chrome Extension need to have a file called manifest.json where you specify the metadata related to your extension. Create a new file manifest.json in the copy-as-plain-text directory.

{
"manifest_version": 2,
"name": "Copy As Plain Text",
"description": "Allows you to copy text as plain text. Useful when you don't want to copy style with text.",
"version": "1",
"author": "Shekhar Gulati",
"permissions": [
"contextMenus"
],
"background": {
"persistent": false,
"scripts": [
"index.js"
]
}
}

The main items in the above code snippet are:

1. We gave contextMenus permission to our extension. This is important because we will be adding Copy as Plain Text context menu option to Google Chrome. When you will select a text and do right click then you will see that option.
2. Next, we added background section. Extensions are event based programs used to modify or enhance the Chrome browsing experience. Events are browser triggers, such as navigating to a new page, removing a bookmark, or closing a tab. Extensions monitor these events in their background script, then react with specified instructions. In this we added a script index.js as our background script. This is the second file we will create. This will be responsible for handling the event that will be fired when we will click Copy as Plain Text option.

Now, create the background script file index.js. This is responsible for listening to the click event and copy the plain text to the clipboard.

chrome.contextMenus.create({
  "id":"copyAsPlainText",
  "title": "Copy as Plain Text",
  "contexts": ["selection"]
});

chrome.contextMenus.onClicked.addListener(function(itemData){
  copyToClipboard(itemData.selectionText);
});


const copyToClipboard = str => {
  console.log("copyToClipboard");
  const el = document.createElement('textarea');
  el.value = str;
  el.setAttribute('readonly', '');
  el.style.position = 'absolute';
  el.style.left = '-9999px';
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
};

The code shown above does the following:

1. Add a new context menu option to the list with title Copy as Plain Text. It is only listening to events of type selection
2. Next, we registered onClicked event listener. We extracted text selected text from it and passed it to copyToClipboard function.
3. The copyToClipboard is a function that I copied from 30 seconds of JavaScript. You can read about it in detail here.

Go to extensions page.

Add the extension by clicking Load Unpacked button.

Once added, new context menu option will be available.

The Github repository for the extension is copy-as-plain-text-chrome-extension. Pull Requests Welcome!