mirror of
https://github.com/GoogleChrome/chrome-extensions-samples.git
synced 2026-03-26 13:19:49 +07:00
e7c398bf93
* Initial README.md file * fix design doc link * Update README.md adding scheib * Update README.md * test * update README.md with alvinjiooo * add a ascii fish in README.md * Update README.md * skeloton extension * Add original co2meter.html * add buttons to settings page * Initial storage module stub. * Add storage module reference from settings page. * Fix settings JS to be module compatible. * Add stubs for settings storage writing * Call saveCO2Value() from onInputReport in co2meter.html * background page to read CO2 periodically based on the stored interval * verion 1.0 /module/co2_meter.js * Refactor settings.html and hook up CO2 driver * update v2 of /module/co2_meter.js which access all methods from CO2Meter class * Fix co2_meter import in background.js * background page to show CO2 meter disconnected icon * v2.1 update /module/co2_meter.js add support for virtual meter and connection listener also rquestPermission * v2.1 update /module/co2_meter.js * Import idb-keyval indexedDB library into storage.js, with trivial usage. * background page handle disconnect connect device * update v2.2 /module/co2_meter.js make non-static and add guarding flag for exccessive reading * update v2.3 /module/co2_meter.js await device to close before open device in * update v2.4 /module/co2_meter.js change to return reject promise instead of Error in * Add third-party/idb-keyval, use to set/get interval. * Simplify settings and storage. * handle background page device disconnect/connect * Rename *_script.js files to only *.js. * Add temp reading * Add chart to popup.html with chartjs etc. * Update extension tool tip to show connected/disconnected status. * use indexedDB to store CO2 reading * Renaming items in background.js Name methods more clearly for what they are doing. Collapse some code when possible to be inline. * add in Storage * add support for storing temperature and query temperature in range * background page boardcasting reading updated * Refactor chart out of popup into chart.html for iframing * Continued: chart out of popup into chart.html for iframing * Use message channel for message broadcasting and move common constant to constant.js * Work in progress for data into chart. * Use set for clients in background page * Add promise to storage constructor. * Change IDB version number due to schema change * Populate chart data. * check store name before creating when version changed * increase popup window and iframe size * Update chart upon new data. * Add calibration period and refactor inputReport * Use flexbox to layout pages. * move internal and temperature unit into setting store * move dbInitialized into transaction oncomplete event * remove reading out interval and temp unit log * Remove co2meter.html * Add .map files for third party code to remove devtools warnings. * Display chart in Fahrenheit * remove idb-keyvalue * prettier storage.js and add comments to public methods * Chart style: time axis respects time of data, no data points * Show dialog on the chart when device is disconnected * Add Example Data Button * Close dialog button * Implement toggling between Celsius / Fahrenheit * polish co2_meter.js and remove virtual device and change default interval to 30 sec * Change small icon to CO2 text * change reading interval default to 30 secs which helps the chart update faster for fresh load case * Fix lint error * Clean up console.log * Add chrome.alarm example * remove keep alive for reading alarm * refactor to keep connection open * add README.md * strip down * addressed comments * add link to README.md --------- Co-authored-by: Vincent Scheib <scheib@users.noreply.github.com> Co-authored-by: Alvin Ji <111466895+alvinjiooo@users.noreply.github.com> Co-authored-by: Alvin Ji <alvinji@chromium.org> Co-authored-by: Alpaca Jam <alvinji@google.com>
3.1 KiB
3.1 KiB
Sample CO₂ Meter Chrome Extension
The extension uses WebHID to access a device for measuring the CO₂ level and temperature in your surroundings.
Testing the extension
- Follow the instructions to load an unpacked extension.
- Connect the CO₂ meter (currently it only supports the CO2Mini Indoor Air Quality Monitor from CO2Meter.com).
- Open the extension popup window and click “Settings” button to go to the settings page.
- Click the “Grant CO2 meter permission” button and grant the permission to the CO₂ meter.
Following the above steps, the device connection session to the CO₂ meter will be created when the extension is running. The input reports from the device will be processed and are visble from the popup window or settings page.
Design
- co2_meter.js: A CO2 meter device driver layer that uses WebHID to communicate with the device.
- co2-state-iframe.js: A module to be embedded in a regular page or popup window for showing the current CO2 meter status. It listens for events from the extension service worker, such as meter readings or availability, and renders the results.
- popup.js: For the extension popup window. It includes co2-state-iframe.js and a link to open main-page.js.
- main-page.js: The settings page for opening a popup to grant permission to the device. It includes co2-state-iframe.js as well.
- background.js: The script that runs on the extension service worker. This is the central piece of this extension, and it will:
- Initialize the CO2 meter for starting to generate reading input reports using co2_meter.js.
- Broadcast events (e.g., CO2 readings, CO2 availability) to registered clients (e.g., the popup window).
WebHID limitations in extension service workers
WebHID will be officially available to extension service workers in Chrome 115. Before M115, it can be enabled through the flag chrome://flags#enable-web-hid-on-extension-service-worker. However, there are limitations to the support for WebHID in extension service workers:
- Before M115 with flag enabled, if the service worker is idle for longer than 30 seconds it may be terminated, closing the device connection session. This limitation will be resolved in M115.
- Device connection events are not fired if the device is plugged or unplugged while the service worker is inactive. We have crbug.com/1446487 to track the resolution of this limitation. If your extension encounters issues because of this limitation, please leave a comment in the bug about your use case and how the limitation affects your extension.