mozilla / price-tracker

Price Tracker is a Firefox extension that spots price drops on things you’re interested in.

Price Tracker

Price Tracker is a Firefox extension that tracks price changes to help you find the best time to buy.

IMPORTANT: Price Tracker is no longer under active development. Official support for Price Tracker ended on September 30, 2019.

Data Collection

See METRICS.md.

Developer Setup

Prerequisites:

• A recent version of Node.js and NPM

1. Clone the repository:

   git clone https://github.com/mozilla/price-tracker.git
   cd price-tracker

2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

4. Run the built extension in a test browser:

   npm start

Note: This will install the extension as an unsigned WebExtension Experiment.

• Unsigned WebExtension Experiments can only be run in Nightly and DevEdition with boolean about:config preferences xpinstall.signatures.required set to false and extensions.legacy.enabled set to true.
• To test an unsigned WebExtension Experiment in Firefox Beta or Release, an unbranded build must be used.

Scripts

Command	Description
npm start	Launch Firefox with the extension temporarily installed
npm run lint	Run linting checks
npm run build	Compile source files with Webpack using a development configuration
npm run build:prod	Compile source files with Webpack using a production configuration
npm run watch	Watch for changes and rebuild with Webpack using a development configuration
npm run watch:prod	Watch for changes and rebuild with Webpack using a production configuration
npm run package	Package the extension into an XPI file
pipenv run test	Run test suite (See "Running Tests" for setup)

Data Storage

Global state for the add-on is managed via Redux. Any time the data is changed, it is persisted to the add-on local storage.

Reducers, action creators, etc. are organized into ducks inside the src/state directory.

Testing

Fake Product Test Page

A fake product page is available for testing the add-on. The price on the page changes upon refresh, and URL parameters can be used to manually set the price.

See the github repo for more details.

Running Tests

Automated tests are run in a Firefox browser instance using Marionette. We use the Python client for Marionette since there is no up-to-date JavaScript client.

To set up your environment for running the tests, you must have:

• A Firefox binary. On MacOS, this can be found within the .app folder at Firefox.app/Contents/MacOS/firefox.
• Python 2.7
• Pipenv

With these installed, you can set up the test suite:

1. Install Python dependencies:

   pipenv install

2. Save the path to your Firefox binary with npm:

   npm config set price-tracker:firefox_bin <PATH_TO_FIREFOX_BINARY>

After this, you can run pipenv run test to run the automated test suite.

Preferences

The following preferences can be set to customize the extension's behavior for testing purposes. Some convenient testing values can be found in web-ext-config.js, and will be used by default with npm start.

[email protected]

(string) List of domains ({Array.string} or *) that extraction is performed on. Can be set to * to enable extraction on all sites.

[email protected]

(integer) Time to wait between price checks for a product in milliseconds.

[e-mail]l

(integer) Time to wait between checking if we should fetch new prices in milliseconds.

[email protected]

(integer) Delay before removing iframes created during price checks in milliseconds.

[email protected]

(integer) The percentage drop in price on which to trigger a price alert compared to the last high price (See price_last_high in [METRICS.md](./docs/METRICS.md)).

[email protected]

(integer) The absolute drop in price on which to trigger a price alert compared to the last high price (see `price_last_high` in [METRICS.md](./docs/METRICS.md)) in currency subunits (e.g. cents for USD).

Releasing a New Version

Price Tracker bumps the major version number for every release, similar to Firefox. Releases are created by tagging a commit that bumps the version number and pushing that tag to the repo. This triggers CircleCI automation that packages, tests, signs and uploads the new version to the Test Pilot S3 bucket.

It is strongly recommended that developers creating releases configure Git to sign their commits and tags.

To create a new release of Price Tracker:

1. Increment the version number in package.json, create a new commit on the master branch with this change, and create a new git tag pointing to the commit with a name of the form v1.0.0, where 1.0.0 is the new version number.

   npm ships with a command that can perform these steps for you automatically:

   npm version major

2. Push the updated master branch and the new tag to the remote for the Mozilla Price Tracker repository (named origin in the example below):

   git push origin master
   git push origin v1.0.0

You can follow along with the build and upload progress for the new release on the CircleCI dashboard. Once the build finishes, a signed copy of the new version will be available in the dashboard under Artifacts. The following upload job, however, is gated on a hold job.

This hold job is intended to provide developers and QA an opportunity for final testing and review of the extension in release channels before uploading. When QA is satisfied, a developer with push access must manually trigger the upload to Test Pilot via the CircleCI dashboard by clicking the hold job and approving the build.

