DEV Community: Himashi Hettege Dona

How To Build Your First Chrome Extension

Himashi Hettege Dona — Thu, 31 May 2018 14:49:35 +0000

Changing the Web, One Puppy Image at a Time

Let’s talk about browser extensions, or more specifically how to build your first Chrome extension. I went to a class a few weeks ago where we had a lot of fun creating this very silly extension with a few lines of code. I thought I would share it, so you all can try it out and maybe even expand on it.

What is a Browser Extension

Before we get started, let’s review what browser extensions are. Browser extensions are really just short pieces of code that provide some extra functionality to a browser. You’re probably using a few right now such as an Ad Blocker or a Password Manager. Google has a whole store of really useful and fun Chrome extensions that people have built to enhance the web browsing experience.

https://chrome.google.com/webstore/category/extensions

For today, we’ll be creating an extension that targets all images on a webpage, and replaces them with pictures of puppies!

Folder Structure

To get started:

Clone the following repo locally to grab the starter files: https://github.com/himashi99/chrome-extension

Your folder structure should resemble the above.
I’ve included the “poop” emoji for you in the image folder, but feel free to use 3. any image icon you would like.
The Manifest File is a JSON file that describes our extension to Chrome. It is where we specify important information about our extension, such as permissions it needs or icons it uses.
Include the below code in your “manifest.json” file.

{   
    "name": "Yay Chrome!", 
    "version": "1.2", 
    "description": "First project to build a fresh chrome  extension", 
    "manifest_version": 2,
"permissions": ["activeTab", "declarativeContent"],
"icons": {
      "16": "images/poop_16.png",
      "32": "images/poop_32.png",
      "48": "images/poop_48.png",
      "128": "images/poop_128.png"
    },
"page_action": { 
      "default_icon": {
        "16": "images/poop_16.png",
        "32": "images/poop_32.png",
        "48": "images/poop_48.png",
        "128": "images/poop_128.png"
      }
    },
"background": {
      "scripts": ["scripts.js"],
      "persistent": false
    }
}

Let’s break down the above code:

We need to give our extension a name, version number, and a short description.

The current manifest_versions is 2 so leave this as is.

The “activeTab” permission allows access to the current tab the user is on. The “declarativeContent” permission allows the extension to be aware when a tab is changed, or a new webpage is visited.

We import image icons of varying sizes so our extension is responsive on different screen sizes.

The “pageAction” places the icon in the Chrome toolbar and represents an action that can be taken on a current webpage i.e. button is clickable.

In the final code block, background scripts are loaded when needed and listens for, and manages events. Persistent is set to “false” so that background scripts are unloaded once they have completed their action.

In this case, the Manifest file instructs that “scripts.js” file should be loaded. We will be coming back to “scripts.js” and “main.js” files shortly.

Chrome Setup

Open up Chrome and go into the Extension Manager

We need to let Chrome know we’re badass developers, so let’s turn on the “Developer Mode” at the top right corner. This will allow us to load our own extensions.

Click on “Load Unpacked” and select your “chrome-extension” folder.

Alright! We have now loaded our extension in. You should see the extension in the extension manager, and the icon in the Google Chrome Toolbar. The icon will be greyed out and inactive.

If you do make any changes to the JSON file at this point, you can hit the refresh button on your extension.

scripts.js File

It’s time to activate the icon , and in order to do that, we need to link the button to our “scripts.js” file.

Include the below code blocks in your “scripts.js” file.

chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
   chrome.declarativeContent.onPageChanged.addRules([{
     conditions: [new chrome.declarativeContent.PageStateMatcher({
       pageUrl: {schemes: ['https', 'http']},
     })
     ],
         actions: [new chrome.declarativeContent.ShowPageAction()]
   }]);
 });


chrome.pageAction.onClicked.addListener(function() {
   chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
     chrome.tabs.executeScript(
       tabs[0].id, 
       {file: 'main.js'}
     );
   });
 });

Let’s break down the above code:

First Code Block:

Going back to the Manifest File for a second, remember that we specified permissions for activeTab and declarativeContent? Well this lets us use the Chrome APIs (“chrome.declarativeContent”), which then allows our extension to take actions depending on the content of a webpage, without asking for host permission to read the webpage content.

We also defined “pageAction” in the Manifest File as our extension icon in the Chrome toolbar.

The declarative API further allows rules to be set on the “onPageChanged” event, which then takes an action when conditions under “PageStateMatcher” are met.

The “PageStateMatcher” only matches webpages when the listed conditions are met. In this case, the rules would show a page action for any http or https webpage.

“removeRules” is called to clear all previously defined rules that were added when the extension was installed, so a new set of rules can be defined (“addRules”).

