how to solve Cross-Origin Read Blocking (CORB)-CodePudding

I need to run javascript code on a webpage. This can be done using google chorme console by inspecting the page but I need to repeat this operation many time so I'm searching a more easy way. So I'm using this to create a bookmark, I can put it on the preferred page bar and execute javascript code in just a click. I need the code executed via the bookmark to call up a website containing the actual code to run. The code used to create the bookmark is this

javascript:(function(){
    varaddScript=function(filename){
        vare=document.createElement('script');
        e.type='text/javascript';
        e.src=filename;
        if(typeof(e)!=='undefined'){
            document.getElementsByTagName('head')[0].appendChild(e);
        }
    };
    // the actual page where the code is hosted
    addScript('https://sopralapanca.github.io/')
})()

As you can see I'm using github pages to store the actual code, but how to setup correctly the github webpage to execute the code? For the moment I want to just print something on the console with the console.log() method but every time I execute the bookmark I obtain the error

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://sopralapanca.github.io/ with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

The html page on github is just this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Yukon Autocomplete</title>
  </head>
  <body>
    <pre style="word-wrap: break-word; white-space: pre-wrap;">
      console.log('ciao come stai');
    </pre>
  </body>
</html>

EDIT after the answer of Ronnie Royston I'm able to execute basic javascript code from remote. Now the code that I bookmark is this

javascript:(function(){
    async function myFunction(){
      var remoteCode = await getHTML('https://sopralapanca.github.io/');
      var code = stripHtml(remoteCode);
      eval(code);
    }
    myFunction();

    function stripHtml(html){
       let tmp = document.createElement("DIV");
       tmp.innerHTML = html;
       return tmp.textContent || tmp.innerText || "";
    }

    function getHTML(url) {
        return new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open('get', url, true);
            xhr.responseType = 'document';
            xhr.onload = function () {
                var status = xhr.status;
                if (status == 200) {

                  resolve(xhr.response.documentElement.innerHTML);
                } else {
                    reject(status);
                }
            };
            xhr.send();
        });
    }
})();

Now the problem is when I need to execute jQuery code like this one

$('input[name=nomoredupes]').trigger('click');

I get the error

VM48:1651 Uncaught (in promise) ReferenceError: $ is not defined
    at eval (eval at myFunction (show:1:163), <anonymous>:1651:1)
    at myFunction (<anonymous>:1:163)

how to solve?

CodePudding user response：

You can do it like this. ...you can inject new elements as you wish once you have fetched it.

async function myFunction(){
  var remoteCode = await getHTML('https://sopralapanca.github.io/');
  console.log(remoteCode);
}
myFunction();

function getHTML(url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
        xhr.responseType = 'document';
        //xhr.responseType = 'json';
        xhr.onload = function () {
            var status = xhr.status;
            if (status == 200) {

              resolve(xhr.response.documentElement.innerHTML);
            } else {
                reject(status);
            }
        };
        xhr.send();
    });
}

CodePudding user response：

The value you assign to the src attribute of a script must be the URL to a JavaScript file.

The html page on github is… an HTML file.