Merge pull request #604 from mozilla/567-subdomains

Add subdomain support for custom sites to the container.

package.json

@@ -34,6 +34,7 @@
     "fs-extra": "^8.1.0",
     "mocha": "^5.0.5",
     "nyc": "^14.1.1",
+    "psl": "^1.7.0",
     "sinon": "^7.3.2",
     "sinon-chai": "^3.0.0",
     "webextensions-geckodriver": "^0.6.1",

src/background.js

@@ -1,3 +1,5 @@
+/* global psl */
+
 const FACEBOOK_CONTAINER_DETAILS = {
   name: "Facebook",
   color: "toolbar",
@@ -266,6 +268,27 @@ async function maybeReopenTab (url, tab, request) {
   return {cancel: true};
 }
 
+const rootDomainCache = {};
+
+function getRootDomain(url) {
+  if (url in rootDomainCache) {
+    // After storing 128 entries, it will delete the oldest each time.
+    const returnValue = rootDomainCache[url];
+    if (Object.keys(rootDomainCache).length > 128) {
+      delete rootDomainCache[(Object.keys(rootDomainCache)[0])];
+    }
+    return returnValue;
+  }
+
+  const urlObject = new URL(url);
+  if (urlObject.hostname === "") { return false; }
+  const parsedUrl = psl.parse(urlObject.hostname);
+
+  rootDomainCache[url] = parsedUrl.domain;
+  return parsedUrl.domain;
+
+}
+
 function isFacebookURL (url) {
   const parsedUrl = new URL(url);
   for (let facebookHostRE of facebookHostREs) {
@@ -276,23 +299,13 @@ function isFacebookURL (url) {
   return false;
 }
 
-// TODO: Consider users if accounts.spotify.com already in FBC
-async function supportSiteSubdomainCheck (url) {
-  if (url === "accounts.spotify.com") {
-    await addDomainToFacebookContainer("https://www.spotify.com");
-    await addDomainToFacebookContainer("https://open.spotify.com");
-  }
-  return;
-}
-
 // TODO: refactor parsedUrl "up" so new URL doesn't have to be called so much
 // TODO: refactor fbcStorage "up" so browser.storage.local.get doesn't have to be called so much
 async function addDomainToFacebookContainer (url) {
-  const parsedUrl = new URL(url);
   const fbcStorage = await browser.storage.local.get();
-  fbcStorage.domainsAddedToFacebookContainer.push(parsedUrl.host);
+  const rootDomain = getRootDomain(url);
+  fbcStorage.domainsAddedToFacebookContainer.push(rootDomain);
   await browser.storage.local.set({"domainsAddedToFacebookContainer": fbcStorage.domainsAddedToFacebookContainer});
-  await supportSiteSubdomainCheck(parsedUrl.host);
 }
 
 async function removeDomainFromFacebookContainer (domain) {
@@ -302,11 +315,10 @@ async function removeDomainFromFacebookContainer (domain) {
   await browser.storage.local.set({"domainsAddedToFacebookContainer": fbcStorage.domainsAddedToFacebookContainer});
 }
 
-// TODO: Add PSL Subdomain Check against current list
 async function isAddedToFacebookContainer (url) {
-  const parsedUrl = new URL(url);
   const fbcStorage = await browser.storage.local.get();
-  if (fbcStorage.domainsAddedToFacebookContainer.includes(parsedUrl.host)) {
+  const rootDomain = getRootDomain(url);
+  if (fbcStorage.domainsAddedToFacebookContainer.includes(rootDomain)) {
     return true;
   }
   return false;
@@ -462,6 +474,13 @@ async function containFacebook (request) {
     delete tabsWaitingToLoad[request.tabId];
   }
 
+  // Listen to requests and open Facebook into its Container,
+  // open other sites into the default tab context
+  if (request.tabId === -1) {
+    // Request doesn't belong to a tab
+    return;
+  }
+
   const tab = await browser.tabs.get(request.tabId);
   updateBrowserActionIcon(tab);
 
@@ -470,12 +489,6 @@ async function containFacebook (request) {
   if (urlSearchParm.has("fbclid")) {
     return {redirectUrl: stripFbclid(request.url)};
   }
-  // Listen to requests and open Facebook into its Container,
-  // open other sites into the default tab context
-  if (request.tabId === -1) {
-    // Request doesn't belong to a tab
-    return;
-  }
 
   return maybeReopenTab(request.url, tab, request);
 }
@@ -570,15 +583,24 @@ function setupWindowsAndTabsListeners() {
   setupWebRequestListeners();
   setupWindowsAndTabsListeners();
 
-  browser.runtime.onMessage.addListener( (message, {url}) => {
-    if (message === "what-sites-are-added") {
+  async function messageHandler(request, sender) {
+    switch (request.message) {
+    case "what-sites-are-added":
       return browser.storage.local.get().then(fbcStorage => fbcStorage.domainsAddedToFacebookContainer);
-    } else if (message.removeDomain) {
-      removeDomainFromFacebookContainer(message.removeDomain).then( results => results );
-    } else {
-      addDomainToFacebookContainer(url).then( results => results);
+    case "remove-domain-from-list":
+      removeDomainFromFacebookContainer(request.removeDomain).then( results => results );
+      break;
+    case "add-domain-to-list":
+      addDomainToFacebookContainer(sender.url).then( results => results);
+      break;
+    case "get-root-domain":
+      return getRootDomain(request.url);
+    default:
+      throw new Error("Unexpected message!");
     }
-  });
+  }
+
+  browser.runtime.onMessage.addListener(messageHandler);
 
   maybeReopenAlreadyOpenTabs();
 

src/content_script.js

@@ -210,7 +210,9 @@ function addFacebookBadge (target, badgeClassUId, socialAction) {
     htmlBadgeFragmentPromptButtonAllow.addEventListener("click", (e) => {
       e.preventDefault();
       allowClickSwitch = true;
-      browser.runtime.sendMessage("add-to-facebook-container");
+      browser.runtime.sendMessage({
+        message: "add-domain-to-list"
+      });
       target.click();
     });
 
@@ -607,10 +609,24 @@ function contentScriptInit(resetSwitch, msg) {
   }
 }
 
+async function getRootDomainFromBackground(url) {
+  // Send request to background to parse URL via PSL
+  const backgroundResp = await browser.runtime.sendMessage({
+    message: "get-root-domain",
+    url
+  });
+
+  return backgroundResp;
+}
+
 async function CheckIfURLShouldBeBlocked() {
-  const siteList = await browser.runtime.sendMessage("what-sites-are-added");
+  const siteList = await browser.runtime.sendMessage({
+    message: "what-sites-are-added"
+  });
+
+  const site = await getRootDomainFromBackground(window.location.href);
 
-  if (siteList.includes(window.location.host)) {
+  if (siteList.includes(site)) {
     checkForTrackers = false;
   } else {
     contentScriptInit(false);

src/manifest.json

@@ -55,7 +55,10 @@
     ],
 
     "background": {
-        "scripts": ["background.js"]
+        "scripts": [
+          "psl.min.js",
+          "background.js"
+        ]
     },
 
     "content_scripts": [

src/panel.css

@@ -181,7 +181,7 @@ a:hover {
 }
 
 .highlight-on-hover.remove-site-from-container.disabled-button::after,
-.highlight-on-hover.remove-site-from-container.disabled-button span
+.highlight-on-hover.remove-site-from-container.disabled-button span,
 .highlight-on-hover.add-site-to-container.disabled-button::after,
 .highlight-on-hover.add-site-to-container.disabled-button span {
   opacity: 0.4;

src/panel.js

@@ -117,25 +117,33 @@ const addSpan = (wrapper, stringId) => {
   setClassAndAppend(wrapper, span);
 };
 
-const getActiveHostname = async() => {
+const getActiveRootDomainFromBackground = async() => {
+  // Get active page URL
   const tabsQueryResult = await browser.tabs.query({currentWindow: true, active: true});
   const currentActiveTab = tabsQueryResult[0];
-  const currentActiveURL = new URL(currentActiveTab.url);
-  const thisHostname = currentActiveURL.hostname;
-  return thisHostname;
+
+  // Send request to background to parse URL via PSL
+  const backgroundResp = await browser.runtime.sendMessage({
+    message: "get-root-domain",
+    url: currentActiveTab.url
+  });
+
+  return backgroundResp;
 };
 
 const isSiteInContainer = async(panelId) => {
-
   if (panelId === "on-facebook") {
     // Site is on default FBC domain. Show the "remove site" button, in a disabled state.
     return true;
   }
 
-  const addedSitesList = await browser.runtime.sendMessage("what-sites-are-added");
-  const activeTabHostname = await getActiveHostname();
+  const addedSitesList = await browser.runtime.sendMessage({
+    message: "what-sites-are-added"
+  });
+
+  const activeRootDomain = await getActiveRootDomainFromBackground();
 
-  if (addedSitesList.includes(activeTabHostname)) {
+  if (addedSitesList.includes(activeRootDomain)) {
     return true;
   }
 };
@@ -219,7 +227,11 @@ const addDeleteSiteListeners = () => {
   document.querySelectorAll(".site-added").forEach(btn => {
     btn.addEventListener("click", async (e) => {
       // TODO: refactor to remove the domain straight from browser.storage.local?
-      await browser.runtime.sendMessage({removeDomain: e.dataset.domain});
+
+      await browser.runtime.sendMessage({
+        message: "remove-domain-from-list",
+        removeDomain: e.dataset.domain
+      });
     });
   });
 };
@@ -520,7 +532,9 @@ const buildAllowedSitesPanel = async(panelId) => {
   addLightSubhead(listsWrapper, "sites-included");
   makeSiteList(listsWrapper, defaultAllowedSites);
 
-  const siteList = await browser.runtime.sendMessage("what-sites-are-added");
+  const siteList = await browser.runtime.sendMessage({
+    message: "what-sites-are-added"
+  });
   const sitesAllowedSubhead = addLightSubhead(listsWrapper, "sites-allowed");
   sitesAllowedSubhead.classList.add("sites-allowed");
   makeSiteList(listsWrapper, siteList, true, true); // (...sitesAllowed=true, addX=true)
@@ -542,22 +556,28 @@ const buildAllowedSitesPanel = async(panelId) => {
 };
 
 const removeSiteFromContainer = async () => {
-  const activeHostname = await getActiveHostname();
-  buildRemoveSitePanel(activeHostname);
+  const activeRootDomain = await getActiveRootDomainFromBackground();
+
+  await browser.runtime.sendMessage({
+    message: "remove-domain-from-list",
+    removeDomain: activeRootDomain
+  });
+  browser.tabs.reload();
+  window.close();
 };
 
-const addSiteToContainer = async (activeHostname) => {
-  if (!activeHostname) { throw new Error("Missing site name. Cannot add site."); }
+const addSiteToContainer = async () => {
+  const activeRootDomain = await getActiveRootDomainFromBackground();
   const fbcStorage = await browser.storage.local.get();
-  fbcStorage.domainsAddedToFacebookContainer.push(activeHostname);
+  fbcStorage.domainsAddedToFacebookContainer.push(activeRootDomain);
   await browser.storage.local.set({"domainsAddedToFacebookContainer": fbcStorage.domainsAddedToFacebookContainer});
   browser.tabs.reload();
   window.close();
 };
 
 const buildAddSitePanel = async (siteName) => {
   if (!siteName) {
-    siteName = await getActiveHostname();
+    siteName = await getActiveRootDomainFromBackground();
   }
 
   const panelId = "add-site";
@@ -604,7 +624,10 @@ const buildRemoveSitePanel = (siteName) => {
   blueRemoveButton.classList.add("uiMessage", "remove-btn");
   blueRemoveButton.id = "remove";
   blueRemoveButton.addEventListener("click", async() => {
-    await browser.runtime.sendMessage( {removeDomain: siteName} );
+    await browser.runtime.sendMessage({
+      message: "remove-domain-from-list",
+      removeDomain: siteName
+    });
     browser.tabs.reload();
     window.close();
   });

test/features/add-domain-to-fbc.test.js

@@ -6,16 +6,18 @@ describe("Add domain to Facebook Container", () => {
     background = webExtension.background;
   });
 
-  describe("runtime message add-to-facebook-container", () => {
+  describe("runtime message add-domain-to-list", () => {
     beforeEach(async () => {
-      await background.browser.runtime.onMessage.addListener.yield("add-to-facebook-container", {
+      await background.browser.runtime.onMessage.addListener.yield({
+        message: "add-domain-to-list"
+      }, {
         url: "https://example.com"
       });
     });
 
     describe("runtime message what-sites-are-added", () => {
       it("should return the added sites", async () => {
-        const [promise] = await background.browser.runtime.onMessage.addListener.yield("what-sites-are-added", {});
+        const [promise] = await background.browser.runtime.onMessage.addListener.yield({message: "what-sites-are-added"});
         const sites = await promise;
         expect(sites.includes("example.com")).to.be.true;
       });
@@ -25,14 +27,15 @@ describe("Add domain to Facebook Container", () => {
     describe("runtime message removeDomain", () => {
       it("should have removed the domain", async () => {
         await background.browser.runtime.onMessage.addListener.yield({
+          message: "remove-domain-from-list",
           removeDomain: "example.com"
-        }, {});
+        });
 
-        const [promise] = await background.browser.runtime.onMessage.addListener.yield("what-sites-are-added", {});
+        const [promise] = await background.browser.runtime.onMessage.addListener.yield({message: "what-sites-are-added"});
         const sites = await promise;
         expect(sites.includes("example.com")).to.be.false;
       });
     });
   });
 
-});
+});