Create separate checkout_pages content script using account_pages scr…

…ipt as template. Add basic DEV manifest flag support

app/content-scripts/account_pages.js

@@ -1,8 +1,7 @@
 /**
- * Ghostery Account & ExtensionWeb Events
+ * Ghostery Account Events
  *
- * This file connects the extension to all ExtensionWeb and Account
- * pages (extension, account, signon)
+ * This file connects the extension to all Account pages
  *
  * Ghostery Browser Extension
  * https://www.ghostery.com/

app/content-scripts/checkout_pages.js

@@ -0,0 +1,52 @@
+/**
+ * Ghostery Checkout Events
+ *
+ * This file connects the extension to all Checkout pages
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+/**
+ * @namespace CheckoutPagesContentScript
+ */
+import msgModule from './utils/msg';
+
+const msg = msgModule('checkout_pages');
+const { sendMessage } = msg;
+/**
+ * Use to call init to initialize functionality
+ * @var  {Object} initialized to an object with init method as its property
+ */
+const CheckoutPagesContentScript = (function(window) {
+	/**
+	 * Initialize functionality of this script.
+	 * @memberOf CheckoutPagesContentScript
+	 * @package
+	 */
+	const _listeners = [
+		'checkoutPage.buyPlus',
+		'checkoutPage.ping',
+	];
+	const _initialize = function() {
+		_listeners.forEach(name => window.addEventListener(name, () => sendMessage(name)));
+	};
+
+	return {
+		/**
+		 * Initialize functionality of this script.
+		 * @memberOf CheckoutPagesContentScript
+		 * @public
+		 */
+		init() {
+			_initialize();
+		}
+	};
+}(window, document));
+
+CheckoutPagesContentScript.init();

manifest.json

@@ -9,6 +9,7 @@
 	"description": "__MSG_short_description__",
 	"debug": true,
 	"log": true,
+  	"dev": true,
 	"icons": {
 		"16": "app/images/icon16.png",
 		"48": "app/images/icon48.png",
@@ -51,12 +52,21 @@
 			],
 			"matches": [
 				"https://account.ghostery.com/*",
-				"https://account.ghosterystage.com/*",
-			  	"https://checkout.ghostery.com/*",
-			  	"https://checkout.ghosterystage.com/*",
+				"https://account.ghosterystage.com/*"
 			],
 			"run_at": "document_start"
 		},
