An introduction to Node

Today

Injecting scripts in a web extension

Add our manifest

We always start with our manifest json file. It tells the Browser important metadata about our extension, that will be used in the Browser and when published on the Chrome Web Store, as well as what additional files and permissions our extension needs.

We’ll start with the minimum required information.

{
  "manifest_version": 3,
  "name": "Reading time",
  "version": "1.0",
  "description": "Add the estimated reading time to articles"
}

Add icons

Our next step is to add an icon, like we’ve done previously. You can specify multiple sizes 16pixels, 32 pixels, 48pixels, 128pixels.

Put the manifest in the root folder of your project. Let’s add icons for use with our extension. You can use free software like Krita or a paid program like Photoshop to create your icon sizes.

{
  "icons": {
    "16" : "images/favicon-16x16.png",
    "32" : "images/favicon-32x32.png",
    "48" : "images/favicon-48x48.png",
    "128" : "images/favicon-128x128.png"
  }
}

These different file sizes are used on various pages: 16px for the favicon and toolbar, 32px for Windows machines, 48px for the Extensions page, 128px for the Chrome Web Store.

Create a content script

A content script is a script that can modify any webpage we browse. We need to create this script and then link to it in our manifest. Let’s add to our manifest first. In this code we are specifying our script and css pages to add that will alter the currently browsed site. We also specify that it should act on any website we are browsing. If we wanted it to only work on a specific URL we could have it match that URL instead. For example, if we wanted our extension to only work on YouTube we would alter our matches from <all_urls> to https://www.youtube.com/*.

I’ve added a sub-folder css for our injected stylesheet and scripts to hold our injected javascript code.

 "content_scripts": [{
    "css": ["css/main.css"],
    "js": ["scripts/main.js"],
    "matches": ["<all_urls>"]
   }]

Write our script

Our extension will tell the reader how long it should take to read the page. Let’s add our script to main.js.

We’ll build the following script up from scratch one line at a time. This time we are not using jQuery.

//testing to make sure javascript gets injected in the console
console.log("Testing our extension!");

//grab the <article></article> section of the site we are looking at
let article = document.querySelector("article"); 

if (article){ //only run this section if there is an article section
   //grab the "article" tag section content
   let text = article.textContent; 

   //create a regular expressions to find all the words
   let wordMatch = /[^\s]+/g; 

   //now use it on our article text
   let words = text.matchAll(wordMatch); 

   //how many words are there?
   let wordCount = [...words].length; 

   //let's say we can read 200 words per minute
   //divide total words by 200, then round it to get minutes
   let readingTime = Math.round(wordCount / 200); 

   //now we'll display the total reading time on the page
   //create an empty paragraph p tag
   let badge = document.createElement("p");

   //the text for that paragraph, with our calculated time included
   badge.textContent = "⏰: " + readingTime + " minute read";

   //where should we place this new text? 
   //maybe after the first h1?
   //grab our first h1
   let firstH1 = article.querySelector("h1");
   if (firstH1){
     firstH1.append(badge); //if there's an h1, put the time after that
   } else {
    let body = document.body; //otherwise, place it at the beginning of the body
    body.prepend(badge);
   }
   
}```

#### Test our code

Load an unpacked extension in Chrome extensions.

*Extension idea and some code adapted from Chrome for Developers documentation [Run scripts on every page](https://developer.chrome.com/docs/extensions/get-started/tutorial/scripts-on-every-tab) CC BY 4.0*

## Background on working with servers

<iframe width="560" height="315" src="https://www.youtube.com/embed/TNQsmPf24go?si=brKyrTVhKPXUPIa_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

Important points:

A server is a computer.

"The cloud is a marketing term"

We are referring both to the physical hardware (such as a server room) and the software running on the device.

Our Purchase College web space uses Apache webserver. It processes requests and sends out the requested data in packets that get reassembled on the client's website.

## Intro to NodeJS

* Node is a version of Javascript that works outside the browser. It can run on the command line and on servers
* Node is used for writing backend applications without a browser, though it can be used to manage the server in addition to the software you write for a browser
* Download [Node](https://nodejs.org/en/)

We'll start by running a server remotely, using Glitch.com. In the future, we can run our code on any server of our choice.

## NPM
* NPM is the Node Package Manager
* A package manager is a kind of *app store* for the command line, sometimes for a particular operating system, such as [Homebrew](http://brew.sh) for Mac, or for a specific programming language.
* NPM is the package manager for Node software
* Each node program you write that will also use NPM software needs a ```package.json``` file to list the NPM packages you want to include and use

## Express

* Express is a node package
* It is a simple web framework for node that can host files and get user input

*Hello-express* [starter code](https://glitch.com/~hello-express) on Glitch.

To use it in your program

var express = require(‘express’);

//you can now create an ‘app’ //This app holds an instance of express and can use its functionality

var app = express();

var server = app.listen(4000); //listens on port 4000. Triggers callback.

app.use(express.static(‘public’)); ```

This means http://localhost:4000 will host the project

Homework

Finish your own custom Chrome extension. It can be useful, silly, inspiring, confusing. Ideally, it’s something that extends the browser, making it do a new task, modifying websites in a way that serves your own need.

Take a screenshot of your completed extension.

Upload a compressed copy of a folder holding your extension to turn it in. Make sure your extension includes a description that explains its concept!