localstorage in Manifest V3

[Divya Rijhwani]

Hello Team,

Can you please give me an example about How I can import other JS thing in service_worker or how I can use  "chrome.storage.local"  in service_worker itself.
Cause I have tried examples given on google and nothing works for me.

Below are the files for reference.. where "chrome.webRequest.onBeforeSendHeaders.addListener" no more work so need to work on get data from local-storage of other JS files by also using DNR API to work.

Manifest.json

{
    "name": "test",
    "description": "test",
    "version": "3.2.4",
    "manifest_version": 3,
    "icons": {
        "19": "public/resource/icon-19.png",
        "32": "public/resource/icon-32.png",
        "36": "public/resource/icon-36.png",
        "225": "public/resource/icon.png"
    },
    "action": {
        "default_icon": "public/resource/icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
    "activeTab",
    "storage",
    "declarativeNetRequest",
    "declarativeNetRequestFeedback",
    "tabs"
   
  ],
 "host_permissions": [
    "https://*/*",
    "http://*/*"
  ],
    "background": {
        "service_worker": "public/js/background.js",
        "type": "module"
    }
}


background.js

'use strict';

import './popup.js';
import './common.js';

const BLUE_URL_PREFIX = "";
const CHARLES_PROXY_BASE_URL = "";
const DIAGNOSTICS_VERSION_REGEX = ;
const GREEN_URL_PREFIX = "";
const GROUP_PREFIX_REGEX = ;
const INTEGRATION_BASE_URL = "";
const LOCALHOST_BASE_URL = "";
const PRODUCTION_BASE_URL = "";
const REQUEST_FILTER_URLS = [""];
const STAGING_BASE_URL = "";
const SPEED_PLATFORM_INTEGRATION_URL = "";
const API_GW_INTEGRATION_URL = "";
const API_GW_STAGING_URL = "";
const API_GW_PRODUCTION_URL = "";
const POM_PLATFORM_INTEGRATION_URL = "";
const POM_PLATFORM_STAGING_URL = "";
const POM_PLATFORM_PRODUCTION_URL = "";

const ENV_BASE_URLS = {
    "local": [LOCALHOST_BASE_URL, CHARLES_PROXY_BASE_URL],
    "integration": [INTEGRATION_BASE_URL, SPEED_PLATFORM_INTEGRATION_URL, API_GW_INTEGRATION_URL, POM_PLATFORM_INTEGRATION_URL],
    "staging": [STAGING_BASE_URL, API_GW_STAGING_URL, API_GW_INTEGRATION_URL, POM_PLATFORM_STAGING_URL],
    "production": [PRODUCTION_BASE_URL, API_GW_PRODUCTION_URL, POM_PLATFORM_PRODUCTION_URL]
};
const TOKEN_BASE_URLS = [CHARLES_PROXY_BASE_URL, LOCALHOST_BASE_URL, INTEGRATION_BASE_URL, STAGING_BASE_URL, PRODUCTION_BASE_URL, SPEED_PLATFORM_INTEGRATION_URL, API_GW_INTEGRATION_URL, API_GW_STAGING_URL, API_GW_PRODUCTION_URL, POM_PLATFORM_INTEGRATION_URL, POM_PLATFORM_STAGING_URL, POM_PLATFORM_PRODUCTION_URL];
const URL_PREFIXES = {
    "blue": BLUE_URL_PREFIX,
    "green": GREEN_URL_PREFIX
};

let beforeRequestHandler = function(details) {

    let url = details.url;
    // Do not redirect if this extension is disabled
    if (!getExtensionEnabled()) {
        return;
    }

    // Do not redirect for local requests
    if (ENV_BASE_URLS["local"].includes(getBaseUrlFromUrl(url))) {
        return;
    }

    // Do not redirect if the targeted Orc env is not selected
    if (!isUrlInScope(details.url.toLowerCase(), false)) {
        return;
    }

    // Do not redirect if a server group is not selected
    let serverGroupSelection = getServerGroupSelection();
    if (serverGroupSelection === "none") {
        return;
    }

    // Do not redirect if a server group prefix is already specified in the
    // URL, this can be from someone manually prepending "smartinet-g" OR
    // from a previous invocation of this method. This condition therefore
    // avoids an infinite redirect.
    if (url.match(GROUP_PREFIX_REGEX)) {
        return;
    }

    // Redirect the request, prepending the proper server group
    let parsedUrl = new URL(url);
    parsedUrl.pathname = URL_PREFIXES[serverGroupSelection] + parsedUrl.pathname;

    return getRedirectUrl(parsedUrl.href);
};