+		{
+		  "all_frames": false,
+		  "js": [
+			"dist/checkout_pages.js"
+		  ],
+		  "matches": [
+			"https://checkout.ghostery.com/*",
+			"https://checkout.ghosterystage.com/*"
+		  ],
+		  "run_at": "document_start"
+		},
 		{
 			"all_frames": true,
 			"js": [

src/background.js

@@ -317,6 +317,27 @@ function handleAccountPages(name, callback) {
 	}
 }
 
+/**
+ * Handle messages sent from app/js/checkout_pages.js content script.
+ * @memberOf Background
+ *
+ * @param  {string} 	name 		message name
+ * @param  {string}		tab_url 	tab url
+ */
+function handleCheckoutPages(name, callback) {
+	switch (name) {
+		case 'checkoutPage.buyPlus':
+			// Update account info
+			console.error('background#handleCheckoutPages received "checkoutPage.buyPlus"');
+			return true;
+		case 'checkoutPage.ping':
+			console.error('ping received from Checkout Web');
+			return true;
+		default:
+			return false;
+	}
+}
+
 /**
  * Handle messages sent from dist/ghostery_dot_com.js content script.
  * @memberOf Background
@@ -672,6 +693,10 @@ function onMessageHandler(request, sender, callback) {
 		// Account pages
 		return handleAccountPages(name, callback);
 	}
+	if (origin === 'checkout_pages') {
+		// Checkout pages
+		return handleCheckoutPages(name, callback);
+	}
 	if (origin === 'purplebox') {
 		// Purplebox script events
 		return handlePurplebox(name, message, tab_id, callback);

src/classes/Globals.js

@@ -27,6 +27,7 @@ class Globals {
 		// environment variables
 		this.DEBUG = manifest.debug || false;
 		this.LOG = this.DEBUG && manifest.log;
+		this.DEV = manifest.dev || false;
 		this.EXTENSION_NAME = manifest.name || 'Ghostery';
 		this.EXTENSION_VERSION = manifest.version_name || manifest.version; // Firefox does not support "version_name"
 		this.BROWSER_INFO = {
@@ -51,17 +52,26 @@ class Globals {
 		// domains
 		this.GHOSTERY_ROOT_DOMAIN = `${this.DEBUG ? 'ghosterystage' : 'ghostery'}.com`;
 		this.GHOSTERY_BASE_URL = `https://${this.GHOSTERY_ROOT_DOMAIN}`;
-		this.ACCOUNT_BASE_URL = `https://account.${this.GHOSTERY_ROOT_DOMAIN}`;
-		this.CHECKOUT_BASE_URL = `https://checkout.${this.GHOSTERY_ROOT_DOMAIN}`;
 		this.METRICS_BASE_URL = `https://${this.DEBUG ? 'staging-d' : 'd'}.ghostery.com`;
 		this.CMP_BASE_URL = `https://${this.DEBUG ? 'staging-cmp-cdn' : 'cmp-cdn'}.ghostery.com`;
 		this.CDN_BASE_URL = `https://${this.DEBUG ? 'staging-cdn' : 'cdn'}.ghostery.com`;
 		this.APPS_BASE_URL = `https://${this.DEBUG ? 'staging-apps' : 'apps'}.ghostery.com`;
 		this.GCACHE_BASE_URL = `https://${this.DEBUG ? 'staging-gcache' : 'gcache'}.ghostery.com`;
-		this.AUTH_SERVER = `https://consumerapi.${this.GHOSTERY_ROOT_DOMAIN}`;
-		this.ACCOUNT_SERVER = `https://accountapi.${this.GHOSTERY_ROOT_DOMAIN}`;
-		this.COOKIE_DOMAIN = `.${this.GHOSTERY_ROOT_DOMAIN}`;
-		this.COOKIE_URL = this.GHOSTERY_BASE_URL;
+		if (this.DEV) {
+			this.ACCOUNT_BASE_URL = 'http://localhost:3001';
+			this.CHECKOUT_BASE_URL = 'http://localhost:3002';
+			this.AUTH_SERVER = 'http://localhost:8080';
+			this.ACCOUNT_SERVER = 'http://localhost:8081';
+			this.COOKIE_DOMAIN = 'localhost';
+			this.COOKIE_URL = `http://${this.COOKIE_DOMAIN}`;
+		} else {
+			this.ACCOUNT_BASE_URL = `https://account.${this.GHOSTERY_ROOT_DOMAIN}`;
+			this.CHECKOUT_BASE_URL = `https://checkout.${this.GHOSTERY_ROOT_DOMAIN}`;
+			this.AUTH_SERVER = `https://consumerapi.${this.GHOSTERY_ROOT_DOMAIN}`;
+			this.ACCOUNT_SERVER = `https://accountapi.${this.GHOSTERY_ROOT_DOMAIN}`;
+			this.COOKIE_DOMAIN = `.${this.GHOSTERY_ROOT_DOMAIN}`;
+			this.COOKIE_URL = this.GHOSTERY_BASE_URL;
+		}
 
 		// extension IDs
 		this.GHOSTERY_TAB_CHROME_PRODUCTION_ID = 'plmapebanmikcofllaaddgeocahboejc';

webpack.config.js

@@ -47,6 +47,7 @@ module.exports = {
 		account_pages: [`${CONTENT_SCRIPTS_DIR}/account_pages.js`],
 		background: [`${SRC_DIR}/background.js`],
 		blocked_redirect: [`${CONTENT_SCRIPTS_DIR}/blocked_redirect.js`],
+		checkout_pages: [`${CONTENT_SCRIPTS_DIR}/checkout_pages.js`],
 		click_to_play: [`${CONTENT_SCRIPTS_DIR}/click_to_play.js`],
 		content_script_bundle: [`${CONTENT_SCRIPTS_DIR}/content_script_bundle.js`],
 		ghostery_dot_com: [`${CONTENT_SCRIPTS_DIR}/ghostery_dot_com.js`],