• Skip to main content
  • Skip to footer

InRhythm

Your partners in accelerated digital transformation

  • Who We Are
  • Our Work
  • Practices & Products
  • Learning & Growth
  • Culture & Careers
  • Blog
  • Contact Us

chrome extension

May 13 2019

Service Workers and PWAs: InRhythm’s Learning and Growth Newsletter


May 7th: How do Service Workers Work?


Only recently did designer Frances Berriman and Google Chrome engineer Alex Russell coin the term “progressive web apps.” In 2015 the pair introduced PWAs as a way to describe how apps will leverage new features supported by modern browsers, including service workers and web app manifests, which allow users to still use their native operating system (OS), but upgrade their web apps to progressive web applications.

In order to provide rich experiences and high performance, native mobile apps must sacrifice storage space, real-time updates and search engine visibility. Traditional web apps endure lack of native compile executable and dependence on unreliable web connectivity. Service workers attempt to give PWAs the best of both.

This week, InRhythm Engineer, Anna Brakowska dives deep into The Magic of Service Workers.

Are you passionate about PWAs? How has the implementation of service workers enhanced the way your users experience your product? Share your thoughts with @GetInRhythm or on the InRhythmU blog. 

Thanks and Keep Growing,

Gunjan Doshi
CEO, InRhythm

The Magic of Service Workers
(12 min. read)

“If you heard of PWAs, you also heard of service workers, but what are they, how do they work, and what does it have to with anything?””

What We’re Reading Around the Web


Service Workers and SEO
(5 min. read)
Search Engine Land
“”Did you know that browsers have had superpowers since about 1996? They have! When he was developing JavaScript for Netscape, Brendan Eich ‘invented the javascript: URL along with JavaScript in 1995, and intended that javascript: URLs could be used as any other kind of URL, including being bookmark-able.’ That means you could write a script into a link (e.g. Bookmark Me!), bookmark that script (put a little button on the browser’s bookmark bar, for instance), and run that code on any page you’re browsing. Check out this subreddit for some fun examples.”

Take UX to the Next Level for PWAs
(5 min. read)
Medium
“There were stand-alone web products and there were apps, but now there’s also the hybrid breed of progressive web apps (PWA) that’s getting more popular for their ability to deliver app-like experience but in the browser. Their platform independence is attractive for developers since it means less time and costs involved. They are also alluring to users since they don’t need to be downloaded, aren’t intensive on hardware resources, and can even be used offline while still offering sufficient functionality.”

Should Your Business Get a PWA?
(3 min. read)
TechHQ
“Thanks to help from ‘service workers’, PWAs work even if users are offline or on low-quality networks. A service worker is a snippet of code, a script that runs in the background and helps a PWA function. It’s one of its critical building blocks. Service workers help PWAs do things like send notifications to users and stay up-to-date.Service workers help provide an engaging experience while offline and ensure that your application loads quickly.”

Chrome 75 Beta Displays Service Workers
(2 min. read)
9to5Google
“Service workers are increasingly leveraged by today’s websites to create powerful experiences. This includes push notifications and background syncing, as well as offline apps. Given that they run in the background, and have no corresponding web page or user interaction, Chrome 75 will now display service workers in the Task Manager (Settings > More Tools).”

Written by Gunjan Doshi · Categorized: InRhythm News, Newsletters · Tagged: bookmark, browser extension, chrome extension, learning and growth, newsletter

May 01 2019

Browser Extensions and Bookmarklets: InRhythm’s Learning and Growth Newsletter


April 23rd: Do You Control Your Browser?


Stanley Kubrick predicted first contact in his film 2001: A Space Odyssey and introduced a now-iconic, silver-tongued psychopathic A.I. by the name of “HAL” (1 character below “IBM”—get it?), but all we got in our own 2001 was United States v. Microsoft Corp. Some liked it and some didn’t but what everyone agreed on was that our freedom to choose our own browser would be integral to the Web’s success. 

