My question is regarding injecting Javascript into flutter by using WebView. Initially, this was my JS script, it doesn't return everything under the selector, part of the page is missing. However, when I check on the inspect element, the missing 'part' of the page is under the same selector.

 WebView(
    initialUrl: widget.url,
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController webViewController) {
      _controller = webViewController;
    },
    onPageFinished: (String url) async {
      try {
        // Inject JavaScript to keep only the desired element, for example, a <div> with a class or id
        await _controller.runJavascript("""
  
var siteContent = querySelector('site-content'); // Replace with the actual selector
document.body.innerHTML=""
document.body.append(siteContent)
var sideBar = document.querySelector('.main-sidebar'); // Replace with the actual selector
sideBar.remove()
 """);

        setState(() {
          isLoaded = true;
        });
      } catch (e) {
        setState(() {
          isLoaded = true;
        });

        print(e);
      }
    },
  ),

Then I saw one suggestion to add a return in the JS code, I managed to get the whole HTML page BUT it skips the rest of the JS script, like the .append and .remove statement.

I also tried running the JS script in the web console, and there is an error, could this be the reason why I am missing some part of the page ?

Refused to load plugin data from '' because it violates the following Content Security Policy directive: "object-src 'none'".

Does anyone know why does the return statement skips the remaining of the JS script? Thank you!