如何解决CORB跨源读取阻塞及jQuery $未定义问题

问题背景 #

我需要重复在网页执行JavaScript代码，通过书签工具加载GitHub Pages托管的代码。初始遇到Cross-Origin Read Blocking (CORB)错误，修改书签代码后能执行基础JS，但运行$('input[name=nomoredupes]').trigger('click');时，出现错误：VM48:1651 Uncaught (in promise) ReferenceError: $ is not defined。

相关代码 #

初始书签代码

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);
        }
    };
    addScript('https://sopralapanca.github.io/')
})()

修改后书签代码

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();
        });
    }
})();

GitHub Pages上的HTML页面

<!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>

解决方案 #

错误核心原因是目标网页未加载jQuery库，导致$这个全局符号未定义。下面提供两种可行解决方式：

方案一：在书签脚本中先加载jQuery #

修改书签代码，在拉取并执行远程代码前，先确保jQuery已注入页面：

javascript:(function(){
    async function myFunction(){
        // 先确保jQuery加载完成
        await loadjQuery();
        // 再获取并执行远程代码
        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();
        });
    }

    // 封装加载jQuery的函数
    function loadjQuery() {
        return new Promise((resolve, reject) => {
            // 先检查页面是否已经有jQuery
            if (typeof $ !== 'undefined') {
                resolve();
                return;
            }
            // 创建script标签加载官方CDN的jQuery
            const script = document.createElement('script');
            script.src = 'https://code.jquery.com/jquery-3.7.1.min.js';
            script.onload = () => resolve();
            script.onerror = () => reject('加载jQuery失败');
            document.head.appendChild(script);
        });
    }
})();

方案二：在远程代码中处理jQuery依赖 #

直接修改GitHub Pages上的代码，让它自己检测并加载jQuery，再执行目标逻辑：

<!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;">
      // 定义要执行的核心逻辑
      function runMyCode() {
          $('input[name=nomoredupes]').trigger('click');
          console.log('ciao come stai');
      }

      // 检测jQuery是否存在，不存在则加载
      if (typeof $ === 'undefined') {
          const script = document.createElement('script');
          // 使用稳定版jQuery的CDN地址
          script.src = 'https://code.jquery.com/jquery-3.7.1.min.js';
          script.onload = runMyCode;
          document.head.appendChild(script);
      } else {
          // 已存在jQuery，直接执行
          runMyCode();
      }
    </pre>
  </body>
</html>

额外注意事项 #

• 尽量使用稳定版本的jQuery，避免加载测试版或过时版本，减少兼容性问题
• 如果目标页面已经加载了其他版本的jQuery，可能会出现冲突，此时可以用jQuery.noConflict()来隔离：

  const $j = jQuery.noConflict();
  $j('input[name=nomoredupes]').trigger('click');
  

内容的提问来源于stack exchange，提问作者JayJona