JSON and Custom Extensions

Today:

Subversive websites

Data formats

Data can be saved in many kinds of formats.

spreadsheet snippet

JSON

JSON is a good standard way of working with data files and is based on how Javascript literal objects are defined.

JSON uses JavaScript syntax. The JSON format is text only.

JSON is written in a key-value pair format.

"name":"John"

Keep in mind that JSON requires double quotes for strings!

JSON Type Examples

Basic Example

{
  "name": "Saab",
  "color": "red",
  "year": 2016
}

JSON String

{ "name":"Ricardo" }

JSON Number

{ "age":77 }

JSON Object

{
  "person":{ "name":"Shankar Patel", "age":40, "city":"Los Angeles" }
}

Accessing through Dot Notation

character = { "name":"Shredder", "age":30, "home":"TerrorDome" };

enemy = character.name;

Accessing JSON with Bracket Notation

enemy = character["name"];

Nested JSON

Very common!

Example

{
    "rae_sremmurd": {
        "rapper1":"Swae Lee",
        "rapper2":"Slim Jxmmi",
    }
}

Access data with dot or bracket notation.

Imagine we’ve imported and parsed our data inside the object rappers.

let bestRapper = rappers.rae_sremmurd.rapper2;

Change data value

rappers.rae_sremmurd.rapper2 = "Taylor Swift";

Accessing data from an array

let class = {
  "students":[ "Jorge","Will","Serena","Ellen","Moe","Shemp","Larry","Xenia"]
}

let closestStudent = class.students[3]; // "Ellen"

Load JSON with jQuery

let myJSON = '{"name":"Mindy", "age":31, "city":"New York"}';
let myObj = JSON.parse(myJSON);
$("#demo").html(myObj.name);

Resources

Extensions (aka Browser Extensions)

“software module for customizing a web browser. Browsers typically allow users to install a variety of extensions, including user interface modifications, cookie management, ad blocking, and the custom scripting and styling of web pages.”–Wikipedia

What examples can we think of?

Each major browser has its own slightly different format. Chrome has over 100,000 extensions publicly available.

Files needed:

Example manifest:

{
  "manifest_version": 3,
  "name": "Hello",
  "description": "Basic Extension",
  "version": "1.0",
  "action": {
    "default_popup": "hello.html",
    "default_icon": "icon.png"
  }
}

Note: The version number is in quotes because it’s actually a string here. For example, consider a typical minor version number like 0.0.1.

Download the icon and rename to icon.png

Action is where the work happens. It links to the extension’s icon and the html content that will run on the popup.

Example popup:

<html>
  <body>
    <h1>Hello World</h1>
    <p>This is the extension</p>
    <img src="fire.gif" alt="animated fire">
  </body>
</html>

We cannot test our extension in a local server as it’s not meant to be viewed as a typical webpage.

Loading our extension in Chrome

You can test it in Chrome by loading it locally. Ensure all files are saved.

  1. In the URL bar type in chrome://extensions
  2. Toggle the Developer mode icon on the right.
  3. Click “Load unpacked” and navigate to the directory holding your extension (the manifest, html, icon and any other files).
  4. It should load. If you see an error note, click to open the error console and resolve any errors. Then try loading again.

Once loaded, navigate to a website in the browser. Click on the puzzle piece icon. You should see a popup list with your new extension listed. Click on the ‘pin’ icon to add your new extension to your browser bar. You should now be able to see the icon in your browser bar.

When you click your new extension’s icon you should see a popup.

Basic extension example popup window

Resources

Homework

For this week’s assigment, you are to begin working on an extension. Bring your sketch/design and concept, and a first start of your code (popup page in HTML, CSS, manifest done, but the code to run on the browser pages does not need to be done yet as we haven’t covered that yet).

Note: to “turn in” this assignment, please write the general concept and submit it on Brightspace. A title is optional. Then bring your prototype starter code to class and we will continue working on it. We only have code to affect our popup window right now. We will add code to affect the entire browser in our next class.

Design an extension for yourself. Sketch the idea, then begin the process of following the procedure. Review the tutorials to see other capabilities of extensions. Your extension can be something funny, something serious, something helpful, or something strange.

Start by brainstorming your idea. You may want to mock it up using glitch.com to see how it might look on an affected page. If your extension is for use on specific websites, use the inspector in the web browser to check out parts of the page. Perhaps you are hiding a specific class. Maybe you are adding text, changing all of the images, adding background colors, changing fonts, inserting a moving gif, making a favorite website easier to read, or removing its ads.

Create your manifest. Feel free to start by copying a default one and making the changes that you need. Give your extension a name, a version number in quotes, and link to any needed html, js files.

When finished, you can go to Chrome and open your extensions. Check to make sure that the Extensions are turned on (button in top right). Click on button to “Load Unpacked” extension. It should now be stored in your extensions bar. You can click on the pin to pin it to your extensions bar.