Once the upload is complete, the new version should be available immediately at https://testpilot.firefox.com/files/[email protected]/latest.

License

The Commerce WebExtension is licensed under the MPL v2.0. See LICENSE for details.

price-tracker's Issues

Investigate animated SVG toolbar icons

We want to confirm whether animated SVGs can be used as browser action / page action icons.

@sevaan Can you create a test icon with some animation to it? Doesn't need to be fancy or anything, just need something visual that we can test with. I'm having trouble finding something online.

Browser action empty listing

User Story: I want Firefox to help me keep track of products that I’m not ready to buy, but might if the price is right

• When the browser action popup is opened and there are no saved products that the user is tracking, display a static message explaining how to track a product.

Enumerate APIs/dataflows to achieve Sevaan's mocks

Of particular interest is the extensible pill-shaped pageAction button -- this is not a capability in the existing WebExtensions APIs.

Source

Make an onboarding page/sequence for the sidebar on first run

Per the MDN docs (and experientially),

When an extension that defines a sidebar is first installed, its sidebar will be opened automatically. This is intended to help the user understand that the extension includes a sidebar.

We should consider what the first run experience for the user might be, given this default behavior and build it out.

Trigger price notifications

User Story: I want Fx to notify me immediately when the price on one of my watched products drops

• When the magic price alert algorithm decides that the user should be alerted to a price drop, mark the product as having an active price alert.
• When a product gets a price alert, show a system notification that the price has dropped.
  • Option to dismiss alert
  • Option to go to product page
• Displays the difference of “last price - current price” as a gross or % Price drop
• Following the system notification should dismiss the price alert flag

Deleting tracked products via the browser action

User Story: I want to remove a product from my list of tracked products because I no longer care or already bought it.

• User can manually unsubscribe through a UI element in the browser action panel.
• User sees undo dialog.
• Once the panel closes, the product is removed from the saved products list.

Improve price extraction flexibility

Edit [bdanforth]: See also #79 (duplicate) for more information; particularly this comment.

Prices are currently extracted from pages by identifying the DOM node containing the price and parsing its innerText value as a string. However, some sites (notably, Home Depot) store prices in a way that doesn't produce an innerText value shaped the way we need it to be.

First, we should define the acceptance criteria for price parsing. Then, we should improve our existing parsing to match those criteria.

Modify framing headers when extracting prices in background

The background script uses iframes to load pages that it is extracting prices from, but these pages may use the X-Frame-Options header to prevent framing, which breaks price updates.

To get around this, we'll need to use the webRequest to recognize page loads from these iframes (maybe by using a custom hash in the URL?) and to rewrite any incoming framing headers to allow for framing.

Webpack `trainees.js` with a separate config file.

PR #45 adds a new trainees.js script used for training Fathom. The current training process (as described in comments in trainees.js) involves manually copying over three files into the fathom-trainees add-on.

This is a little tedious, so it'd be nice if trainees.js and all its dependencies could be bundled into a single trainees.js file to be used for training. This training Webpack config would be different from our WE Webpack config (webpack.config.js) in a few notable ways:

• Entry: trainees.js
• Rules: Run only the ./extraction/ruleset_factory.js file through the babel-loader to enable use of the autobind decorator.
• Output: Also call the bundled file trainees.js (rather than [name].bundle.js) to work with the fathom-trainees add-on and save the bundled file potentially to a training subfolder in ./src.
• Configure Webpack such that it doesn't transform imports from specific libraries.
  • We wouldn't want Webpack to bundle fathom-web into the training bundle since those imports get processed by rollup in the fathom-trainees add-on.
• This would also enable the use of the autobind decorator for the RulesetFactory class exported by ruleset_factory.js.

Remove prototype sidebar

We added a sidebar to help drive prototyping, but it's time to remove it and the related, non-reusable code that supports it. We should keep things like the pending-landing code for running automated tests that we'll eventually reuse.

Investigate opening page or browserAction popups without direct user action

We have discussed automatically opening a popup as out of scope for the MVP, as per the MDN docs for pageActions and browserActions and my own direct experience, popups for these buttons cannot be opened without direct user action (e.g. the user clicks the pageAction or browserAction button).

The only known way to achieve this is to take a legacy approach, where UI elements are implemented in XUL, which would prevent us from using many of the robust, well-tested WebExtension APIs for our add-on. If there's time, we should investigate this further and see if others (like glind/motin via the Shield Study Addon Template) have come up with a good solution.

