javascript - 加载 CDN 上托管的 JS 库的本地版本

Question

我想制作一个加载本地 JS 库而不是 CDN 上托管的插件。例如，加载我自己的此处托管的脚本版本 https://developers.google.com/speed/libraries/devguide?csw=1#Libraries 。

我想到的一种方法是监听所有请求，如下面的示例所示，但我不知道如何告诉浏览器加载库的本地版本。

appAPI.onRequest(function(resourceUrl, tabUrl) {

  if (resourceUrl.match(/.*/)) {
  //Load the local version of the libraries used by the website

  }
});

我还发现了与我在演示版本中想要做的类似的事情，但我不知道这是否是一个可行的选择。

appAPI.resources.addInlineJS('Resources/jquery-2.1.1.min.js');

Answer 1

您对如何实现目标有正确的想法。原则上可以使用appAPI.webRequest.onRequest方法来阻止页面资源并在其位置注入(inject)您自己的版本。存在潜在的副作用，例如页面加载脚本顺序不正确，这可能会影响其整体功能。

以下代码按原样提供，未经测试。另请注意，在 Internet Explorer 上，如果本地库由于其最大字符串长度而较长，则该解决方案可能不起作用。

background.js:

// Monitor page resource requests
appAPI.webRequest.onRequest.addListener(function(details, opaque) {\
    // Check if the request is for loadable local resource
    for (var i = 0; i < opaque.resource.length; i++) {
        if (details.requestUrl.indexOf(opaque.resource[i].src) !== -1) {
            // Load local resource
            appAPI.resources.addInlineJS(opaque.resource[i].local);
            // Block original request
            return {
                cancel: true
            };
        }
    }
}, {
    resource: [ // List of loadable local resources
        {
            src: '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',
            local: 'local/jquery-2.1.1.min.js'
        }
    ]
});

[披露:我是 Crossrider 员工]