Data can be saved in many kinds of formats.
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!
let car = {
name: 'Saab',
color: 'red'
year: 2016
}
{ "name":"Ricardo" }
{ "age":77 }
{
"person":{ "name":"Shankar Patel", "age":40, "city":"Los Angeles" }
}
character = { "name":"Shredder", "age":30, "home":"TerrorDome" };
enemy = character.name;
enemy = character["name"];
Very common!
Example
rappers = {
"Migos": {
"rapper1":"Offset",
"rapper2":"Quavo",
"rapper3":"Takeoff"
}
}
let favoriteRapper = rappers.Migos.rapper2;
rappers.Migos.rapper2 = "Taylor Swift";
let class = {
"students":[ "Jorge","Will","Serena","Ellen","Moe","Shemp","Larry","Xenia"]
}
let closestStudent = class.students[3]; // "Ellen"
var myJSON = '{"name":"Mindy", "age":31, "city":"New York"}';
var myObj = JSON.parse(myJSON);
$("#demo").html(myObj.name);
files needed:
Example manifest:
{
"manifest_version": 2,
"name": "Hello World!",
"description": "This extension shows a Hello World message!",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "window.html"
}
}
Example html file, window.html
<!DOCTYPE html>
<html>
<head>
<script src="background.js"></script>
</head>
<body>
<div>Hello World</div>
<div>This is a Chrome extension</div>
<div>And this is some html</div>
</body>
</html>
Javascript file, background.js
BEFORE CLASS: Windows users: Please install Windows Subsystem For Linux OR Cygwin. This will allow you to run Linux commands and browse the file system in your Terminal. Mac Users, you alreay have a Linux-like operating system and will be able to run Linux commands in the Terminal.
Make an extension for yourself. Follow the procedure to make an extension. It 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, 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. Upload your folder (please compress it first) and a screenshot of your extension in use.