Second Code Block:

When pageAction, which is the extension icon we created in in our Manifest file is clicked, we add a listener i.e. don’t run the script yet.

The next line refers to the “active tab” permission we stated in our Manifest File. Chrome queries to the current window that is open, and determines the active tab. Once the active tab is determined, it runs a function with the parameters “tabs”.

The last bit of code tells Chrome to go to the active tab, which we isolated in the previous line, and execute a script, in this case the “main.js” file.

Save your file and refresh your extension.
Open a new tab and you should see that your icon is now active and no longer greyed out.

We’re finally done all the setup work and can get to the fun part!

Image Placeholder Service

We need to find some replacement images for our extension. There are a couple of sites that do this and have images of varying sizes. I’m going to use the puppy one, https://placedog.net/ but there are many more so choose your favourite!

https://placekitten.com/

https://placebear.com/

main.js File

We’re now going to write our script so we can replace the images with our cute puppy photos when we click on our extension.

Include the below code in your main.js file

var allImages = document.getElementsByTagName('img');

for (var i = 0; i < allImages.length; i++) {
  allImages[i].addEventListener('mouseover', function() {

    var thisImageHeight = this.clientHeight;
    var thisImageWidth = this.clientWidth;

  this.setAttribute('src', 'https://placedog.net/' + thisImageHeight + '/' + thisImageWidth)
  })
}

Let’s break down the above code:

We want to target all of the images on a given webpage. Since these image elements will all have an “img” tag, we grab them with document.getElements byTagName(‘img’) and assign it to the variable “allImages”.

We can now use a “for loop” to loop over each image and add an Event Listener. In this case, we are awaiting the user to mouse over the image.

The width and height of our new images should be equal to the images that are being replaced. We assign this original image height and width to separate variables: thisImageHeight and thisImageWidth.

We can now use the setAttribute feature to change the attribute of the src element. Remember that “this” refers to the image that was moused over. We will also include the image height and width using the variables from our previous line.

You did it!

Alright, save your file and refresh your extension. Open up a webpage (with lots of images) and try out your fun new Chrome extension!

JavaScript — Back to Basics: Prefix vs. Postfix

Himashi Hettege Dona — Sun, 15 Apr 2018 20:54:12 +0000

Wish me luck, I’m diving into JavaScript!

As much as I want to start using JavaScript right away, and create applications, I know that I won’t be able to fully grasp the language unless I understand the fundamentals. Consequently, I’ve been following the chapters from https://javascript.info which has been a great source so far.

For my own reference, I thought I would write about interesting tidbits I’m learning, or topics I’m struggling with along the way. I hope this will also be of some use to others who are leaning JavaScript as well.

Increment/Decrement

This numerical operation increases or decreases a variable by 1. It’s important to remember that this can only be applied to variables, and applying this operation to numerical values will return an error.

Increment ++: Increases variable by 1
Decrement — — : Decreases variable by 1

The ++ or — — can be applied both before and after the variable. This is where it gets a bit tricky.

Syntax

Postfix Form: counter++
Prefix Form: ++counter

Although both forms increase the variable by 1, there is a difference. The Postfix Form returns the original value of the variable, before the increment/decrement The Prefix Form returns the value after the increment/decrement. This difference can be seen if we are using the returned value of the increment/decrement.

Example

Prefix
let counter = 2; alert(++counter); //3 incremented value has been returned

Postfix
let counter = 2; alert(counter++); //2 Returns the original value prior to the increment

If we are using the value of the increment/decrement at a later point in time however, there is no difference between the forms.

Example

Prefix
let counter = 2; ++counter; //3 The incremented value alert(counter); //3 Incremented value has been returned

Postfix
let counter = 2; counter++; // 2 The original value alert(counter); //3 Value has been incremented and returns the new value

It took me a bit of time to wrap my head around this so I hope this was a clear enough explanation.

If you liked this article, click the heart button. I would greatly appreciate it!

Cognitive Behavioural Therapy (CBT) for Developers

Himashi Hettege Dona — Sat, 31 Mar 2018 18:53:45 +0000

I went to a really interesting Meetup the other day called Cognitive Behavioural Therapy (CBT) for Tech Leads. The talk was led by Jamie Strachan, who was a developer for 15 years and now manages a team of developers at Info-Tech Research Group. In battling his own depression, he was introduced to the book “Feeling Good” by David D Burns, where he discovered CBT.

Although not a tech lead myself, I was intrigued by the topic. Coming from a Neuroscience background and spending countless hours in various psychology classes, I wanted to see how Jamie was using CBT to help improve the day-to-day effectiveness of his fellow developers.

