• Stars
    star
    142
  • Rank 258,495 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 5 years ago
  • Updated 4 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Privacy browser extension for opting out from web tracking via GPC

GitHub release (latest by date) GitHub Release Date GitHub last commit GitHub Actions GitHub issues GitHub closed issues GitHub GitHub watchers GitHub Repo stars GitHub forks GitHub sponsors


OptMeowt logo

OptMeowt ๐Ÿพ

OptMeowt ("Opt Me Out") is a browser extension for opting you out from web tracking. OptMeowt works by sending Global Privacy Control (GPC) signals to visited websites per the GPC spec that we are developing at the W3C and placing opt out cookies.

Firefox Add Ons badge Chrome Web Store badge

OptMeowt is developed and maintained by Oliver Wang (@OliverWang13), Sophie Eng (@sophieeng), Kate Hausladen (@katehausladen), Matt May (@Mattm27), Francisca Wijaya (@franciscawijaya), and Sebastian Zimmeck (@SebastianZimmeck) of the privacy-tech-lab. Jocelyn Wang (@Jocelyn0830), Kuba Alicki (@kalicki1), Stanley Markman (@stanleymarkman), Kiryl Beliauski (@kbeliauski), Daniel Knopf (@dknopf), and Abdallah Salia (@asalia-1) contributed earlier. Learn more here.

1. Research Publications
2. Promo Video
3. How Does OptMeowt Work?
4. Installing OptMeowt from Source
5. Installing OptMeowt for Developers
6. Installing the OptMeowt PETS 2023 Version
7. Testing
8. OptMeowt's Permission Use
9. OptMeowt's Architecture
10. Directories in this Repo
11. Third Party Libraries
12. Developer Guide
13. Thank You!

1. Research Publications

2. Promo Video

Watch the Video

3. How Does OptMeowt Work?

OptMeowt sends Do Not Sell signals to websites when you browse the web. Such signals must be respected for California consumers per the California Consumer Privacy Act (CCPA), Regs Section 999.315(d). Some companies also respect them when they are sent from outside of California. OptMeowt also places opt out cookies.

In detail, OptMeowt uses the following methods to opt you out:

  1. The GPC header and JS property.
  2. The DNT header.
  3. First party cookies of ad networks participating in the IAB CCPA Compliance Framework for Publishers & Technology Companies.
  4. Third party cookies of ad networks participating in the DAA's CCPA Opt Out Tool for the Web.

Customizing which sites receive Do Not Sell signals: For every site you visit OptMeowt will automatically add its domain to the domain list. Each newly added domain will receive Do Not Sell signals by default. However, you can exclude domains that should not receive Do Not Sell signals. This functionality is available on OptMeowt's settings page, which you can access from OptMeowt's popup window.

Opting Out of the Topics API: Google is phasing out the use of third-party cookies, and replacing them with the Topics API. The Topics API will identify users' general areas of interest which can be used for personalized advertising. These topics are generated through observing and recording a user's browser activity. To opt you out of the Topics API, a header is placed called Permissions-Policy on all the sites you browse. This is following Google's documentation of how to opt a site out of the Topics API. Please keep in mind this functionality is only available for Chrome browsers.

For a more in-depth look at how OptMeowt works, check out our beginner developer's guide.

4. Installing OptMeowt from Source

  1. Clone this repo locally or download a zipped copy and unzip it.
  2. Install npm.
  3. From within your local /gpc-optmeowt/ directory install OptMeowt's dependencies with npm ci.
  4. Build the project by running npm run build, which will create a built for both Chrome and Firefox in .../gpc-optmeowt/dist/chrome/ and .../gpc-optmeowt/dist/firefox/, respectively. npm run build will also create packaged versions of OptMeowt in .../gpc-optmeowt/packages for distribution on the Chrome Web Store and on Firefox Add-Ons.

