[mv3] Fix issue with updateContentScripts API and other fixes

Avoid using updateContentScripts() as it suffers from an unexpected
behavior, causing injected content scripts to lose proper order
at injection time. The order in which content scripts are injected
is key for uBOL content scripts. Potential out of order injection
was causing cosmetic filtering to be broken.

Use actual storage API to persist data across service worker
wake-ups and browser launches. uBOL was trying to avoid using
storage API, at the cost of somewhat hacky code (using DNR API
to persist settings).

Make use of session storage if available, to speed up
initialization of waking up the service worker (which at this
point is necessary to properly implement cosmetic filtering).

Author: gorhill

platform/mv3/chromium/manifest.json

@@ -34,7 +34,8 @@
   "permissions": [
     "activeTab",
     "declarativeNetRequest",
-    "scripting"
+    "scripting",
+    "storage"
   ],
   "short_name": "uBO Lite",
   "version": "0.1",

platform/mv3/extension/js/background.js

@@ -29,6 +29,8 @@ import {
     browser,
     dnr,
     runtime,
+    localRead, localWrite,
+    sessionRead, sessionWrite,
 } from './ext.js';
 
 import {
@@ -75,72 +77,61 @@ function getCurrentVersion() {
 }
 
 async function loadRulesetConfig() {
-    const dynamicRuleMap = await getDynamicRules();
-    const configRule = dynamicRuleMap.get(CURRENT_CONFIG_BASE_RULE_ID);
-    if ( configRule === undefined ) {
-        rulesetConfig.enabledRulesets = await defaultRulesetsFromLanguage();
-        rulesetConfig.firstRun = true;
+    let data = await sessionRead('rulesetConfig');
+    if ( data ) {
+        rulesetConfig.version = data.version;
+        rulesetConfig.enabledRulesets = data.enabledRulesets;
+        rulesetConfig.autoReload = data.autoReload;
         return;
     }
-    let rawConfig;
-    try {
-        rawConfig = JSON.parse(self.atob(configRule.condition.urlFilter));
-    } catch(ex) {
-    }
-
-    // New format
-    if ( Array.isArray(rawConfig) ) {
-        rulesetConfig.version = rawConfig[0];
-        rulesetConfig.enabledRulesets = rawConfig[1];
-        rulesetConfig.autoReload = rawConfig[2];
+    data = await localRead('rulesetConfig');
+    if ( data ) {
+        rulesetConfig.version = data.version;
+        rulesetConfig.enabledRulesets = data.enabledRulesets;
+        rulesetConfig.autoReload = data.autoReload;
         return;
     }
-
-    // Legacy format. TODO: remove when next new format is widely in use.
-    const match = /^\|\|(?:example|ubolite)\.invalid\/([^\/]+)\/(?:([^\/]+)\/)?/.exec(
-        configRule.condition.urlFilter
-    );
-    if ( match === null ) { return; }
-    rulesetConfig.version = match[1];
-    if ( match[2] ) {
-        rulesetConfig.enabledRulesets =
-            decodeURIComponent(match[2] || '').split(' ');
+    data = await loadRulesetConfig.convertLegacyStorage();
+    if ( data ) {
+        rulesetConfig.version = data.version;
+        rulesetConfig.enabledRulesets = data.enabledRulesets;
+        rulesetConfig.autoReload = data.autoReload;
+        return;
     }
+    rulesetConfig.enabledRulesets = await defaultRulesetsFromLanguage();
+    rulesetConfig.firstRun = true;
+    sessionWrite('rulesetConfig', rulesetConfig);
+    localWrite('rulesetConfig', rulesetConfig);
 }
 
-async function saveRulesetConfig() {
+// TODO: To remove after next stable release is widespread (2023-06-04)
+loadRulesetConfig.convertLegacyStorage = async function() {
     const dynamicRuleMap = await getDynamicRules();
-    let configRule = dynamicRuleMap.get(CURRENT_CONFIG_BASE_RULE_ID);
-    if ( configRule === undefined ) {
-        configRule = {
-            id: CURRENT_CONFIG_BASE_RULE_ID,
-            action: {
-                type: 'allow',
-            },
-            condition: {
-                urlFilter: '',
-                initiatorDomains: [
-                    'ubolite.invalid',
-                ],
-                resourceTypes: [
-                    'main_frame',
-                ],
-            },
-        };
+    const configRule = dynamicRuleMap.get(CURRENT_CONFIG_BASE_RULE_ID);
+    if ( configRule === undefined ) { return; }
+    let rawConfig;
+    try {
+        rawConfig = JSON.parse(self.atob(configRule.condition.urlFilter));
+    } catch(ex) {
+        return;
     }
-    const rawConfig = [
-        rulesetConfig.version,
-        rulesetConfig.enabledRulesets,
-        rulesetConfig.autoReload,
-    ];
-    const urlFilter = self.btoa(JSON.stringify(rawConfig));
-    if ( urlFilter === configRule.condition.urlFilter ) { return; }
-    configRule.condition.urlFilter = urlFilter;
-
-    return dnr.updateDynamicRules({
-        addRules: [ configRule ],
+    if ( rawConfig === undefined ) { return; }
+    const config = {
+        version: rawConfig[0],
+        enabledRulesets: rawConfig[1],
+        autoReload: rawConfig[2],
+    };
+    localWrite('rulesetConfig', config);
+    sessionWrite('rulesetConfig', config);
+    dnr.updateDynamicRules({
         removeRuleIds: [ CURRENT_CONFIG_BASE_RULE_ID ],
     });
+    return config;
+};
+
+async function saveRulesetConfig() {
+    sessionWrite('rulesetConfig', rulesetConfig);
+    return localWrite('rulesetConfig', rulesetConfig);
 }
 
 /******************************************************************************/
@@ -185,6 +176,8 @@ function onMessage(request, sender, callback) {
             css: request.css,
             origin: 'USER',
             target: { tabId, frameIds: [ frameId ] },
+        }).catch(reason => {
+            console.log(reason);
         });
         return;
     }

platform/mv3/extension/js/dashboard.js

@@ -21,7 +21,6 @@
 
 'use strict';
 
-import { simpleStorage } from './storage.js';
 import { dom, qs$ } from './dom.js';
 
 /******************************************************************************/
@@ -82,9 +81,6 @@ const loadDashboardPanel = function(pane, first) {
         dom.cl.add(tabButton, 'selected');
         tabButton.scrollIntoView();
         document.querySelector('#iframe').contentWindow.location.replace(pane);
-        if ( pane !== 'no-dashboard.html' ) {
-            simpleStorage.setItem('dashboardLastVisitedPane', pane);
-        }
     };
     if ( first ) {
         return loadPane();

platform/mv3/extension/js/ext.js

@@ -61,4 +61,50 @@ function sendMessage(msg) {
 
 /******************************************************************************/
 
-export { browser, dnr, i18n, runtime, sendMessage };
+async function localRead(key) {
+    if ( browser.storage instanceof Object === false ) { return; }
+    if ( browser.storage.local instanceof Object === false ) { return; }
+    try {
+        const bin = await browser.storage.local.get(key);
+        if ( bin instanceof Object === false ) { return; }
+        return bin[key];
+    } catch(ex) {
+    }
+}
+
+async function localWrite(key, value) {
+    if ( browser.storage instanceof Object === false ) { return; }
+    if ( browser.storage.local instanceof Object === false ) { return; }
+    return browser.storage.local.set({ [key]: value });
+}
+
+/******************************************************************************/
+
+async function sessionRead(key) {
+    if ( browser.storage instanceof Object === false ) { return; }
+    if ( browser.storage.session instanceof Object === false ) { return; }
+    try {
+        const bin = await browser.storage.session.get(key);
+        if ( bin instanceof Object === false ) { return; }
+        return bin[key];
+    } catch(ex) {
+    }
+}
+
+async function sessionWrite(key, value) {
+    if ( browser.storage instanceof Object === false ) { return; }
+    if ( browser.storage.session instanceof Object === false ) { return; }
+    return browser.storage.session.set({ [key]: value });
+}
+
+/******************************************************************************/
+
+export {
+    browser,
+    dnr,
+    i18n,
+    runtime,
+    sendMessage,
+    localRead, localWrite,
+    sessionRead, sessionWrite,
+};