Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Create 3rd activity in extension building series #14

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Create 3rd activity in extension building series #14

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
243 changes: 243 additions & 0 deletions createandpublish
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,243 @@
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Build Your First Extension for Firefox</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="An activity for building an extension for Firefox and beyond">
<meta name="author" content="Mozilla Campus Clubs">
<link rel="shortcut icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<!-- Global CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">

<!-- github calendar css -->
<link rel="stylesheet" href="assets/plugins/github-calendar/dist/github-calendar.css">
<!-- github acitivity css -->
<link rel="stylesheet" href="assets/plugins/github-activity/src/github-activity.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/octicons/2.0.2/octicons.min.css">

<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Google Tag Manager -->
<script type="text/javascript" src="assets/plugins/dnt-helper.js"></script>
<script type="text/javascript" src="assets/js/gtm.js"></script>

</head>

<body>
<!-- ******HEADER****** -->
<header class="header">
<div class="container">
<img class="profile-image img-responsive pull-left" src="assets/images/profile.png" />
<div class="profile-content pull-left">
<h1 class="name">Build Your First Extension for Firefox and beyond</h1>
<h2 class="desc">Third meeting - Creating and Publishing Your Extension</h2>
</div><!--//profile-->
</div><!--//container-->
</header><!--//header-->

<div class="container sections-wrapper">
<div class="row">
<div class="primary col-md-8 col-sm-12 col-xs-12">
<section class="about section">
<div class="section-inner">
<h2 class="heading">Introduction</h2>
<div class="content">
<p>This is the third activity for building an extension for Firefox. Do you want to start from the beginning? <a href="https://mozillacampusclubs.github.io/teach-how-to-build-addons/">Check out the first activity</a> which will introduce you to browser extensions and idea generation.</p>
<p>In this meeting/activity, participants will create and test their own browser extension using WebExtensions APIs, and publish their extension on <a href="https://addons.mozilla.org">addons.mozilla.org</a>. </p>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->

<section class="latest section">
<div class="section-inner">
<h2 class="heading">Getting ready</h2>
<div class="content">

<div class="item featured text-center">
<div class="featured-image">
<img class="img-responsive project-image" src="assets/images/paperprototype.png" alt="project name" />
</a>
<div class="desc text-left">

<h4 class="title">Share a slide presentation</h4>
<p>Use the following slide deck as is, or customize it to make it your own. Going through this will teach you everything you need to lead this activity with your club.</p>
<p>After you customize the slidedeck, use it during your Club's meeting to help members create and publish their extensions .</p>
<a class="btn btn-cta-secondary fork" href="http://bit.ly/2vCsdCo" target="_blank">Create and Submit Your Extension slidedeck</a>

</div><!--//desc-->
</div><!--//item-->

</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->

<section class="projects section">
<div class="section-inner">
<h2 class="heading">Build Your Extension</h2>
<div class="content">
<div class="item">
<p>At the last meeting, you prototyped an idea for a browser extension.</p>
<p>Now, it's time to build and test your extension. We recommend the following resources for help with extension development:</p>
<ul>
<li><a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions"> Browser extension documentation on MDN web docs</a></li>
<li><a href="https://discourse.mozilla.org/c/add-ons/development"> Extension development forum on Discourse</a></li>
<li><a href="https://client00.chat.mibbit.com/?server=irc.mozilla.org" Join the channels ``#extdev` or ``#webextensions` on `irc.mozilla.org`</a></li>
<li>Email the <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> or check the <a href="https://mail.mozilla.org/pipermail/dev-addons/">visit the dev-addons archives</a></li>
<li>Ask the community on Telegram at <a href="https://t.me/addonschat">@addonschat</a>
</ul>

</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->

<section class="experience section">
<div class="section-inner">
<h2 class="heading">Test Your Extension'</h2>
<div class="content">
<div class="item">
<p>Once you have built your extension, you can test it on Firefox using these steps:</p>
<ul>
<li>Navigate to `about:debugging`</li>
<li>Check `Add-on debugging`</li>
<li>Click `Load Temporary Add-on`</li>
<li>Select your extension's file</li>
<li>Close `about:debugging` and browse the web to see how your extension works!</li>
</ul>
</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->


