zenorocha / codecopy

A browser extension that adds copy to clipboard buttons on every code block

CodeCopy

Because copy to clipboard buttons should exist on every code snippet.

Install

This browser extension available for:

Chrome	Firefox

Supported sites

Works with:

• GitHub
• MDN
• Gist
• StackOverflow
• StackExchange
• npm
• Medium

And more.

If you want to add a new site, feel free to send a pull request :)

Custom domains

You can also enable CodeCopy on custom domains or Github Enterprise. Right click on CodeCopy's icon in the the toolbar and select Enable CodeCopy on this domain.

Preview

Setup

Install dependencies:

npm install

Compile scripts and styles:

npm start

Testing

Chrome

1. Navigate to chrome://extensions

2. Click on Load unpacked extension...

3. Select the dist folder

Firefox

1. Navigate to about:debugging

2. Click on Load temporary Add-on

3. Select the manifest.json inside the dist folder

Opera

1. Navigate to extensions

2. Click on Developer Mode

3. Click on Load unpacked extension...

4. Select the dist folder

License

MIT License © Zeno Rocha

codecopy's Issues

Add-on is not signed. (Firefox)

Installing this add-on on the nightly version is not possible because it is not signed.

https://support.mozilla.org/en-US/kb/add-on-signing-in-firefox?as=u&utm_source=inproduct

Add support for Safari

Great Tool for Devs!!

Please Add support for Safari also.

Thanks.

Could this extension work for any site?

I mean every site. Could it detect code snippet by Markdown grammar on any site?

Useable as a module?

Hey @zenorocha. I'd love to drop something like this into electronjs.org. Can it be used as a module? If not, maybe that's a use case worth supporting?

Overflowing the text from Github Repo Card ?

Browser: Chrome

.codecopy {
    position: relative;
    overflow: visible;
}

This CSS is overflowing the content(text).
please fix it soon.

can not add custom domain

when right-click codecopy icon, it is not allowed to click

Porting the extension to Firefox

[BUG] Stopped working on Github.com

It's not working on Github.com in Chrome anymore, no button is showing up.

Add support for Gitlab

Add support for CSS-Tricks

Thank you for an excellent extension, you 🤘
Can you please add support for css-tricks?

Add support for Safari

Would be amazing. :)

Remove GitHub since it has native support

GitHub now has a button natively, so it’s no longer useful to have this button on Markdown pages (and it didn’t show up anyway). Note that #1 is still interesting though, so we may want to keep the domain permission.

GitHub Editor Glitch

Icon shows on hover on every line of code:

Button on left side of code

Would it be possible to place the button to the left of the code? In all preview examples there is more space between the code and the button, than there is code in the block ;-) Shave off some meters of mouse movement per day?

Add support for GitBook

This will be very handy since these git books usually contain code sample.
Thank you!

Tested this successfully on Edge Browser

I have tested this plugin on Edge browser on Ubuntu 20.04. It works as expected without any code changes. I tried this with some custom domains like Python Flask and it works great. Attached screenshots for the same


.

Why has CodeCopy been removed from Chrome Web Store?

README.md contains a link to CodeCopy listed on Chrome Web Store, but it redirects to a 404 page.

Apparently, CodeCopy has been automatically disabled on my browser (Edge Chromium) saying that

This extension has been disabled because it's been marked unsafe by the Chrome Web Store.

Does this relate to the removal of CodeCopy from Chrome Web Store?

Different spacing above and below code blocks

This is a visual bug: when it’s enabled, the spacing above code blocks is larger than the one below them. Screenshot:

A possible fix is to change <div class="codecopy"> into a <p>, to make use of the existing CSS rules.

use with TiddlyWiki

@zenorocha, could you please explain how to add a site. Tried to just stick my URL to matches in manifest.json, that didn't work. I want to use this on a self-hosted TiddlyWiki.

Conflicts with Content collapse of Octopatcher on Github

As you can see when https://github.com/Mottie/Octopatcher is installed add the collapse only that when I use the copy copy also the text "Block 16 lines" (the icon of copy is on hover on the code).

Add button on StackOverflow

Support for Independent Javascript Library (Not as Browser Extension)

I've been digging to find a JS library that will add this natively to a web app, rather than a user having to install an extension in their browser. It would be great if this project also supported that use-case, rather than creating/forking a new project.

Ideally, I would be able to just import this library locally, or from something like CDNJS and load it on any web app. Similar to how highlight.js works:

• https://highlightjs.org/usage/

Context: In some use-cases, users are required to disable all browser extensions before proceeding with a task (ex: taking an exam/certification/etc using an online proctoring service).

Chrome Extension link - 404 Not Found

The Chrome Web Store link provided in the README file returning 404 Not Found

Browser: Microsoft Edge - Version 116.0.1938.69 (Official build) (64-bit)

[Bug] Extension breaks up Medium.com code blocks

With this extension enabled, long code block in articles on Medium.com seem to get broken up into a bunch of separate code blocks.

Example of how this looks:

show the copy icon always

the copy icon is show when the mouse is hover on the element, can you add an option to allow show copy icon always in the code element?

Add github.io

Add github.io to the list of websites

Copy button gets outside on Stack Exchange sites

Broken CSS?

GitHub Enterprise?

Can this be made to work on GitHub Enterprise instances? I've never investigated how similar they are code-wise, but the front ends are basically identical.

You'd probably have to add an option to specify the domains to run on. The two enterprise instances I use are at github.company_domain.com

Feature Request for Search Engine Samples

@zenorocha pragmatic enhancement Zen...thank you. Is there a way to get this to work with Bing?

Add button on GitHub's source code page

[BUG] "Enable CodeCopy on this domain" not available

The documentation states that custom domains can be added by right-clicking on the extension and choosing "Enable CodeCopy on this domain".

https://github.com/zenorocha/codecopy#custom-domains

I have installed the extension on multiple browsers (Chrome and Brave) on multiple OSes (Linux and OSX), and am unable to get this option to show up. Right-clicking on the extension gives the same context menu as left-clicking, and there is no "Enable CodeCopy on this domain".

Does `copycode` also work with Gist snippets?

Hi @zenorocha

many thanks for this awesome piece of software. I have embedded codecopy with my blog and it works well. This is rather a question than an issue though ;)

I embed some Gist snippets in my posts but don't know how to enable codecopy on those snippets. Would you mind to share some hints?

Btw, I visit Gist site but the code snippets don't have the copy icons (whilst code blocks on the other sites like SO, Github do).

Thanks a lot.

Update the firefox extension

Update the extension in firefox as it is not updated recently