Free premium slots: 2 premium features for signed-in users (#213)

Lets signed-in free-tier users enable up to 2 premium features at no cost.

Author: lawrencehook

src/background/events.js

@@ -8,11 +8,14 @@ if (typeof browser === 'undefined') {
 const uninstallUrl = "http://lawrencehook.com/rys/👋";
 browser.runtime.setUninstallURL(uninstallUrl);
 
-browser.runtime.onInstalled.addListener(object => {
+browser.runtime.onInstalled.addListener(async object => {
   const url = "http://lawrencehook.com/rys/welcome";
-  if (object.reason === browser.runtime.OnInstalledReason.INSTALL) {
-    browser.tabs.create({ url }, tab => {});
-  }
+  if (object.reason !== browser.runtime.OnInstalledReason.INSTALL) return;
+  // management.getSelf() returns a Promise in both Chrome MV3 and Firefox
+  // (Firefox ignores callbacks), so use await for cross-browser consistency.
+  const info = await browser.management.getSelf();
+  if (info && info.installType === 'development') return; // skip on unpacked/dev loads
+  browser.tabs.create({ url });
 });
 
 // Change the browserAction icon if the extension is disabled

src/chrome_manifest.json

@@ -20,6 +20,7 @@
     {
       "js": [
         "/shared/main.js",
+        "/shared/config.js",
         "/shared/https.js",
         "/shared/utils.js",
         "/shared/banners.js",

src/content-script/main.js

@@ -53,11 +53,6 @@ let lastRedirect;
 const redirectInterval = 1_000; // 1 second
 
 
-// Get list of premium feature IDs
-const PREMIUM_FEATURE_IDS = SECTIONS.flatMap(section =>
-  section.options.filter(opt => opt.premium).map(opt => opt.id)
-);
-
 // Decode license token to check premium status (no signature verification - we trust our server)
 function decodeLicenseToken(token) {
   if (!token) return null;
@@ -77,21 +72,35 @@ function isPremiumFromToken(token) {
   return decoded.premium === true && decoded.exp > now;
 }
 
+function getTier(licenseToken, sessionToken) {
+  if (isPremiumFromToken(licenseToken)) return TIER.PREMIUM;
+  if (sessionToken) return TIER.FREE_SIGNED_IN;
+  return TIER.FREE;
+}
+
 // Respond to changes in settings
 function logStorageChange(changes, area) {
   if (area !== 'local') return;
 
-  // Update premium status in cache if license token changed
-  if ('license_token' in changes) {
-    cache['_isPremium'] = isPremiumFromToken(changes['license_token'].newValue);
+  if ('license_token' in changes) cache['_licenseToken'] = changes['license_token'].newValue;
+  if ('session_token' in changes) cache['_sessionToken'] = changes['session_token'].newValue;
+  if ('license_token' in changes || 'session_token' in changes) {
+    cache['_tier'] = getTier(cache['_licenseToken'], cache['_sessionToken']);
   }
 
   Object.entries(changes).forEach(([id, { oldValue, newValue }]) => {
     if (oldValue === newValue) return;
 
-    // Enforce premium features are false for non-premium users
-    if (PREMIUM_FEATURE_IDS.includes(id) && cache['_isPremium'] !== true) {
-      newValue = false;
+    if (PREMIUM_FEATURE_ID_SET.has(id)) {
+      const tier = cache['_tier'];
+      if (tier === TIER.FREE) {
+        newValue = false;
+      } else if (tier === TIER.FREE_SIGNED_IN && newValue === true) {
+        const alreadyOn = cache[id] === true;
+        if (!alreadyOn && countActivePremium(cache) >= PREMIUM_CONFIG.FREE_PREMIUM_SLOTS) {
+          newValue = false;
+        }
+      }
     }
 
     HTML.setAttribute(id, newValue);
@@ -113,13 +122,15 @@ browser.storage.local.get(settings => {
     browser.storage.local.set(revealUpdates);
   }
 
-  // Enforce premium features are false for non-premium users
-  const isPremium = isPremiumFromToken(settings['license_token']);
-  cache['_isPremium'] = isPremium;
-  if (!isPremium) {
-    PREMIUM_FEATURE_IDS.forEach(id => {
-      settings[id] = false;
-    });
+  const tier = getTier(settings['license_token'], settings['session_token']);
+  cache['_tier'] = tier;
+  cache['_licenseToken'] = settings['license_token'];
+  cache['_sessionToken'] = settings['session_token'];
+  if (tier === TIER.FREE) {
+    clearAllPremium(settings);
+  } else if (tier === TIER.FREE_SIGNED_IN) {
+    const writeBack = enforceSlotBudget(settings, PREMIUM_CONFIG.FREE_PREMIUM_SLOTS);
+    if (Object.keys(writeBack).length) browser.storage.local.set(writeBack);
   }
 
   Object.entries({ ...DEFAULT_SETTINGS, ...settings}).forEach(([ id, value ]) => {

src/firefox_manifest.json

@@ -23,6 +23,7 @@
     {
       "js": [
         "/shared/main.js",
+        "/shared/config.js",
         "/shared/https.js",
         "/shared/utils.js",
         "/shared/banners.js",

src/options/body.css

@@ -318,7 +318,21 @@ html[foo=bar] {
 }
 
 #password_container_background button {
-  color: var(--body-color);
+  padding: 8px 16px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  border: none;
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  background-color: var(--blue-color);
+  color: white;
+}
+#password_container_background button:hover {
+  opacity: 0.9;
+}
+#password_container_background button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
 }
 
 #enable_password_container, #enable_password_container * {
@@ -381,10 +395,6 @@ html[foo=bar] {
   justify-self: start;
 }
 
-#password-button button {
-  color: var(--body-color);
-}
-
 #disable_password_container a:first-child {
   font-weight: bold;
 }
@@ -592,6 +602,23 @@ html[dark_mode='true'] #active_sidebar .active_count {
   gap: 1px;
 }
 
+#current_selection_indicator {
+  position: sticky;
+  top: 0;
+  align-self: flex-end;
+  margin-bottom: -28px;
+  font-size: 0.8rem;
+  color: var(--label-color);
+  opacity: 0.75;
+  padding: 4px 10px;
+  background-color: var(--body-background-color);
+  border-left: 1px solid var(--box-shadow-color);
+  border-bottom: 1px solid var(--box-shadow-color);
+  border-bottom-left-radius: 6px;
+  pointer-events: none;
+  z-index: 5;
+}
+
 
 /*************************************
  * SIGN-IN / ACCOUNT / UPGRADE MODALS
@@ -926,6 +953,7 @@ html[dark_mode='true'] #active_sidebar .active_count {
 /* Upgrade Modal */
 #upgrade_container {
   width: auto;
+  max-width: min(90vw, 380px);
   padding: 24px;
   gap: 18px;
   align-items: flex-start;
@@ -940,8 +968,29 @@ html[dark_mode='true'] #active_sidebar .active_count {
 }
 
 #premium_required_description {
-  font-size: 0.85rem;
   margin: 0;
+  text-align: center;
+}
+
+#upgrade_slot_limit_note {
+  color: var(--body-color);
+  text-align: center;
+  padding: 0 8px;
+}
+
+.premium-note-main,
+.premium-note-sub {
+  display: block;
+  line-height: 1.4;
+}
+.premium-note-main {
+  font-size: 0.9rem;
+  opacity: 0.85;
+}
+.premium-note-sub {
+  font-size: 0.8rem;
+  opacity: 0.55;
+  margin-top: 4px;
 }
 
 #upgrade_plans {
@@ -1026,53 +1075,55 @@ html[dark_mode='true'] .upgrade-plan[selected] {
   align-self: flex-end;
 }
 
-/* Premium lock icon for options */
-html:not([is_premium='true']) .option[data-premium='true'] {
-  opacity: 0.25;
-  position: relative;
+/* Premium options: dim slightly for non-premium users, full opacity for premium */
+html:not([tier='premium']) .option[data-premium='true'] {
+  opacity: 0.65;
+}
+html[tier='premium'] .option[data-premium='true'],
+#active_section .option[data-premium='true'] {
+  opacity: 1;
 }
 
-html:not([is_premium='true']) .option[data-premium='true']::after {
+/* Blue dot at the right edge of premium options (only shown for non-premium users). */
+.option[data-premium='true'] {
+  position: relative;
+}
+html:not([tier='premium']) .option[data-premium='true']::after {
   content: '';
   position: absolute;
   right: 10px;
   top: 50%;
   transform: translateY(-50%);
-  width: 16px;
-  height: 16px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-
-/* Premium options unlocked */
-html[is_premium='true'] .option[data-premium='true'] {
-  opacity: 1;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--blue-color, #4a6cf7);
+  opacity: 0.85;
 }
 
-/* Premium lock icon for settings menu items */
-html:not([is_premium='true']) #settings-menu div[data-premium='true'],
-html:not([is_premium='true']) #power-options div[data-premium='true'] {
-  opacity: 0.25;
+/* Premium marker for settings-menu / power-options items (same dot as main list) */
+html:not([tier='premium']) #settings-menu div[data-premium='true'],
+html:not([tier='premium']) #power-options div[data-premium='true'] {
+  opacity: 0.65;
   position: relative;
 }
 
-html:not([is_premium='true']) #settings-menu div[data-premium='true']::after,
-html:not([is_premium='true']) #power-options div[data-premium='true']::after {
+html:not([tier='premium']) #settings-menu div[data-premium='true']::after,
+html:not([tier='premium']) #power-options div[data-premium='true']::after {
   content: '';
   position: absolute;
-  right: 8px;
+  right: 10px;
   top: 50%;
   transform: translateY(-50%);
-  width: 14px;
-  height: 14px;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
-  background-size: contain;
-  background-repeat: no-repeat;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--blue-color, #4a6cf7);
+  opacity: 0.85;
 }
 
-html[is_premium='true'] #settings-menu div[data-premium='true'],
-html[is_premium='true'] #power-options div[data-premium='true'] {
+html[tier='premium'] #settings-menu div[data-premium='true'],
+html[tier='premium'] #power-options div[data-premium='true'] {
   opacity: 1;
 }
 

src/options/header.css

@@ -54,6 +54,23 @@ html[dark_mode='false'] #header-light { display: none }
   letter-spacing: 0.02em;
 }
 
+#header-slot-indicator {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+#header-slot-indicator .slot-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background-color: var(--label-color);
+  opacity: 0.25;
+}
+#header-slot-indicator .slot-dot[filled] {
+  background-color: var(--blue-color, #4a6cf7);
+  opacity: 0.85;
+}
+
 #search_bar {
   margin-left: auto;
   margin-right: auto;

src/options/main.html

@@ -190,7 +190,10 @@
             <span id="premium_required_header_premium">Premium</span>
           </div>
         </div>
-        <p id="premium_required_description">Premium required. Sign in to upgrade.</p>
+        <p id="premium_required_description">
+          <span class="premium-note-main">Sign in to enable any 2 premium features.</span>
+          <span class="premium-note-sub">Upgrade to unlock them all.</span>
+        </p>
         <div id="premium_required_buttons">
           <button id="premium-required-cancel-button">Cancel</button>
           <button id="premium-required-signin-button">Sign In</button>
@@ -208,6 +211,10 @@
           </div>
           <span id="upgrade_header_action">Upgrade</span>
         </div>
+        <div id="upgrade_slot_limit_note" hidden>
+          <span class="premium-note-main">Free tier allows 2 premium features.</span>
+          <span class="premium-note-sub">Upgrade or deselect one.</span>
+        </div>
         <div id="upgrade_plans">
           <div class="upgrade-plan" data-plan="monthly">
             <div class="plan-name">Monthly</div>
@@ -292,6 +299,8 @@
         <input type=search placeholder='Search' autofocus tabindex="0"></input>
       </div>
 
+      <div id='header-slot-indicator' hidden title='Free premium features used'></div>
+
       <a title='On/Off' id="power-icon">
         <div id='power-pop-up'>Button is disabled because the schedule is active.</div>
         <svg id="header-toggle" class='global_enable header-toggle' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300">