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.
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:
- download and install the free software required
- introduce basic concepts in HTML
- create and link cascading style sheets (CSS)
- construct a JavaScript file implementing some basic logic constructs into our web page
- create a JSON manifest file to enable our app to serve as a Chrome extension
- 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.
- 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"
Open PowerShell here as Admin to:
- Install dependencies
- Format code files with Prettier (and fix any issues manually)
- Find (and fix JavaScript) with ESLint (and fix any issues manually)
npm install
npm run prettier
npm run eslint