🧩 Plasmo Developers•16mo ago

declarativeNetRequest

I want to use the declarativeNetRequest API, and I have it working for chrome, but when I test it on firefox, its not working:

async function setRedirectRule(newRedirectUrl: string) {
  let newRedirectRule = {
    id: RULE_ID,
    priority: 1,
    action: {
      type: "redirect",
      redirect: { url: newRedirectUrl }
    },
    condition: {
      urlFilter: "*://*/*",

      resourceTypes: ["main_frame"]
    }
  }

  try {
    chrome.declarativeNetRequest.updateDynamicRules({
      removeRuleIds: [RULE_ID],
      addRules: [newRedirectRule]
    })
    const currentRules = await chrome.declarativeNetRequest.getDynamicRules()
    console.log("Redirect rule updated")
    console.log("Current rules:", currentRules)
  } catch (error) {
    console.error("Error updating redirect rule:", error)
  }
}

async function setRedirectRule(newRedirectUrl: string) {
  let newRedirectRule = {
    id: RULE_ID,
    priority: 1,
    action: {
      type: "redirect",
      redirect: { url: newRedirectUrl }
    },
    condition: {
      urlFilter: "*://*/*",

      resourceTypes: ["main_frame"]
    }
  }

  try {
    chrome.declarativeNetRequest.updateDynamicRules({
      removeRuleIds: [RULE_ID],
      addRules: [newRedirectRule]
    })
    const currentRules = await chrome.declarativeNetRequest.getDynamicRules()
    console.log("Redirect rule updated")
    console.log("Current rules:", currentRules)
  } catch (error) {
    console.error("Error updating redirect rule:", error)
  }
}

On chrome the new rule appears when I log currentRules, but on Firefox it's empty, not sure why it's not updating.

11 Replies

The Coding SlothOP•16mo ago

Found the solution. It's a simple host permission issue. Chrome gives you these permissions automatically when you're developing, but on firefox you have to give permission to each website.

Arcane•16mo ago

@thecodingsloth has reached level 1. GG!

BozoWithTheBanjo•9mo ago

Hey @The Coding Sloth Did you manage to get this to work? I have a similar case. How can I use the declarativeNetRequest to generate dynamic rules that work on both chrome and Firefox? I want to redirect network calls to my local server JS script when I am prototyping, but when I am not, I want to use a static link to my website, I will have a toggle button to determine which URL to redirect to.

async function setRedirectRule(newRedirectUrl: string) {
  let newRedirectRule: chrome.declarativeNetRequest.Rule = {
    id: RULE_ID,
    priority: 1,
    action: {
      type: chrome.declarativeNetRequest.RuleActionType.REDIRECT,
      redirect: { url: newRedirectUrl }
    },
    condition: {
      urlFilter: "*://*/*",

      resourceTypes: [chrome.declarativeNetRequest.ResourceType.MAIN_FRAME]
    }
  }

  try {
    chrome.declarativeNetRequest.updateDynamicRules({
      removeRuleIds: [RULE_ID],
      addRules: [newRedirectRule]
    })
    const currentRules = await chrome.declarativeNetRequest.getDynamicRules()
    console.log("Redirect rule updated")
    console.log("Current rules:", currentRules)
  } catch (error) {
    console.error("Error updating redirect rule:", error)
  }
}

async function setRedirectRule(newRedirectUrl: string) {
  let newRedirectRule: chrome.declarativeNetRequest.Rule = {
    id: RULE_ID,
    priority: 1,
    action: {
      type: chrome.declarativeNetRequest.RuleActionType.REDIRECT,
      redirect: { url: newRedirectUrl }
    },
    condition: {
      urlFilter: "*://*/*",

      resourceTypes: [chrome.declarativeNetRequest.ResourceType.MAIN_FRAME]
    }
  }

  try {
    chrome.declarativeNetRequest.updateDynamicRules({
      removeRuleIds: [RULE_ID],
      addRules: [newRedirectRule]
    })
    const currentRules = await chrome.declarativeNetRequest.getDynamicRules()
    console.log("Redirect rule updated")
    console.log("Current rules:", currentRules)
  } catch (error) {
    console.error("Error updating redirect rule:", error)
  }
}

If I put this into the background.ts it works for chrome, every time I open a new tab it just redirects to google. But it doesn't work for firefox. This is in my package.json:

"manifest": {
    "host_permissions": [
      "https://*/*"
    ],
    "permissions": [
      "tabs",
      "declarativeNetRequest"
    ]
  }

"manifest": {
    "host_permissions": [
      "https://*/*"
    ],
    "permissions": [
      "tabs",
      "declarativeNetRequest"
    ]
  }

The Coding SlothOP•9mo ago

I did figure it out. It seems that by default Firefox doesn’t give this permission automatically like chrome So you’ll need the user to allow these permissions

BozoWithTheBanjo•9mo ago

Hey, thank you for answering!