declarativeNetRequest.updateDynamicRules are not updating, how do I properly remove and add rules? - google-chrome-extension

Question

update: I noticed that the token is beinig passed on the first time I run itm, but no new tokens are being appended to my rules.
I have this chrome extension on Gmail where the user logs in and it return an access token, the token is passed to our API through HTTP Request, it works fine the first time around passing the access token, but if I don't refresh Gmail, after 1 hour the access token expires and I get 401 errors on my application. I have a function interceptURL that will match the url and give a refreshed token before the HTTP Request is made (or so I thought).
Maybe after 1h the access token is expired so calling refresh token wont generate a new token?
background script
function interceptURL(requestDetails: chrome.webRequest.WebRequestBodyDetails) {
console.log('intercepted: ' + requestDetails.url);
if (requestDetails.url.includes(liveApiUrl) || requestDetails.url.includes(testApiUrl)) {
chrome.runtime.sendMessage({ "message": "refresh_token" }, (token: string) => {
if (token == undefined) {
chrome.runtime.sendMessage({ "message": "get_token" });
}
});
}
}
chrome.webRequest.onBeforeRequest.addListener(
interceptURL,
{ urls: [liveApiUrl, testApiUrl] }
)
Here are my Rules
function GetInterceptRules(token: string) {
const allResourceTypes =
Object.values(chrome.declarativeNetRequest.ResourceType);
return [
{
id: 1,
priority: 1,
action: {
type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
requestHeaders: [
{
operation: chrome.declarativeNetRequest.HeaderOperation.SET,
header: 'Authorization',
value: 'Bearer ' + token,
},
]
},
condition: {
urlFilter: liveApiUrl,
initiatorDomains: ["mail.google.com"],
resourceTypes: allResourceTypes,
}
},
{
id: 2,
priority: 1,
action: {
type: chrome.declarativeNetRequest.RuleActionType.MODIFY_HEADERS,
requestHeaders: [
{
operation: chrome.declarativeNetRequest.HeaderOperation.SET,
header: 'Authorization',
value: 'Bearer ' + token,
},
]
},
condition: {
urlFilter: testApiUrl,
initiatorDomains: ["mail.google.com"],
resourceTypes: allResourceTypes,
}
}
];
My thought was:
1 - I give it a refresh token before every HTTP Request so when I update the dynamic rules, it would pass the new token. (that's what I current have)
2 - I could check when the access token was created and just make sure the code to get token run before the 1 hour ends. (Maybe not the best approach?)
To get the access token
chrome.identity.launchWebAuthFlow(
{
url: azureTokenAuthUrl,
interactive: isInteractive
},
(redirectURL: string) => {
let token: string = '';
if (redirectURL != null) {
let params = new URLSearchParams(redirectURL);
token = params.get("access_token");
}
console.log("acces_token", token);
console.log(redirectURL)
UpdateIntercept(token)
callback(token)
}
Manifest V3
"permissions": [
"webRequest",
"declarativeNetRequest",
"declarativeNetRequestWithHostAccess",
"identity",
"identity.email"
],
"background": {
"service_worker": "/static/js/Background.js"
},
"content_scripts": [
{
"matches": [ "<all_urls>" ],
"css": [ "/css/bootstrap-iso.css" ],
"js": [ "react.production.min.js", "react-bootstrap.min.js", "react-dom.production.min.js" ]
},
{
"matches": [ "*://mail.google.com/*" ],
"css": [ "/css/AuthButton.css" ],
"js": [ "/static/js/AuthButton.js" ]
},
{
"matches": [ "*://mail.google.com/*" ],
"js": [ "/static/js/PushNotification.js" ]
}
],
I've been searching around but can't seem to find a solution for my problem.
I tried using JWT to decode so I know it's expired.

Answer 1

Added the launchAuthFlow with interactivity false to my listener where I check if an email has been opened, if so, trigger launchAuthFlow appending the token to the HTTP Request