let beforeSendHeadersHandler = function(details) {

    let requestHeaders = details.requestHeaders;
    if (!getExtensionEnabled()) { // getExtensionEnabled from common.js
        return getRequestHeaders(requestHeaders);
    }
    let url = details.url.toLowerCase();
    if (!isUrlInScope(details.url, true)) {
        return getRequestHeaders(requestHeaders);
    }

    let token = getTokenFromRequestUrl(url);
    if (token) {
        addAuthorizationHeaderToRequestHeaders(requestHeaders, token)
    }

    let idToken = getIdTokenFromRequestUrl(url);
    if (idToken) {
        addIdentityHeaderToRequestHeaders(requestHeaders, idToken);
    }

    if (getHALMode()) {
        addAcceptHeaderToRequestHeaders(requestHeaders, "application/hal+json");
    }

    return getRequestHeaders(requestHeaders);
};

function addAuthorizationHeaderToRequestHeaders(requestHeaders, token) {

    requestHeaders.push({
        name: "Authorization",
        value: `Bearer ${token}`
    });
}

function addIdentityHeaderToRequestHeaders(requestHeaders, idToken) {

    requestHeaders.push({
        name: "X-Id-Token",
        value: idToken
    });
}

function addAcceptHeaderToRequestHeaders(requestHeaders, value) {

    requestHeaders.push({
        name: "Accept",
        value: value
    });
}

function getRedirectUrl(url) {
    return {
        redirectUrl: url
    };
}

function getRequestHeaders(requestHeaders) {
    return {
        requestHeaders: requestHeaders
    };
}

function getTokenFromRequestUrl(url) {
    let baseUrl = getBaseUrlFromUrl(url);
    let activeToken =  activeTab; //activeTab;   //"satTab";
    if (TOKEN_BASE_URLS.includes(baseUrl)) {
        return activeToken; // getToken from common.js
    }

    return null;
}

function getIdTokenFromRequestUrl(url) {
    let baseUrl = getBaseUrlFromUrl(url);
    let activeToken = (localStorage.getItem("activeTab") || defaultTab).replace("Tab", "");
    if (TOKEN_BASE_URLS.includes(baseUrl)) {
        return getIdToken(activeToken) || null;
    }

    return null;
}

function getBaseUrlFromUrl(url) {

    let parsedUrl = new URL(url);
    return parsedUrl.protocol + "//" + parsedUrl.host + "/";
}

function isUrlInScope(url, checkForDiagnosticsVersion) {

    let siteSelections = getSiteSelection(); //getSiteSelection from common.js
    if (siteSelections == null) {
        return false;
    }

    for (let i = 0; i < siteSelections.length; i++) {
        let siteSelection = siteSelections[i].toLowerCase();
        let siteSelectionUrls = ENV_BASE_URLS[siteSelection];


        if (siteSelectionUrls.includes(getBaseUrlFromUrl(url))) {
            if (!checkForDiagnosticsVersion) {
                return true;
            }

            // The diagnostics & version endpoints use different auth; Don't include the header
            return !url.match(DIAGNOSTICS_VERSION_REGEX);
        }
    }

    return false;
}

let requestFilter = {
    // Limiting request scope to Xfinity or localhost
    urls: REQUEST_FILTER_URLS
};

let extraInfoSpec = ['requestHeaders', 'blocking'];


chrome.declarativeNetRequest.getDynamicRules(function(rules) {
    rules => console.log("rules",rules);
    var surl = "";
    var token = getTokenFromRequestUrl(surl);
   
    var ruleIdx = 0;
    var existingRules = [];
    for (var i=0;i<rules.length;i++) {
        ruleIdx = rules[i].id;
        existingRules.push(rules[i].id);
    }
    ruleIdx++;
    chrome.declarativeNetRequest.updateDynamicRules({
    addRules:
        [
            {
                action: {
                    type: "modifyHeaders",
                    requestHeaders: [{"header": "Authorization", "operation": "set", "value": `Bearer ${token}`}]
                   
                },
                condition: {"regexFilter": "", "resourceTypes": ["main_frame"]},
                id: ruleIdx,
                priority: 1
            },
       
        ],
        removeRuleIds: existingRules
    });
});

console.log('Started', self);
self.addEventListener('install', function(event) {
  self.skipWaiting();
  console.log('Installed', event);
});
self.addEventListener('activate', function(event) {
  console.log('Activated',event);
});
self.addEventListener('push', function(event) {
  console.log('Push message received', event);
});
self.addEventListener('fetch', (event) => {
  // Send a message to the background script
  self.clients.matchAll().then((clients) => {

    for (const client of clients) {
      client.postMessage({ action: 'getData' });
    }
  });
});



//chrome.webRequest.onBeforeRequest.addListener(beforeRequestHandler, requestFilter, ['blocking']);
//chrome.webRequest.onBeforeSendHeaders.addListener(beforeSendHeadersHandler, requestFilter, extraInfoSpec);