This week we’re focusing on how two technologies—browser extensions and bookmarklets—can expand our ability to make use of the web by customizing our browsers. Distinguished IR engineer Pat Needham documents his recent adventures in building a Chrome extension, warts and all. We’ve all been there, Pat (spoiler alert: it’s published!).

Are you an extension evangelist? How have extensions and bookmarklets changed the way you experience the web? Tell us what you think @GetInRhythm or on the InRhythmU blog. 

Thanks and Keep Growing,

Gunjan Doshi
CEO, InRhythm

Adventures in Chrome Extension Building

(4 min. read)

“Curious about the process behind developing your own Chrome extension? InRhythm breaks down the steps from ideation to publishing as an individual engineer.”

What We’re Reading Around the Web


Bookmarkhuh?
How-to Geek
“”Did you know that browsers have had superpowers since about 1996? They have! When he was developing JavaScript for Netscape, Brendan Eich ‘invented the javascript: URL along with JavaScript in 1995, and intended that javascript: URLs could be used as any other kind of URL, including being bookmark-able.’ That means you could write a script into a link (e.g. Bookmark Me!), bookmark that script (put a little button on the browser’s bookmark bar, for instance), and run that code on any page you’re browsing. Check out this subreddit for some fun examples.”

Mobile AR Experiences in Unity
(7 min. read)
Thoughtbot
“Browser extensions are like apps for your browser. Unlike bookmarklets, these are vendor-specific toolkits for extending browser functionality. Those ad blockers you keep hearing about are typically browser extensions; LastPass, a popular (and recommended) password manager is another. For-profit companies like ActiveInbox depend on browser extensions. At InRhythm we’re thinking hard about how to help our clients using these powerful tools. Thoughtbot offers a great write-up on how to dive in and start creating—Chrome and Mozilla offer detailed guidance as well.”

R.I.P Bookmarklets
(9 min. read)
Medium
“Brian Donohue, former CEO of Instapaper (a company that bookmarklets essentially made possible) laments that ‘Bookmarklets are Dead (we just don’t know it yet)‘. Written in 2014, this important article was mainly reacting to security-focused technical changes that would cripple the power of bookmarklets in certain scenarios. While the reports of this demise were somewhat exaggerated, it’s true that these powerful customizations remain beholden to the goodwill of browser vendors, and there’s a risk in that. Run out and make some bookmarklets while you still can!”

Are Extensions Safe?
(5 min. read)
Brian Madden
“Browser extensions are deeply integrated into the browser experience, which means they can ‘see’ pretty much anything you do on the Web, and have access to a lot of your data. This is their power, and when used well they function as useful apps. Extensions, just like apps, must ask for certain permissions prior to installation, and that’s good. But the vetting process for extensions is not as robust as it is for, say, Apple’s App Store. Bad actors are always searching for weaknesses, and browser extensions are not immune. But let’s not throw out the baby with the bathwater—you can be a good actor, and build powerful tools for your customers and friends that only bring value.””

Written by Gunjan Doshi · Categorized: Browser extensions, InRhythm News, Newsletters · Tagged: bookmark, browser extension, chrome extension, learning and growth, newsletter

Apr 23 2019

Adventures in Chrome Extension Building

A couple of weeks ago I created my first Chrome extension. It was a great learning exercise, and if you’ve ever been curious about making your own, the basics I cover here will be helpful in your own journey if you choose to jump into the wide world of extension development. Here, I want to document my journey including the steps (and missteps) I took along the way.

Why Chrome Extensions?

I’ve always been a fan of Chrome extensions, yet somehow had never made one myself, despite having plenty of “what if” moments imagining how websites I frequently use could be made (even slightly) better. I finally made the decision to act with a site that happened to be the Firebase developer console’s hosting tab. This tab displays the DNS records one must add to the registrar from which the domain was purchased. There are two IP Address values one must copy over, and after a while I thought: “what if this copy paste could be automated?” The end result now lives on the Chrome Webstore.

Namecheap is a registrar which provides services on domain name registration. A couple years ago they added two-factor authentication as an option for additional account security. 2FA is great, but it makes logging into your dashboard more of an effort.

