<p>In this tutorial, we&#39;re going to build a Google Chrome extension to save web content to Cosmic Buckets. Think of it as your personal web clipper.</p><h2>TL;DR</h2><p><strong><a href="https://github.com/cosmicjs/content-grabber" rel="noopener noreferrer" target="_blank">Download the code from the GitHub repo</a></strong></p><h2 data-usually-unique-id="381622010639830291586137">Pre-requisites</h2><p>You just need to have Chrome installed for testing it out and nothing else.</p><h2 data-usually-unique-id="711486294920629409065847">Installing the demo</h2><ol><li>Get the source code into your machine by either downloading or cloning the repo, which is located <strong><strong><a href="https://github.com/cosmicjs/content-grabber" rel="noopener noreferrer" target="_blank">here</a>.</strong></strong></li><li>In Chrome, visit <code>chrome://extensions</code>&nbsp;</li><li>Enable Developer mode by ticking the checkbox in the upper-right corner.</li><li>Click on the &quot;Load unpacked extension...&quot; button.</li><li>Select the directory containing your <strong>unpacked</strong> extension.</li><li>Refresh loaded pages.</li></ol><h4><br></h4><p>You&#39;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.&nbsp;</p><h2 data-usually-unique-id="899224646998346390850342">Understanding the Source Code</h2><p>The defining file in a Chrome extension is the <a href="https://github.com/cosmicjs/content-grabber/blob/master/manifest.json" rel="noopener noreferrer" target="_blank">manifest.json</a> file. Most of the fields in the Manifest are self explanatory. Let&#39;s go through the major fields, and see what each file do.</p><ul><li><code>manifest_version</code> is &quot;2&quot;. it is very important not change it because it is a sign to chrome to how to compile the extension.<br><br></li><li><code>permissions</code> includes the permissions which extension needs<br>-<code>storage</code> permission allows you to store data at &quot;Chrome local storage&quot; which is important to save data across websites and different pages.<br>&nbsp;-<code>https://api.cosmicjs.com/v1</code> permission gives access to retrieve and send data from and to the API anywhere in the extension.<br><br></li><li><code>browser_action</code> contains &quot;default_icon&quot; and &quot;default_popup&quot; which related with top bar icon and HTML file<br><br></li><li><code>content_scripts</code>this is an important part &nbsp;which it contains scripts which injected into websites<br>- <code>matches: [*://*/*]</code> tells the browser tp inject the scripts to any protocol [http, https,...] and any domain.<br><br>- <code>css</code> field contains CSS style sheets to be injected<br><br>- <code>js</code> field contains JavaScript files to be injected<br><br>-<code>all_frames</code> is true which tells to inject script to all frames like &quot;iframe&quot; tag . it is important to make the extension work everywhere<br><br></li><li><code>background</code> include background scripts which manage send data to Cosmic and checks authorization</li></ul><p>The JavaScript files in the js folder is where the whole functionality is resided. <code>myscript.js</code> file contains all the functions of the extension. <code>contentscript.js</code> file uses jquery and <code>myscript.js</code> to manage the extension function is matched websites. <code>background.js</code> file periodically calls the authorization function and also sends data to the Cosmic bucket.</p><h2>Conclusion</h2><p>The advantage of &nbsp;API-first content management systems is that there is no limit as to where you can integrate your app into. &nbsp;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 <a data-target-href="https://twitter.com/cosmic_js" href="https://twitter.com/cosmic_js" rel="noreferrer nofollow noopener" target="_blank">Twitter</a> or join our <a data-target-href="https://cosmicjs.com/community" href="https://cosmicjs.com/community" rel="noreferrer nofollow noopener" target="_blank">Slack</a> community.</p>

Blogs by Fady Ayoob

Start building today