Background
In T373983 we designed a popup window for the Web Experiments Browser Extension that seeks to inform users of the terms of service for this extension and satisfies legal requirements around this extension.
In general, a popup window in an browser extension that appears when clicking on the extension icon. Chrome Popup documentation.
User story
As an extension user, I want to be able to open the extension to understand how it's changing my user experience.
Requirements
Visual Design
- Design should work in light and dark-mode
- Design should utilize standard Codex components
- Design should include the following links
- link to privacy policy
- Links to project pages for currently running experiments
- Links to past experiments
| Initial screen - when users haven't agreed to terms of service |
 |
| Success screen - non-wiki - IF user AGREES to ToS, button link to Wikipedia + list of current experiments |
 |
| Success screen - wiki - IF user AGREES to ToS AND current tab is Wikipedia, list current experiments |
 |
| Decline screen - IF user DISAGREES to ToS, ask them to uninstall |
 |
Workflow
- When user has installed browser extension
- Set terms of service to false
- Programmatically open initial screen
- If a user agrees to ToS
- and they're on Wikipedia, show them a popup with a button to visit Wikipedia
- and they're not on Wikipedia, show them a popup with experiment information
- If a user disagrees to ToS
- Show them a popup stating we can't show them experiments, ask them to reconsider.
- If a user dismisses ToS popup
- Remind them by programmatically opening it 3 times
Technical notes
State
As illustrated in the diagram above, the behaviour contains a few stateful and stateless parameters.
- ToS agreement - stateful - This requires using the chrome.storage() API to add a new key value pair that will persist as long as the extension is installed.
- Reminder - stateful - As above, this will require adding a counter to Chrome storage to track that we've reminded the user to agree to the ToS when they're on Wikipedia 3 times.
- Current page - stateless - This requires the activeTab permission as well as the chrome.tabs() API to get the current tab
Behaviour
As of Chrome 127, we can programmatically open the popup via the openPopup() method.
Architecture
The behaviour outlined in the diagram can fit into an MVC architecture
- Model: the ToS and counter storage, as well as background script that contains a window.PostMessage handler to send & modify the values
- Controller: A background script that retrieves the storage & current tab values and programmatically display the popup based on those values & increment counter.
- View: An HTML pages with dynamically rendered content based on state. The page will need a call to window.postMessage to set the ToS option.