Open up our gistdownloader project on your favorite code editor and rename the default Helloworld.vue file inside the src/components directory to DownloadButton.vue and update the file with the code below: //src/components/DownloadButton.vue Download file import download from './utils' export default Ĭhrome manifests are expected to have a mandatory manifest_version of value 2. That way, we can click on it to download the gist. What we want to do is attach a button alongside the Raw button on the gist above. Open it up on your browser and you’ll see the Vue app live!įirst, let’s create our download button. The project will be live on the default port localhost:8080.

This will create a new Vue project for you in the gistdownloader folder. Open a terminal window and run the following command to quickly set up a new Vue project. There are several ways we could have done this, but let’s stick to the good old way. In this tutorial, we will create a Chrome extension to download code snippets from GitHub Gist. Gists are driven by git version control, so they also have complete revision histories. It is a platform where you can share single files, parts of files, or full applications with other people. GitHub Gist is a simple way to share code snippets and projects with others. With Chrome extensions, you can do more than just customize web pages - you can also add custom behaviors and functionalities to suit your needs by harnessing the power of JavaScript. They are written in HTML, JavaScript and CSS. In this tutorial we will be building a Chrome extension with Vue.js to download gists from GitHub Gist.Ī Chrome extension is a browser program built to customize the functionality and modify the behavior of the Chrome browser.

Javascript download chrome