Adding two script for Same route

Hi,

I have two worker script which is applicable to same route. How to add those two script in a route?

First Script Name - A

addEventListener('fetch', event => {
  event.passThroughOnException()
  event.respondWith(blockCountries(event.request))
})

const countries = new Set([
  "AT", "BE", "BG", "HR", "CY", "CZ", "DK", "EE", "FI", 
  "FR", "DE", "GR", "HU", "IE", "IT", "LV", "LT",  "LU", 
  "MT", "NL", "PL", "PT", "RO", "SK", "SI", "ES", "SE", "GB"
])

async function blockCountries(request) {
  // Get country value from request headers
  let country = request.headers.get('cf-ipcountry')

  // Find out if country is on the block list
  let countryBlocked = countries.has(country)

  // If it's on the blocked list, add a cookie banner
  if (countryBlocked){
    let response = await fetch(request)
    let body = await response.text()
    body = body.replace("</body>", "<script async id=\"cookiebanner\" src=\"https://cdnjs.cloudflare.com/ajax/libs/cookie-banner/1.2.2/cookiebanner.min.js\" data-moreinfo=\"https://trending.fropky.com/privacy-policy/\" data-message=\"We use cookies to improve your browsing experience.\"></script></body>")
    return new Response(body, response)
  }

  // Catch-all return of the original response
  return await fetch(request)
}

Another Script Name - B

/**
 * Define regular expressions at top to have them precompiled.
 */
const urlRegex = new RegExp('^(refreshce|gclid|cx|ie|cof|siteurl|zanpid|origin|utm_[a-z]+|fbid|fbclid|mr:[A-z]+|ref(id|src))$');

addEventListener('fetch', event => {
    event.passThroughOnException()
    event.respondWith(handleRequest(event.request))
})
  
  
async function handleRequest(request) {
    
    let url = new URL(request.url)
    
    url = await normalizeUrl(url)
    
    let modifiedRequest = new Request(url, request)
  
    return fetch(modifiedRequest)
}

async function normalizeUrl(url) {
    let deleteKeys = []
    
    for(var key of url.searchParams.keys()) { 
        if(key.match(urlRegex)){
            deleteKeys.push(key)
        }
    }

    deleteKeys.map(k => url.searchParams.delete(k))

    return url
}
addEventListener('fetch', event => {
  event.passThroughOnException()
  event.respondWith(blockCountries(event.request))
  event.respondWith(handleRequest(event.request))
})

Can two event.respondWith call in one script? like that?

That doesn’t work as far as I know.

Then how to add two script to same route? Something like?

addEventListener('fetch', event => {
  event.passThroughOnException()
  event.respondWith(blockCountries(event.request))
})

const countries = new Set([
  "AT", "BE", "BG", "HR", "CY", "CZ", "DK", "EE", "FI", 
  "FR", "DE", "GR", "HU", "IE", "IT", "LV", "LT",  "LU", 
  "MT", "NL", "PL", "PT", "RO", "SK", "SI", "ES", "SE", "GB"
])

const urlRegex = new RegExp('^(refreshce|gclid|cx|ie|cof|siteurl|zanpid|origin|utm_[a-z]+|fbid|fb

async function blockCountries(request) {
  // Get country value from request headers
  let country = request.headers.get('cf-ipcountry')

  // Find out if country is on the block list
  let countryBlocked = countries.has(country)
  
  let url = new URL(request.url)
  
  url = await normalizeUrl(url)
  
  let modifiedRequest = new Request(url, request)

  // If it's on the blocked list, add a cookie banner
  if (countryBlocked){
    let response = await fetch(request)
    let body = await response.text()
    body = body.replace("</body>", "<script async id=\"cookiebanner\" src=\"https://cdnjs.cloudflare.com/ajax/libs/cookie-banner/1.2.2/cookiebanner.min.js\" data-moreinfo=\"https://travel.fropky.com/privacy-policy\" data-message=\"We use cookies to improve your browsing experience.\"></script></body>")
    return new Response(body, response)
  }

  // Catch-all return of the original response
  return await fetch(modifiedRequest)
}



async function normalizeUrl(url) {
    let deleteKeys = []
    
    for(var key of url.searchParams.keys()) { 
        if(key.match(urlRegex)){
            deleteKeys.push(key)
        }
    }

    deleteKeys.map(k => url.searchParams.delete(k))

    return url
}

You either merge the scripts (with the possibility of still doing multiple functions since JS allows it obviously) or, but I haven’t actually tried it, add the scripts to the same route in the dashboard. It may not work if the route is exactly the same.

1 Like

Can you tell me the difference between -

return await fetch(modifiedRequest)

and

return fetch(modifiedRequest)

That is JavaScript’s syntax.

When you do a return, you don’t need to use the await.

2 Likes

@user3011 - you’ll want to merge those scripts together, into a single script. You won’t be able to run two scripts at the same route (one will be favored over the other by route precedence… it’s complicated :slight_smile: ), and the fetch event should only have respondWith called once. Hope that helps!

2 Likes

Thanks for having this sorted out.