I'm mocking a Chrome extension which should modify HTTP request headers dynamically. The extension works as expected with a static value provided in "modifyHeaders" rule, but I can't figure out how to calculate the value dynamically via function. All attempts leads to errors "Uncaught SyntaxError: Unexpected identifier 'getValue'" (if I define the function) or 'self' (if I embed the expression directly into the rule).

  const MY_CUSTOM_RULE_ID = 1
  chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds: [MY_CUSTOM_RULE_ID],
    addRules: [
        {
            id: MY_CUSTOM_RULE_ID,
            priority: 1,
            action: {
                type: "modifyHeaders",
                requestHeaders: [
                    {
                        getValue: async function() { return btoa(String.fromCharCode(...new Uint8Array((await self.crypto.subtle.digest("SHA-256", new TextEncoder().encode("my custom header value"))))));  },
                        operation: "set",
                        header: "my custom name",
                        value: await getValue()
                    }
                ]
            },
            condition: {
                "resourceTypes": ["main_frame", "sub_frame"]
            },
        }
      ],
  });

The above code is the current background.js. The final task implies that the value is calculated via crypto.

I'm mocking a Chrome extension which should modify HTTP request headers dynamically. The extension works as expected with a static value provided in "modifyHeaders" rule, but I can't figure out how to calculate the value dynamically via function. All attempts leads to errors "Uncaught SyntaxError: Unexpected identifier 'getValue'" (if I define the function) or 'self' (if I embed the expression directly into the rule).

  const MY_CUSTOM_RULE_ID = 1
  chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds: [MY_CUSTOM_RULE_ID],
    addRules: [
        {
            id: MY_CUSTOM_RULE_ID,
            priority: 1,
            action: {
                type: "modifyHeaders",
                requestHeaders: [
                    {
                        getValue: async function() { return btoa(String.fromCharCode(...new Uint8Array((await self.crypto.subtle.digest("SHA-256", new TextEncoder().encode("my custom header value"))))));  },
                        operation: "set",
                        header: "my custom name",
                        value: await getValue()
                    }
                ]
            },
            condition: {
                "resourceTypes": ["main_frame", "sub_frame"]
            },
        }
      ],
  });

The above code is the current background.js. The final task implies that the value is calculated via crypto.

• javascript
• google-chrome-extension
• chrome-declarativenetrequest

Share Improve this question Follow asked Mar 14 at 11:17 StanStan 8,7681010 gold badges6262 silver badges105105 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I think you cannot use a function inside chrome.declarativeNetRequest rules. The API requires static values, meaning all headers must be predefined.

Since declarativeNetRequest doesn’t support dynamic values, switch to chrome.webRequest.onBeforeSendHeaders, which allows modifying headers with a function:

chrome.webRequest.onBeforeSendHeaders.addListener(
  async function(details) {
    const encoder = new TextEncoder();
    const hashBuffer = await crypto.subtle.digest("SHA-256", encoder.encode("my custom header value"));
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashBase64 = btoa(String.fromCharCode(...hashArray));

    details.requestHeaders.push({ name: "my custom name", value: hashBase64 });
    return { requestHeaders: details.requestHeaders };
  },
  { urls: ["<all_urls>"] },
  ["blocking", "requestHeaders"]
);