Prototype saving products to collections

The idea of creation collections/boards/whatever of products and saving products you are viewing to them keeps coming up. It'd be worth it to prototype a feature like that to see what major roadblocks might come up if we end up adding a feature like that.

Investigate Fathom-based page extraction

As per the latest mockups, we probably want to extract the following info about a product:

• Name of shopping site (e.g. Amazon)
• Price
• Product name
• Representative image of product

In lieu of a better way of verifying whether the Fathom ruleset, let's use this:

• A training corpus of 100 pages from the 5 supported commerce sites.
• Train the ruleset using 50 of the pages, verify it against the other 50
• Aim for 95% accuracy

No product data sent to background.js if page has already loaded when webext is installed

If the product page is already loaded, and I reload the webext (or do a fresh install), background.bundle.js hasn't added its onMessage listener yet before the product_info.js content script has sent its message. As a result, I don't see any product information logged in the browser console from background.bundle.js in this situation.

A possible solution for this is to open a port between the background and content scripts. I should try this to see if it throws errors.

What we really want (paraphrasing osmose) is for the content script to wait until the background script is finished setting up its handlers before sending messages.

Indicate price changes via the toolbar icon

User Story: As a user, I want to quickly see if the price of a product I’m tracking has changed whenever I visit the corresponding product page

• When user revisits product page where they have subscribed and price change has occurred, they see Visible UI indication before clicking into panel
• When user clicks into panel, they see the detail of the price change

Attempt product page recognition earlier than after page load

In my review of PR #22 , we observed that there is a considerable delay (of ~5 seconds) for the pageAction to appear on a product page. This is because currently we wait until the page has completely finished loading before checking for product elements in the DOM.

It is possible that the information we are looking for is available earlier for some pages. For example, there may be pages where JavaScript does not alter the original DOM from the HTML document, or does so well before the entire page has finished loading.

It is also possible there could be supplementary information that is available earlier that we could use to more quickly identify a product page. For example, building off of PR #24 , we could list RegExps of product page URLs in our static ruleset for specific sites. With this, we would only need the URL for the page to recognize it. While this may not get us to the specific product information any faster, it could save us from unnecessarily doing work on non-product pages.

Improve price string parsing when there is a single price on the page

Edit (bdanforth): For a detailed explanation of the root causes of these failures, see this comment below.