<section class="experience section">
<div class="section-inner">
<h2 class="heading">Submit Your Extension to addons.mozilla.org</h2>
<div class="content">
<div class="item">
<p>Congratulations on building and testing your add-on! If you would like others to use it, you can <a href="https://developer.mozilla.org/en-US/Add-ons/Distribution>"sign and submit</a> it to <a href="https://addons.mozilla.org">addons.mozilla.org (AMO)</a> and other browser extension stores.</p>
<p>To submit your extension to AMO, follow these steps:</p>
<ul>
<li>Zip up your extension's files</li>
<li>Create an account on <a href="https://addons.mozilla.org">AMO</a></li>
<li>Upload your zipped files to AMO</li>
<li>Tag your submission #campusfox`
<li>Fix any review issues</li>
</ul>
<p> For more information about submitting your extension to AMO, see this tutorial on <a href="https://developer.mozilla.org/en-US/Add-ons/Distribution/Submitting_an_add-on">MDN web docs</a>.</p>

<p>If you would like to take advantage of the WebExtension API's compatibility across browsers, upload your extension to <a href="https://developer.chrome.com/webstore/publish">Chrome</a>, <a href="https://addons.opera.com/extensions/">Opera</a>, or <a href="https://docs.microsoft.com/microsoft-edge/">Edge</a>".</p>

</div><!--//item-->
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->

<div class="secondary col-md-4 col-sm-12 col-xs-12">

<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">What you will learn</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<p><i class="fa fa-quote-left"></i>NEED A GOOD QUOTE HERE</p>
</blockquote>
<p class="source"><span class="name">PERSON</span><br /><span class="title">PERSON'S TITLE</span></p>
</div><!--//item-->

</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="skills aside section">
<div class="section-inner">
<h2 class="heading">Skills </h2>
<div class="content">
<p class="intro">
Skills and time required for running this activity
<div class="skillset">

<div class="item">
<h3 class="level-title">HTML<span class="level-label" data-toggle="tooltip" data-placement="left" data-animation="true" >Expert</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="10%">
</div>
</div><!--//level-bar-->
</div><!--//item-->

<div class="item">
<h3 class="level-title">Javascript <span class="level-label">Expert</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="10%">
</div>
</div><!--//level-bar-->
</div><!--//item-->

<div class="item">
<h3 class="level-title">Time<span class="level-label">90 minutes</span></h3>
<div class="level-bar">
<div class="level-bar-inner" data-level="10%">
</div>
</div><!--//level-bar-->
</div><!--//item-->

<div class="item">
<h2 class="heading">Requirements & Resources</h2>
<ul>
<li><a href="http://bit.ly/2vCsdCo">Facilitator's slidedeck</a></li>
<li>A projector</li>
<li>Laptops (1 per group)</li>
<li>Your favorite text editor</li>
<li>Access to the internet</li>
</ul>
</div><!--//item-->
</div>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->


</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->

<!-- ******FOOTER****** -->
<footer class="footer">
<div class="container text-center">
<!--/* This template is released under the Creative Commons Attribution 3.0 License. Please keep the attribution link below when using for your own project. Thank you for your support. :) If you'd like to use the template without the attribution, you can check out other license options via our website: themes.3rdwavemedia.com */-->
<small class="copyright">Designed with <i class="fa fa-heart"></i> by <a href="campus.mozilla.community" target="_blank">Mozilla Campus Clubs</a> for all University Students</small>
</div><!--//container-->
</footer><!--//footer-->

<!-- Javascript -->
<script type="text/javascript" src="assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-rss/dist/jquery.rss.min.js"></script>
<!-- github calendar plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.0.2/es6-promise.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fetch/0.10.1/fetch.min.js"></script>
<script type="text/javascript" src="assets/plugins/github-calendar/dist/github-calendar.min.js"></script>
<!-- github activity plugin -->
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mustache.js/0.7.2/mustache.min.js"></script>
<script type="text/javascript" src="assets/plugins/github-activity/src/github-activity.js"></script>
<!-- custom js -->
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>