Browser Add-on Activity

Note1: students work in groups of 3. The instructions indicate which parts of this activity should be performed by all team-members and which should be performed by one team member.

Note2: students do not need to be familiar with Javascript in order to complete this activity

Note3: this activity can be completed either using Firefox or Chrome, but all group members should be working with the extension for the same browser

Prerequisites:

• Firefox/Chrome should be installed on your system (make sure that all team members agree on the same browser)
• you should have Git installed on your system if it is not there already,
  (For download and install instructions and for a list of available graphical interfaces see the git-scm.com site.)

• you should have Git configured on your system to know who you are,
  If you do not, run the following commands from the command line:
  

  git config --global user.email "YOUR_EMAIL"
  git config --global user.name "YOUR NAME"
  

  (The email should be the same email you used to register your GitHub account. Your name should be your name or nickname - just make sure that it is proper and recognizable since it will be associated with all of your commits. It can be your GitHub username. )
  For example,
  

  git config --global user.email "joannakl@cs.nyu.edu"
  git config --global user.name "JoannaKl"```<br>
  

Firefox Add-on

The Mozilla Developers Network has a tutorial on Browser Extensions that you will be using during this activity.

Part 1a: Creating and installing your very first Firefox extension

• locate the Your first extension link under the Getting Started Section in the Browser Extensions tutorial
• each student should follow the steps to create this very simple extension (feel free to modify the color and/or the domain)
• once finished, help out your other team members

When you are all done, let the facilitator know.

Part 1b: Creating and installing a more sophisticated extension

• locate the Your second extension link under the Getting Started Section in the Browser Extensions tutorial
• each student should follow the steps to create this very simple extension (feel free to modify the images used)
• once finished, help out your other team members

When you are all done, let the facilitator know.

Part 2: Repository exploration

When you were working on the previous part, you should have encountered references to the MDN WebExtension repository. Go to that repository and locate the following files: LICENSE, README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md. Answer the questions below as a team. Your answers should be placed under heading Part 2 in a file called team_NUMBER.md (where NUMBER is replaced by your team number) in the repository called add-on-activity in the course organization.

1. What is the purpose of the README.md file? What kind of information should be included there?
2. What is the purpose of the LICENSE file? Does it need to be in a repository?
3. What is the purpose of the CONTRIBUTING.md file?
4. Describe one type of contribution to this repository that does not require writing any code.
5. What is the purpose of the CODE_OF_CONDUCT.md document?
6. Describe three types of behaviors that violate the Mozilla Community Participation Guidelines.
7. If a person working with the content of this repository runs into problems or has questions, what can they do?

When your group is done, let the facilitator know.

Part 3: Explore existing extensions

Go to Firefox Add-ons page. As a team, decide on your favorite extension. List the name and the link to that extension in your team's file in the add-on-activity repository under the heading Part 3. Then answer the following questions about your chosen extension.

1. What is the homepage for the extension?
2. What is the license under which the extension is distributed?
3. Can you find a code repository for this extension?
4. Is the extension that you picked an open source project?
5. Can you find information about how many different users contribute to this project? If so, specify how many.

When your group is done, let the facilitator know.

Part 4: Create your own

As a team, create an idea for an extension. It can be a very simple one, or a more complicated one (this idea can evolve/change after today, so do not worry about having everything finalized).

• Create a repository in the class organization with the name of your extension. In your team's file for add-on-activity provide a link to that repository under heading Part 4.
• Create a README.md file with a description of the idea for your extension.
• Create other files that will make this an open soure project.

When your group is done, let the facilitator know.

Chrome Add-on

The Chrome for Developers has resources for developers who want to build Browser Extensions that you will be using during this activity.

Part 1: Creating and installing your very first Firefox extension

• scroll down to the Documentation section and select the Get started document (you can go back to the main page and study the other materials at a later time, if you wish)
• locate the Your first extension link under the Tutorials section
• each student should follow the steps to create this very simple extension (do not use the option of downloading all the code from the github repository, create all the files manually, so that you know the steps)
• go through the steps of modifying and breaking the extension, so you are familiar with all the tools
• once finished, help out your other team members, do not move to the next part until everyone in your team is done

When you are all done, let the facilitator know.

Part 2: Repository exploration

When you were working on the previous part, you should have encountered references to the Chrome Extensions samples repository. Go to that repository and locate the following files: LICENSE, README.md, CONTRIBUTING.md, and CODE_OF_CONDUCT.md. If one of those documents is missing, try to figure out if it is named differently or stored somewhere othat that the top level of the repository. Answer the questions below as a team. Your answers should be placed under heading Part 2 in a file called team_NUMBER.md (where NUMBER is replaced by your team number) in the repository called add-on-activity in the course organization.

1. What is the purpose of the README.md file? What kind of information should be included there?
2. What is the purpose of the LICENSE file? Does it need to be in a repository?
3. What is the purpose of the CONTRIBUTING.md file?
4. Describe one type of contribution to this repository that does not require writing any code.
5. What is the purpose of the CODE_OF_CONDUCT.md document? If it is missing, did not find an equivalent somewhere else?
6. What does one need to do before starting to contribute to this repository?

When your group is done, let the facilitator know.

Part 3: Explore existing extensions

Go to Chrome Webstore, Extensions page. As a team, decide on your favorite extension. List the name and the link to that extension in your team's file in the add-on-activity repository under the heading Part 3. Then answer the following questions about your chosen extension.

1. What is the homepage for the extension?
2. Is this extension open source? If so, complete the remaining steps using your chosen extension. if not, go to the following page: 6 Open-Source Google Chrome Extensions that are just Awesome, pick a different extension and list its name in addition to your favorite one in the answer to the previous question.
3. What is the license under which the extension is distributed?
4. Can you find a code repository for this extension?
5. Can you find information about how many different users contribute to this project? If so, specify how many.

When your group is done, let the facilitator know.

Part 4: Create your own

As a team, create an idea for an extension. It can be a very simple one, or a more complicated one (this idea can evolve/change after today, so do not worry about having everything finalized).

• Create a repository in the class organization with the name of your extension. In your team's file for add-on-activity provide a link to that repository under heading Part 4.
• Create a README.md file with a description of the idea for your extension.
• Create other files that will make this an open source project.

When your group is done, let the facilitator know.

Learning more about extensions

• use other tutorials at Browser Extensions to learn more about building extensions for Chrome.