TL;DR: These symptoms are primarily due to a brittle utility function that is used to reformat the price strings extracted from a product page that does not handle the case when parsing fails. Other symptoms covered by other issues include: how to handle pages with more than one price (#86 ) and failed extraction (#95 ).

See also #42.

---

Extension v0.1.0

Fuji XT2 Camera on Amazon:

STR:

• New profile on Fx Nightly
• While page is loading, I initially see the "currently tracking" item in the dropdown (a backpack)
• When the page is done loading, I close then reopen the panel and it's blank

URL
https://www.amazon.com/Fujifilm-X-T2-Mirrorless-F2-8-4-0-Lens/dp/B01I3LNQ6M/ref=sr_1_2?ie=UTF8&qid=1535594119&sr=8-2&keywords=fuji+xt2+camera

I'm guessing extraction failed?

1. Initial loading, I correctly see current items in the drop down
   

2. When page is done loading, I close/reopen panel and it's now blank

Add scaffolding for running tests in React. Write a basic React test for the sidebar.

For normal web applications (per mythmon and rdalal), Jest and Enzyme seem to be the recommended stack to use.

However, for WebExtensions, it can be hard to get things into the right context. Mythmon has only ever been able to use mochitest for that.

I have asked k88hudson from the Activity Stream team, as I believe they use React and were/are a system add-on developed out of the tree. I have also asked in IRC #webextensions. I will post anything I find here.

Telemetry measurements

Telemetry monitoring is important to help us understand how our product is being used, and how we can improve it. At the same time, we need to follow Mozilla's data collection guidelines and collect only what is necessary.

There's three things to do here, I think:

1. Define what telemetry data we want to collect
2. Categorize that data and review the proposed collection with data stewards / privacy / legal
3. Determine how we will collect the data

Towards (3), we can use a webextension experiment API to write to Firefox's telemetry system, but that will require some updates to the build pipeline for the extension, as it requires getting the add-on signed with a Mozilla-specific key.

Promise resolution after context is destroyed

This is mostly a rambling reminder to look into this later.

Once #39 lands, we'll be getting a bunch of errors in the browser console along the lines of "Promise resolved after context was destroyed". This seems to imply that we have some promises resolving after the toolbar panels are closed, but I'm not entirely sure how to handle this error. I don't yet have solid reproduction steps, but finding some shouldn't be too hard after the PR lands.

Implement a pill-shaped, extensible pageAction

Thinking about the "price confirmation" feature and corresponding UX mocks by Sevaan:

One non-trivial implementation detail is the pageAction, as currently WebExtensions limit the size of a pageAction to a square (16x16 or 32x32), and there is no method in the pageAction API for adding a badge or custom message.

We should develop an experimental API to create this dynamic, custom pageAction.

Here is some prior work that I did for a Tracking Protection Shield study in a bootstrapped legacy add-on.

"Track this Item" UI

User Story: want to subscribe to a price monitor/tracking/alert for a product on Amazon.com

• Browser UI to confirm product info
• Button to enroll in price tracking for the current product page
• Learn more link to SUMO aritcle
• Report problem link to report a product info mismatch

This bug covers implementing the UI design of the prompt. External links can be dummy links for the time being.

Uniquely identifying products

Currently, products are identified by their full URL. Several shopping sites offer the same product under different URLs, often for SEO purposes.

There's a few options:

• Per-site custom handling of unique IDs in URLs
• Normalize URLs to remove non-canonical bits
• Extract canonical IDs or URLs from the webpage
• Identify products by a compound key of vendor and product title
• Do nothing, URLs might actually be good enough

Implement a "price confirmation" pageAction panel

Re: the "price confirmation" feature and Sevaan's UX mocks:

Let's implement a panel to show this information. For now, the panel can just toggle on pageAction click, however, we should tackle how to show the panel without a direct user action in a separate issue, as I don't think that's possible with a pure WebExtension. Also, for now, we can stub out any APIs to get the dynamic product information to show in the panel.

Add support for functional tests

The automated test suite has the capability to run code in a privileged chrome context, but doesn't. To support a set of functional UI tests using the add-on, we should:

1. Add a test run that executes in a privileged context.
2. Ensure the add-on is built and installed during this test run.
3. Write a basic functional test that interacts with the UI.

Display "First Run" page with instructions

User Story: As a user, I want to understand how to use the new Fx Shopping experience

• Upon installation, the extension should open a new tab to a webpage explaining how to use the add-on, including:
  • How to set an alert
  • Retailers supported
  • Links to privacy and legal

Opening the sidebar throws an error in the browser console

Here is the error: ReferenceError: reference to undefined property "charset"[Learn More] browser.xml:145:15

It looks like there is an issue with the <meta charset="utf-8"> tag in sidebar.html, though I'm not sure why, since that's a valid attribute and value per MDN.

Consider only running extraction on allowlisted product pages

Currently, outside of background updates, our extraction scripts run on every top level page. Since we are only interested in extracting product information from product pages on particular domains, we should avoid unnecessarily running the extraction scripts elsewhere. This could be achieved by only running the scripts if the domains are on an "allowlist".

We would also want to handle cases like "smile.amazon.com" and other alternate domains that serve the same content for the most part. The best thing I can think of now is to run extraction in all subdomains for our top five sites.

• @javaun , I wanted to confirm with you that this allowlist approach is acceptable for the MVP?

This is related to #29 and #43 .

Toolbar and panel styling to indicate a pending price alert

User Story: If I miss a notification or can’t respond right now, I want Fx shopping to keep reminding me that I have a price drop

• Shopping toolbar UI persists message of a price change
• Clicking toolbar UI reveals the full panel of all followed products and their current price status (including any recent changes up/down
• The product(s) that triggered the recent price alerts are at the top of the list, and they are styled to reflect a recent price alert.
• Clicking through to a product page for a recently triggered alert dismisses the toolbar badging and the “price alert” style treatment in the dropdown

Sidebar does not refresh on location change when `isProductPage` goes from `true` to `false`

I noticed this while working on PR #24 .

While the content script does reload on location change, the logic in the background script does not trigger a re-render of the Sidebar page, since isProductPage is now false.

In this GIF of the bug, I would expect the Sidebar page to show 'Unknown' for all three bullets on the Home Depot page when it is loaded in the first tab after the Amazon page.

Display price data pulled from a page in the sidebar

Building off of PR #11 , a good next step would be to extract product-related information, such as price, from the page and display it in the web extension UI.

This requires a few steps to get there:

• Set up message passing between the content script and sidebar's page script.
• Find a way to have the content script identify a product page.
  • Option: Hardcode detection via RegExp of the most popular sites' product page URLs.
  • Option: Hardcode detection via CSS selectors for the most popular sites' product information.
  • Either option requires generating an extensible data blob with this information.
• Change the <Sidebar /> React component to a stateful component.

web-ext lint is linting built files, including webpack-generated code

Without this, web-ext lint fails because it looks for webpack-generated files that don't exist. But built files do potentially-unsafe things; in #11, it throws warnings about some innerHTML work that React is doing. Ideally, we could run this lint on the non-webpacked code to avoid those errors.

This issue covers generally evaluating what the lints are checking for, whether we should even be using web-ext lint, and how to use it on non-built code.

Live update popup if opened before Fathom extraction has finished on a page

Fathom needs to run after a product page has finished loading, so that it has access to the page's DOM to find the correct price, title and image elements.

Currently, if the browserAction popup is opened before the page has finished loading, and remains opened after the page has loaded, it does not update to show the extracted product card at the top. In this case, we should consider re-rendering the contents in the popup if we have successfully extracted product information from the page.

Closing and re-opening the popup does currently update it with the extracted product card.

UX: Long product titles wrap over buttons

Extension v0.1.0

I know UX is fluid, just filing this one.

Product link: Backpack
STR. Click into the doorhanger here and see the ultra long product title overflowing the layout.

https://www.amazon.com/dp/B07D4B1LMD/ref=sspa_dk_detail_1?psc=1&pd_rd_i=B07D4B1LMD&pf_rd_m=ATVPDKIKX0DER&pf_rd_p=a54d13fc-b8a1-4ce8-b285-d77489a09cf6&pf_rd_r=P64MN90390T2DQM5SE7Q&pd_rd_wg=aqCyS&pf_rd_s=desktop-dp-sims&pf_rd_t=40701&pd_rd_w=nBAtc&pf_rd_i=desktop-dp-sims&pd_rd_r=7d49f20b-abf7-11e8-8e51-357518f34f72

Consider training a dataset for product detection on a page

Since the exact HTML elements, attributes and styles for various pieces of product information on a page vary site by site, it is likely we will need a data set to extract this information for every page.

One approach is to write a script that auto-generates this data as a JSON blob based on elements that are clicked on in the page.

Improve data extraction method to use a static ruleset

Since the Open Graph <meta> elements from PR #6 often return incomplete if any product information for most product pages outside of Crate and Barrel, it would be useful to develop an alternate method as a means of extracting more complete data for several more vendors.

Let's build up a simple JSON file with hand-curated rules for several of the most popular online shopping websites and use them to improve our extension's product recognition capabilities, falling back on Open Graph if the improved method doesn't find anything.

Create feedback form for reporting feedback

#52 includes a link to "Report a problem", ostensibly to let users report incorrect product extraction. We'll want to create some sort of form (SurveyGizmo?) that lets users submit:

• Required
  • The URL of the page they're on
  • The title, price, and image that were extracted
  • The version of the add-on that they're running
• Optional
  • The version of Firefox they're running
  • The operating system they're using
  • An email address if they'd be willing to let us follow up with more questions

Ideally the page we create should accept pre-population of these fields from URL parameters.

Use mozilla/ci-docker-bases for base docker images used in CI

@mythmon made https://github.com/mozilla/ci-docker-bases, which is rad, and includes a base image with the most recent Firefox installed, as well as node. We could probably use that image in our CI for running automated tests with marionette. We should investigate whether that's an option and worth doing.

Create SUMO page for "Learn more" link

#52 includes a "Learn more" link that provides more info about the extension and how it works. We'll need to write up some content for that page and work with a SUMO editor to get it formatted and added to SUMO.

Modify toolbar icon and contents for currently-tracked products

User Story: As a user, I want to know that price alerts I’ve created are active.

• When a product is marked as tracked, the icon animates to draw attention.
• On subsequent pageviews, the product icon is modified to it's post-animation state to indicate that the product is actively being tracked.
• After tracking a product, the "Track this product" button is replace with a "Stop tracking" button that removes it from the saved product list when clicked.
• If the user stops tracking a product, the page action icon should revert back to the un-tracked state.
  • For simplicity's sake, if the user is on a product page and uses removal button in the browser action instead of the page action, the icon will not change until the browser action is closed and the product is confirmed removed. If the user can still undo the removal, the page action icon should not change.

Note: The mockup below is out of date.

If the first run page is already open, focus the existing tab instead of opening a new one

This applies to the Learn More link in the onboarding popup shown when no products have been saved.

What is the context and frequency for surfacing a price alert?

We seem to be converging on system notifications (#56 )and animating the toolbar icon (#51 , #54 , #57 ) to tell users there is a price alert.

1. In what context(s) should we notify the users of a price alert for 1) system notifications and 2) toolbar icon animations? Some ideas:

• At Firefox startup?
• At some point during the session?
• As soon as we know we want to alert them?
• Randomly?
• Other?
• #51 talks about animating the toolbar icon when the user visits a tracked product page with an alert/change.

2. With what frequency should we resurface a 1) system notification and 2) animated toolbar icon if the user a) did not engage or b) passively dismissed it?

