Picket - Browser Extension

This project is a browser extension that allows unions to organize boycotts and define their demands, while guaranteeing union members can participate seamlessly. This is how it works:

1. Unions define their policies with a set of rules determining which websites break their goals. The unions can also organize timed boycotts (e.g. blocking a website for a given day).
2. Any netizen can browse through existing unions and decide which one best represent her.
3. The netizen then install this browser extension and feeds it the union policy file.
4. Every time she visits a website that is blocked, the extension will inform the website that a user from the given union has decided to boycott the website and she will not be using it today (she will see the union's message as to why). In case the website is not blocked, but still violates union rules, the netizen will see a warning banner as she browses.

To read more about izens.net and for a list of existing unions, visit our website.

Contributing

• Installing:
  • NPM dependencies: npm install
  • Git submodules (for shared CSS with the website only): git submodule init && git submodule update
• Building: npm run build
• Building in watch mode: npm run watch
• Running tests: npm run test
• Running tests in watch mode: npm run test-watch
• Running browser tests: npm run integration-test
• Updating the shared styles with the website (please commit the changes): git submodule update --remote
• Uploading the Chrome extension in developer mode, read through Chrome's Getting Started guide
• Running extension in Firefox (in watch mode): npm run firefox
• Submitting to Firefox: npm run build && zip -r picket.zip dist/*

Project Structure

This extension is composed of a few different components, all which run at different times of the extension lifecycle. To understand them a bit better, it might be useful to read through Chrome Extensions' Architecture Overview.

src
├── backgroundScript (runs in the background every time the user opens a page to
determine whether page should be blocked or acted upon)
│   ├── applyRules.js
│   ├── applyRules.spec.js
│   └── picket.js (entry file)
├── blockedPage (standalone page for when a page is blocked)
│   ├── blocked.css
│   ├── blocked.html
│   └── blocked.js
├── popup (popup for when user clicks on the extension)
│   ├── loadPolicy.js
│   ├── popup.css
│   └── popup.html
├── shared.css
└── warnBanner (content script that runs on every page loaded to determine whether to show the banner or not)
    └── addBanner.js