Category / Javascript

by Aubree Abril

You can make a Chrome extension!

Inspired by this post by Lindsay Grizzard on how to make a simple Chrome extension, I decided to try my own.

According to the docs over at developer.chrome.com an extension should be a small program with a single, narrow purpose. Extensions are used to customize the browsing experience.

I started by following the beginning of Lindsay’s walkthrough to make an extension that renders a custom HTML page each time you open a new tab.

I made a directory with an index.html file and a manifest.json file.

Screen Shot 2018-10-17 at 10.38.29 PM.png

Every extension needs to have a manifest. It needs a name, description, version and manifest version. Manifest version should be set to ‘2.’ That’s the supported version right now. The other version is your project version number.

chrome_url_overrides is what’s going to let us start customizing. For the basic walkthrough we just told each new tab to load our simple index.html.

Screen Shot 2018-10-17 at 10.44.47 PM.png

To test it, we go to chrome://extensions and use the toggle in the upper right corner to switch to developer mode. Click “load unpacked” and select the extension directory. Now when I open a new tab ….

Screen Shot 2018-10-17 at 10.47.28 PM.png

That’s exciting, but I wanted to try something a little more fun.

With just one more file and a few more lines of code I made my extension trigger an alert on Twitter when you click the retweet button!

First, I made a very simple index.js file:

console.log('Hello Twitter')

Then I made an addition to manifest.json.Screen Shot 2018-10-17 at 10.55.13 PM.png

The content scripts run on certain websites. Matches sets a match pattern. This one will match any URL with twitter.com in it. Then I specify the path to my new index.js file. After the updates were made and saved, I had return to Chrome developer mode and tell the extension to refresh so it would get those changes.

Then, when I navigated to Twitter and checked the console to make sure index.js was connected. Screen Shot 2018-10-17 at 11.02.18 PM.png

It was! Next I spent some time poking around in the console. I practiced using querySelectorAll and getElementsByClassName to figure out how I was going to grab what I wanted to change.

I ended up selecting the retweet buttons by class name. Then I turned them into an array so I could map over them and add event listeners that would trigger my alert on click.

Screen Shot 2018-10-17 at 11.08.00 PM.png

Back at the Chrome developer mode I refreshed again and headed back to Twitter and started trying to retweet things.

Screen Shot 2018-10-17 at 11.09.41 PM.png

It works. It’s not ready for the Chrome Extension Store, but it’s fun to practice on!

by Aubree Abril

Javascript Dates

For my most recent pairing project, my partner and I built a habit tracking app. After selecting a user profile, the user could view a dashboard-type page that listed habits and days of the week in a table.

Javascript has a built in Date object that helped us achieve some of the functionality we were going for.

date

This week I spent some more time exploring Javascript Date methods and figuring out how to use them

Creating a new Date object with no parameters will give back a full date object for the current date and time, like the one below.

Screen Shot 2018-09-19 at 11.08.45 PM.png

If I just wanted to know the current year, I could use the .getFullYear() method on my currentDate variable. This will return just the four digit year.

Screen Shot 2018-09-19 at 11.13.40 PM.png

The .getDate() method works the same way.

currentYear.getDate()
// => 19

It’s a little bit more complicated to get the current month or day of the week.

Screen Shot 2018-09-19 at 11.19.25 PM.png

To get the name of the current day of the week you could make an array of the days of the week and use the number returned from .getDay() as the index, to grab the right day.

Screen Shot 2018-09-19 at 11.23.39 PM.png

The same process would work for finding the current month using .getMonth() method! I would make an array of the names of the months and use the value of currentDate.getMonth() as the index to find the month I’m looking for.

These are just a few of the built-in getter methods for Javascript’s Date object.

If I don’t want to work with the current date I can use the new Date() constructor with year, month, and date arguments to create the date object that I want. If I wanted to be really specific, I could also include arguments for hours, minutes, seconds and milliseconds.

Screen Shot 2018-09-19 at 11.48.34 PM.png

The Date constructor always returns a Date object. But what if I needed my date as a string? The Javascript Date object also has built-in conversion methods!

Screen Shot 2018-09-19 at 11.49.37 PM.png

These are just a few of the methods that come with Dates and seemed the most useful. Here’s a full cheat sheet. There are also a bunch of Javascript libraries for date and time manipulation.

Next week I’ll try out one or two of those to see if they can make it a little bit easier to make a full calendar in React.