![]() ![]() Check out CSS Tricks for tips on spicing things up a bit.Ģ) Turn on "Developer mode" in the top right cornerģ) Click "load unpacked" and select the folder containing your extension files.How to Optimize Firefox for Better Performance It's really just a CSS reset and some boilerplate to get started. This sad CSS is going to look like garbage. Html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video I just don't want to get too deep into the weeds here so it's easier to understand what is going on at a high level. We can dive into the logic line-by-line in the comments below. It's ok if you don't quite follow some of the logic here. 2) If your check passes, grab stories from the cache.ģ) If the check fails, fetch new stories from the API.Ĥ) Add the stories to the element from index.html. The above javascript is basically doing the following: 1) Check to see if you have cached stories ( localStorage.stories) and you most recently fetched stories less than an hour ago. Anything else is just not worth the trouble, in my opinion. You might be tempted to load Vue.js, React, or your favorite flavor of javascript, but if you just want to inject a few chunks for HTML into a static page, go with vanilla JS. This is where the bulk of the work is happening in the chrome extension. If (localStorage.lastFetch & localStorage.stories & ( new Date() - localStorage.lastFetch) response.json()) Var template = document.createElement( 'template') Icons At minimum, Google recommends having a 128x128 pixel icon and a 16x16 pixel icon.Ĭonst storiesDiv = document.querySelector( '#stories') You'll also want to add urls to any APIs you're fetching data from. You've got to ask users permission to store things locally. For example, you can't just go storing data to localStorage willy nilly like some random webpage. By default, everything is pretty locked down. Permissions Security is a pretty big deal when it comes to Chrome Extensions. I've named mine index.html but feel free to stick it to the man and break convention. 1 for a minor upgrade and 1 for a major upgrade.Ĭhrome_url_overrides This is where you determine which html file will be used whenever a user opens a new tab. Once you get published, you'll have to worry about incrementing by. Version While testing, go with "0.1" or "1.0". You'll eventually want to be thoughtful in what you add here but for testing purposes, feel free to go with something random. Name/description/author These fields will be used in the web store to describe your extension. Changing this will throw an error when you try and install your extension. Manifest_version This is basically just a number to tell Google how to interpret your manifest.json file. "description": "The latest Hacker Noon tech stories.", "name": "Tech Stories Tab by Hacker Noon", For now, just start with something like this. Don't worry about every field you could add to your manifest at this stage. This is a necessary file for every Chrome Extension. Step 2: Create a manifest.json file in your new folder I called my folder tech-stories-extension, but it won't be visible once you start marketing your extension. However you choose to make a new folder ( mkdir) and where you put it ( ~/) is up to you.ĭon't get too caught up in the name, it really doesn't matter. Step 1: Create a new folder for your extension Here's what you need to get started building a new tab extension that fetches content from an API. A lot of examples are incomplete or lead you down the wrong path. Google provides a ton of boilerplate examples, but digging through that mess can be a little like navigating through a labyrinth. Check out our Tech Stories Tab extension for reference.ĭeveloping a new extension can be a little overwhelming. ![]() This story will walk you through the basic steps needed to get started building a new tab Chrome Extension powered by an API without any dependencies. ![]()
0 Comments
Leave a Reply. |