The new Cosmic dashboard is here!
Test drive it now →

How to build a Chrome Extension to save web content to Cosmic

Community Articles
Community Articles How to build a Chrome Extension to save web content to Cosmic

In this tutorial, we're going to build a Google Chrome extension to save web content to Cosmic Buckets. Think of it as your personal web clipper.

TL;DR

Download the code from the GitHub repo

Pre-requisites

You just need to have Chrome installed for testing it out and nothing else.

Installing the demo

  1. Get the source code into your machine by either downloading or cloning the repo, which is located here.
  2. In Chrome, visit chrome://extensions 
  3. Enable Developer mode by ticking the checkbox in the upper-right corner.
  4. Click on the "Load unpacked extension..." button.
  5. Select the directory containing your unpacked extension.
  6. Refresh loaded pages.


You'll now see the extension icon to the right of the Omnibox. Click on it and login with your Cosmic credentials. You can now start saving content to your buckets. 

Understanding the Source Code

The defining file in a Chrome extension is the manifest.json file. Most of the fields in the Manifest are self explanatory. Let's go through the major fields, and see what each file do.

  • manifest_version is "2". it is very important not change it because it is a sign to chrome to how to compile the extension.

  • permissions includes the permissions which extension needs
    -storage permission allows you to store data at "Chrome local storage" which is important to save data across websites and different pages.
     -https://api.cosmicjs.com/v1 permission gives access to retrieve and send data from and to the API anywhere in the extension.

  • browser_action contains "default_icon" and "default_popup" which related with top bar icon and HTML file

  • content_scriptsthis is an important part  which it contains scripts which injected into websites
    - matches: [*://*/*] tells the browser tp inject the scripts to any protocol [http, https,...] and any domain.

    - css field contains CSS style sheets to be injected

    - js field contains JavaScript files to be injected

    -all_frames is true which tells to inject script to all frames like "iframe" tag . it is important to make the extension work everywhere

  • background include background scripts which manage send data to Cosmic and checks authorization

The JavaScript files in the js folder is where the whole functionality is resided. myscript.js file contains all the functions of the extension. contentscript.js file uses jquery and myscript.js to manage the extension function is matched websites. background.js file periodically calls the authorization function and also sends data to the Cosmic bucket.

Conclusion

The advantage of  API-first content management systems is that there is no limit as to where you can integrate your app into.  Your Cosmic Bucket can thus power your web app, native app, browser extensions or basically anything than can consume an API. If you have any questions, please reach out to us on Twitter or join our Slack community.

You may also like


Cosmic provides tools and resources to create your own unique content publishing workflow that satisfies your team's needs. In this tutorial I'll demonstrate setting up a simple workflow for an Editor and Contributor team that needs to manage content in a draft, review and publish process.
Add the power of Algolia search to your Bucket. This Extension enables you to sync your Cosmic Objects with Algolia, making your data searchable. Set up automatic syncing to automatically add / edit / remove content from Algolia. Follow the simple steps below to install and setup Algolia.
Our digital world is being built on top of API services. And Webhooks are the operators that enable these API services to communicate with each other.
Next.js is a React framework for building hybrid applications. It's flexible, extensible, and works great with any data provider. In this tutorial, we'll show how to get started with Cosmic CMS and Next.js.
Why should you migrate your CMS? What's the big deal about Cosmic? This article should answer some questions you have about cosmicJS and what the pros and cons are of using an API-driven Content Management System
In this walkthrough, I'm going to show you how I build a blog application in Go Lang. I'll also talk about styling it using Tailwind CSS and lastly, I'll show you how you can utilize GitHub Actions to deploy your Go-based applications to Heroku.

Get started with Cosmic

Personal projects are free. Scale up as you grow.
Start building Talk to sales