Also related: #55 .

• @bryanbell , @sharonbautista what are your thoughts? Is this something we can test in UserTesting?

Browser action product listing

User Story: I want Firefox to help me keep track of products that I’m not ready to buy, but might if the price is right

• UI effectively communicates (implicitly or explicitly) the opportunity and value prop of price monitoring
• UI shows the items user has decided to track (sort order TBD, recent vs. price change order)
• When clicked, a product opens a tab to the original product page.

Note: Deleting products from this listing is covered by #50.

Animate toolbar icon when user first arrives on elligible pages

User Story: I want Firefox shoping to remind me when I’m on a site where I can track product pricing

• The first time a user visits an untracked product page on a domain that we support, animate the toolbar icon to grab their attention.

Disable extraction and telemetry in PBM, with DNT and/or Tracking Protection on

One challenge I have encountered with Shield studies in the past is if and how behavior should change when the user is in Private Browsing mode.

In my Shield experience, Private Browsing would be detected by the extension, and the user would not be prompted, nor would they see any study-related UI.

I acknowledge that we are not building a study here ultimately, so our extension may behave differently. It is also important to acknowledge that the desired behavior might change depending how the extension is deployed:

• An extension as a temporary study (likely opt-out)
• An extension shipped to users via Shield (likely opt-out)
• An extension available on AMO (opt-in)

