Semester New Tab Chrome Extension

Customized Chrome 'New Tab' Extension, which can be updated to reflect current links each semester

Extensions are small browser add-ons that add new and useful features to Chrome.

Links

• View this extension in the Chrome Web Store
• Check out the code
• Review the lessons on Canvas

Prerequisites

• Set up machine for development (Windows version)
• Install Node.js to run dev tools

SIGCSE 2018 Workshop

302: Chrome Home: Six Fun Activities Introducing Basic Web Programming Techniques

• Denise M. Case and Douglas Hawley
• Northwest Missouri State University
• Friday, February 23, 2018 7:00 pm - 10:00 pm, Room: 302

This workshop provided participants with several small, fun classroom activities culminating in a useful web-based application that allows individuals to customize the page resulting from opening a new tab in Google Chrome. Attendees participated in and practiced Canvas lessons introducing popular web-based techniques including HTML, JSON, Cascading Style Sheets, JavaScript and Google Chrome extension creation and distribution. The workshop included six short lessons in which we:

1. download and install the free software required
2. introduce basic concepts in HTML
3. create and link cascading style sheets (CSS)
4. construct a JavaScript file implementing some basic logic constructs into our web page
5. create a JSON manifest file to enable our app to serve as a Chrome extension
6. make the extension available in the chrome web store (if desired, small cost)

Participants will create a “New Tab” extension for their school that can be customized and shared.

References & Links

• Bing Image URL
• Stack Overflow Question
• Clock
• Favicon Generator

Start Editing

• Go to https://github.com/denisecase/chrome_new_tab_ext.
• Fork the repository into your account in the cloud.
• Clone your repo down to your local machine.
• Right-click in your new "chrome_new_tab_ext" folder and select "Open With Code"

Run Development Tasks

Open PowerShell here as Admin to:

1. Install dependencies
2. Format code files with Prettier (and fix any issues manually)
3. Find (and fix JavaScript) with ESLint (and fix any issues manually)

npm install
npm run prettier
npm run eslint