Chrome

  1. In Chrome, navigate to the extensions page at chrome://extensions/.
  2. Enable Developer mode with the slider on the top right corner of the extension page.
  3. Click the Load unpacked button in the top left of the page.
  4. Select the directory where you built OptMeowt, by default /gpc-optmeowt/dist/chrome/ (the directory that contains the `manifest.json``).

Firefox

  1. In Firefox, navigate to the addons page with developer privileges at about:debugging#/runtime/this-firefox.
  2. Under Temporary extensions, click Load Temporary Add-on...
  3. Select the manifest from the directory where you built OptMeowt, by default /gpc-optmeowt/dist/firefox/manifest.json/.

Note: OptMeowt is in active development and new features are frequently added, some of which may cause errors. You can always get the stable release version on the Chrome Web Store and on Firefox Add-Ons.

5. Installing OptMeowt for Developers

To build the development versions of OptMeowt follow the directions above but replace npm run build with npm run start. This command will run the npm script (referenced in package.json) that will call Webpack in development mode (Webpack settings in webpack.config.js). npm run start will also initiate Webpack servers for both the Firefox and Chrome versions, which will listen for changes as you work and rebuild as necessary.

Webpack and file structure notes:

Webpack will build the development versions of OptMeowt into the dev subdirectory instead of the dist subdirectory. The subdirectories for Chrome and Firefox are dev/chrome and dev/firefox, respectively.

Also, when you build for development, the development manifest (in src/manifest-dev.json) will be used instead of the distribution manifest (in src/manifest-dist.json). The development manifest contains an unsafe eval that we use for our source maps during development. The distribution manifest does not contain this eval. Webpack will select the correct manifest depending on whether you build for development or distribution.

To include new dependencies you can run npm install instead of npm ci. npm install will include new dependencies in the package-lock.json, which is generated from the package.json.

For Windows Users:

Note that we have built most of our codebase in MacOS, so path variables and similar code may cause the build to break in other OSs, in particular Windows. We recommend installing a Linux OS if you will be working with the codebase in any significant manner.

Optional:

We also like to use Debugger for Firefox from within VSCode when in development to help automate loading the built extension package. The default behavior is F5 to launch and load the extension in browser. There is a similar extension for Chrome, Debugger for Chrome. Make sure to follow the online documentation on writing the correct .vscode/launch.json file, or other necessary settings files, in order to properly load OptMeowt with the debugger.

6. Installing the OptMeowt PETS 2023 Version

The version of OptMeowt used in our PoPETs 2023 submission, "Usability and Enforceability of Global Privacy Control", can be found in our v3.0.0-paper release. To view the v3.0.0-paper code, you can look at the repo here. Instructions for building the extension locally is the same as stated above, as seen in our Firefox instructions. To activate Analysis mode in v3.0.0-paper, press the Protection Mode label in the popup. In addition, Analysis mode requires other privacy extensions or browsers to be disabled. For further detailed information on how to use analysis mode, please refer to our methodology.

Analysis mode used to be incorporated with the OptMeowt extension but can now be found in a separate repo, specialized for crawling the internet while using analysis mode.

7. Testing

OptMeowt uses the Mocha framework and Puppeteer to execute its testing and continuous integration. The continuous integration is built into the OptMeowt repo with Github Actions. The Actions tab shows all workflows and past unit test checks for previous PRs.

The test responsible for checking OptMeowtโ€™s ability to set the GPC signal can not be run with GitHub Actions and can only be run locally when running npm test. Using Puppeteer, this will launch an automated headful browser on Chromium, testing the Chrome GPC signal against the GPC reference server.

Running Automated Unit Tests

Locally: You can run unit tests locally.

  1. Clone this repo locally or download a zipped copy and unzip it.
  2. Make sure npm is up to date by running npm -v to check the version and updating follow the instructions here, depending on the operating system.
  3. Run tests with npm test. If Puppeteer is uninstalled, run npm install.

Continuous Integration: The continuous integration is built into the OptMeowt repo, therefore no changes to the extension environment are needed to run new tests.

Manual UI testing

The following procedure is for testing the OptMeowt extension UI, which cannot be automated. They are recommended to be performed manually as follows:

  1. Download the version of the extension you want to test through npm run start and then download the unpacked dev version for your browser.
  2. Navigate to a site with the well-known file, like "https://global-privacy-control.glitch.me/"
  3. Click on the OptMeowt symbol in the top right of your browser.
    • TEST 1: The symbol for the cat should be solid green.
    • TEST 2: The URL of the website should be written under the "Protection Mode" banner.
    • TEST 3: Do Not Sell should be enabled.
    • TEST 4: There should be a blue number detailing the number of domains receiving signals.
  4. Click on the drop down for "3rd Party Domains".
    • TEST 5: There should be sites that show up with Do Not Sell Enabled switched on.
  5. Navigate out of the "3rd Party Domains" drop down and click on the "Website Response" drop down
    • TEST 6: There should be text showing that GPC Signals were accepted.
    • TEST 7: Switch "Dark Mode" on and off and ensure the popup is correctly changing colors.
  6. Navigate to the top of the popup and click on the "More" symbol (image: Sliders) to go to the Settings page.
  7. In the main settings page, click on "Disable" and open the popup.
    • TEST 8: The popup should be fully grayed out and showing the popup disabled.
  8. In the website, move to the Domainlist page.
    • TEST 9: There should be multiple domains showing in the Domainlist tab.
  9. Go back to the main settings page and export Domainlist.
    • TEST 10: Check the exported Domainlist and the Domainlist in the settings page to make sure the websites match up.

Creating a New Test

  1. Navigate to โ€˜.../gpc-optmeowt/test/โ€™. Then navigate to the folder in the test directory that corresponds to the tested functionโ€™s location in the extension source code.
  2. Create a new file in the matching folder. Name the file with the format FUNCTION_NAME.test.js. For example, if testing a function named sum located in the folder .../src/math, create the test called sum.test.js in the folder .../test/math
  3. Write test using ECMAScript formatting.

8. OptMeowt's Permission Use

Note: We do not collect any data from you. Third parties will also not receive your data. The permissions OptMeowt is using are required for opting you out. To that end, OptMeowt uses the following permissions:

"permissions": [
    "declarativeNetRequest",
    "webRequest",
    "webNavigation",
    "storage",
    "activeTab",
    "cookies",
    "tabs",
    "scripting"
  ]
  • declarativeNetRequest: Allows OptMeowt to modify rules, allowing us to send the GPC header
  • webRequest: Pauses outgoing HTTP requests to append opt out headers
  • webNavigation: Similar to webRequest, allows OptMeowt to check when navigation requests are made to reset processes
  • storage: Allows OptMeowt to save your opt out preferences in your browser
  • activeTab: Allows OptMeowt to set opt out signals on your active browser tab
  • cookies: Allows OptMeowt to place opt out cookies in your browser
  • tabs: Allows OptMeowt to keep track of HTTP headers per tab to show you the opt out status of the current site in a popup
  • scripting: Allows OptMeowt to declare content scripts and send the GPC DOM signal

9. OptMeowt's Architecture

Detailed information on OptMeowt's architecture is available in a separate readme. Please note that the architecture readme is current as of its commit date. We try to update it as soon as possible after any architectural changes. However, it may lag behind.

10. Directories in this Repo

  • src/: Main contents of the OptMeowt browser extension.
  • src/assets: Graphical elements of the extension, including logos and button images.
  • src/background: Listeners for events and logic for placing cookies.
  • src/data: Definitions of headers, cookies, and privacy flags.
  • src/options: UI elements and scripts for the supplemental options page.
  • src/popup: UI elements and scripts for the popup inside the extensions bar.
  • src/theme: Dark and light mode themes.
  • ui-mockup: Contains PDF and XD files demonstrating the preliminary mockup of OptMeowt.

11. Third Party Libraries

OptMeowt uses various third party libraries. We thank the developers.

12. Developer Guide

Contributing

  • If you want to contribute, note that we manage all library dependencies with npm. Thus, it is recommended to use npm i to install libraries.
  • If you have questions about OptMeowt's functionality or have found a bug, please check out our FAQ \ Known quirks page on the Wiki first. If you cannot find what you are looking for, feel free to open an issue, and we will address it.
  • Note: When viewing your browser's console on a site, a 404 error regarding the domain's GPC status file (/.well-known/gpc.json) may be shown. Note that this is normal and will occur (1) on domains that do not support GPC and (2) on domains that support GPC but do not host a /.well-known/gpc.json file.

13. Thank You!

We would like to thank our financial supporters!


Major financial support provided by the National Science Foundation.

National Science Foundation Logo

Additional financial support provided by the Alfred P. Sloan Foundation, Wesleyan University, and the Anil Fernando Endowment.

Sloan Foundation Logo Wesleyan University Logo

BuiltWith provided us with a free Pro account.

Conclusions reached or positions taken are our own and not necessarily those of our financial supporters, its trustees, officers, or staff.

privacy-tech-lab logo