• @javaun , I know we're still figuring out deployment options, but do you have any thoughts on this, and/or could you check with various folks on the telemetry/legal/privacy side if there are any guidelines?

Closing this issue would also include implementing any code changes necessary.

Make product shape check work in production environment

In https://github.com/mozilla/webext-commerce/blob/master/src/background/index.js#L25 we do a proptype check to ensure the product extracted from the page has all the properties necessary to be tracked. However, that check is behind a NODE_ENV check that will get ignored/compiled out during a production build of the add-on.

I'm not entirely sure what to do here, but we should handle it. Maybe we can set that environment variable to false even in production builds for that module only?

Display vendor icons next to their names in various places in the UI

A few spots in the UI have an icon (the favicon? open graph icon? etc.) of a vendor next to their name:

In the case that we whitelist vendors that we support, we can just hardcode these. If we don't whitelist, we'll have to dynamically pull it from the vendor during product extraction. There are privileged methods we can use with a webextension experiment to access the favicon image data for the page, for example.

Open Questions

• @javaun Should we double-check with legal if there's any restrictions on including vendor logos in our source code? @bryanbell reported during the meeting that he has previously been told that including logos that they serve as Open Graph / Favicon / etc. icons are fine.

Price alert dismissal

User Story: I want Fx to quit reminding me about a recent price drop because I’ve already gone back to look at the product

• Clicking through to an alerted product from any Fx Shopping UI element (toolbar panel or the Fx notification alert) indicates that the user has seen/acknowledged the alert.
• Therefore, the user no longer sees badging in toolbar icon, the nor the “price alert” styling of rows in the panel.

Product pages open when add-on is installed are not marked properly

If the user has a product page open when they install the add-on, it should be detected upon startup and the toolbar icon should have its url set to show that a product was detected.

For some reason, there is no tab information available on the sender in these cases. This makes it impossible to set the URL for that specific tab.

We should investigate why this info is missing on startup, and either resolve it, or change our behavior to work around it.

Show a pageAction when we successfully detect a product on the page

We likely want to prompt the user in some fashion when a product page is detected. One of the most common ways to do that, and the method used in Sevaan's mocks thus far, is with a pageAction button.