How can I replace my webRequest blocking with declarativeNetRequest?

Question

I'm try to migrate my chrome extension to Manifest V3, and having some troubles with webRequest. I don't know how to replace the below source code to declarativeNetRequest. Also, what should I add to my manifest.json to make this work. Because when I read on the Chrome Developers, it mentions some thing about rules, and I don't know what those rules are. Thank you so much for your help

chrome.webRequest.onHeadersReceived.addListener(info => {
  const headers = info.responseHeaders; // original headers
  for (let i=headers.length-1; i>=0; --i) {
      let header = headers[i].name.toLowerCase();
      if (header === "x-frame-options" || header === "frame-options") {
        headers.splice(i, 1); // Remove the header
      }
      if (header === "content-security-policy") { // csp header is found
          // modifying frame-ancestors; this implies that the directive is already present
          headers[i].value = headers[i].value.replace("frame-ancestors", "frame-ancestors " + window.location.href);
      }
  }

  // Something is messed up still, trying to bypass CORS when getting the largest GIF on some pages
  headers.push({
    name: 'Access-Control-Allow-Origin',
    value: window.location.href
  })
  // return modified headers
  return {responseHeaders: headers};
}, {
    urls: [ "<all_urls>" ], // match all pages
    types: [ "sub_frame" ] // for framing only
}, ["blocking", "responseHeaders"]);

IMAGE OF THE SOURCE CODE