CBT is the idea that our thoughts determine our emotions. Changing how we think therefore, will change how we feel about an experience. CBT is generally used to treat depression and other mental disorders, but Jamie outlined how CBT can be used to overcome common challenges such as procrastination, perfectionism, or handling criticisms.

Now before we can go into how CBT can help overcome these challenges, we need to understand how our minds can trick us into arriving at negative conclusions. These “tricks” or cognitive distortions, are inaccurate thoughts that reinforce negative patterns of thought or emotions. It’s essentially a faulty way of thinking that convinces us of something, that isn’t really true. There are many cognitive distortions but some of the ones that Jamie pointed out were:

Emotional Reasoning — We believe what we feel must automatically be true. We believe these unhealthy emotions reflect the way things actually are.

eg.) Because I am feeling overwhelmed, I must be facing something overwhelming.

All-or-Nothing Thinking — If we don’t perform perfectly in one area, we see ourselves as a total failure.

eg.) I can’t learn this language quickly enough therefore I’m a failure as a developer.

“Should” Statements — We have a firm set of rules about how we should behave. We think these statements are motivating when directed towards ourselves, however they often leave feelings of guilt, frustration, and failure.

eg.) I really should exercise.

Jumping to conclusions (Mind reading, fortune teller error) — We come to a negative conclusion even though there are no definitive facts that convincingly support said conclusion.

a.) Mind reading — You arbitrarily conclude that someone is reacting negatively to you.

eg.) She didn’t say hello to me this morning. She must dislike me.

b.) The fortune teller error. — You anticipate that things will go awry, and you feel convinced that your prediction is an established fact.

eg.) My year-end review will definitely go poorly.

Catastrophizing / Magnifying or Minimizing — We expect the worst to happen based on a slight incident that was not a big issue in the first place.

eg.) I made a mistake and now the whole project is ruined and I’ll be fired.

Labelling — We generalize one or two qualities into a negative global judgement.

eg.) I can’t even help him find a solution. I’m an idiot.

Jamie then went on to explain how these cognitive distortions are intertwined with some of the everyday challenges we face both in the workplace and our personal life.

Perfectionism

Perfectionism is described as setting extremely high and often unreasonable expectations for yourself and/or others. Oftentimes, your self-worth is based on your ability to strive and achieve these standards. Perfectionism involves “all-or-nothing” thinking; if something is not “perfect” or up to a certain standard, it’s useless.

As soon as Jamie mentioned this, I instantly thought of an example from my own life. When I was coming up with ideas for my personal website, I looked through multiple examples that others had done. I would finally settle on an idea and start working on it, but then I would see something better that someone else had done and scrap my idea. This happened numerous times as I felt my work wasn’t “perfect” and didn’t measure up to some standard I had set for myself. Even after I had the website put up, I would still obsess about various changes or improvements that I could include.

Of course, wanting to improve your work is a good thing, but not when it gets in the way of other more important tasks. In my case, I had other programming languages to learn, and it was far more important to improve my coding skills than put up a cool looking portfolio website.

Procrastination

Consider the following scenario. There’s a deadline fast approaching for a project and you’ve barely started to work. You’re feeling anxious about it so you find yourself scrolling Pinterest, watching T.V., or even cleaning the house all to avoid the task and temporarily find some relief from your anxiety. Once the reality of the deadline sets in, you feel extreme guilt and shame that you’ve wasted all this time. Again you turn to T.V to shut off those negative feelings, and now you’re in a vicious self-defeating cycle.

This is something I’m sure everyone has gone through at some point in their life. Again our brains are really good at misleading us. In this case, we’re using emotional reasoning. We are feeling anxious and overwhelmed so therefore we must be facing a task that’s daunting.

Mishandling Criticism

In any work place, your work will face scrutiny and criticism from others at some point. Hopefully this will be constructive criticism and lead to the overall improvement of the project. It’s important to be able to take criticism from others without feeling anger, frustration, or guilt.

I’ll be honest, I’m not someone who handles criticism well. For me, receiving criticism leads me straight to “Should” statements. “I should have known better.” “I should have caught that error.” “I should have worked harder.” These statements often lead to guilt and the feeling of defeat.

So how do we actually change this way of thinking. The first thing according to Jamie is you need to test your feelings. Feelings will not necessarily be positive. The should however be helpful, reasonable, and rational (based on reality). This helps you identify the issue. Next, get the thoughts out of your head using the Triple Column Method (see below). Lastly, do not be afraid to seek help.

Of course, this topic is far more vast than I can hope to cover in this post but I hope it has piqued your interest. Please check out Jamie’s full talk at https://vimeo.com/253833709