Luckily, Google has made plenty of documentation and guides available covering all things Chrome extension-related, and they can be found here. There are also countless articles on Medium, and other blogs serving as great complementary reading; I found seeing the same info described from different perspectives gives a fuller picture.

Initial Development + Dealing with Errors

The process started with doing a whole lot of copying and pasting, making sure the manifest.json file had everything it needs to contain. My first real roadblock had to do with figuring out how to dynamically add a button to the existing webpage. The particular challenge was that the modal I wanted that button to display inside of did not exist in the DOM on page load. Furthermore, the ID assigned to that modal appeared to be random due to it being different upon page every refresh:

Browser development window highlighting md-dialog#dialogContent ID modal

That led me to try a different approach, utilizing the popup window that appears after clicking on the Chrome extension’s icon in the upper right-hand corner of the browser as the way of connecting the Firebase console to Namecheap’s API.

Switching from plain JS to React

There came a point where I realized there was too much conditional logic affecting the content of the popup. For example, I needed to take into account whether:

1. The user has the Namecheap API credentials already saved to the extension’s local storage.
2. The user is currently on the Firebase console hosting tab’s URL
3. The user has the “Connect domain” modal open
4. A request is being made with the user’s Namecheap API credentials
5. The extention successfully retrieved those credentials from the API call

All of this quickly became messy, so switching to React appeared to be a reasonable option. This guide gives a great starting point for doing so with create-react-app. The resulting App.js file contains the conditionals for driving the five scenarios mentioned above.

When the component first mounts, three asynchronous actions take place for 1) getting the user’s IP address, 2) getting the locally saved data, and 3) getting the URL of the current tab. The values retrieved determine what next appears in the popup window.

Namecheap API

Namecheap offers an API that lets users do most things they can do on the web dashboard. The only two methods I needed to use were getHosts and setHosts. These, along with all other API methods, require certain request parameters to exist such as ApiUser and ApiKey. Responses come back in XML format, which I had never dealt with in JavaScript before. This was not a major roadblock but led to a healthy dose of trial and error while attempting to access any response errors. Using something like this:

const errors = xmlDoc.getElementsByTagName('Error') || [];

was sufficient because that Errortag will only appear when there is at least one.

One thing I had to watch out for in using the setHostsmethod was making sure I didn’t accidentally delete existing DNS Host records, or at least not accidentally. I say accidentally because, as per the API docs:

“All host records that are not included into the API call will be deleted, so add them in addition to new host records.”

The only time I can see it being beneficial to delete records is to get rid of the two that exist by default after registering a new domain, one which is of type CNAME Recordwith value http://parkingpage.namecheap.com., and the other being a URL Redirect Record, since you would have to remove those eventually in order to see actual content on the site.

Publishing to the Chrome Webstore

Compared to the process of developing this application, actually publishing it to the Chrome Webstore was surprisingly easy. The steps are succinctly described here. A few screenshots, along with a one-time $5 registration fee, are the main necessities. After filling out other info (like the category this extension belongs to, whether you want to restrict its access in certain countries), and uploading a .zip file of the extension, it becomes accessible for anyone to download.

Next Steps

The Chrome extension I made was mostly for educational purposes, and without a doubt has at least a bug (or three). However, it’s helped pave a path toward making other extensions which have less niche use cases, such as one that adds custom “copy-to-clipboard” buttons with dynamically changing keyboard shortcuts to the page for every code snippet in a readme file on Github. Having already gone through the process and demystified the steps involved from inception to publishing, I feel more confident bringing my next “what if” idea to life. I hope this overview will help you do the same.

Written by Pat Needham · Categorized: InRhythm News · Tagged: Chrome, chrome extension, google chrome, Google Developers

Footer

Interested in learning more?
Connect with Us
InRhythm

140 Broadway
Suite 2270
New York, NY 10005

1 800 683 7813
get@inrhythm.com

Copyright © 2022 · InRhythm on Genesis Framework · WordPress · Log in

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
SAVE & ACCEPT