javascript - Azure DevOps WebExtension 使用 WebWorker

Question

我想使用WebWorker里面 WebExtension在 Azure DevOps 服务器上。

处理大型存储库的数据成本很高，所以我想使用WebWorker在后台计算。

但是当我调用new Worker("static/js/WorkerLoadTree.js")时:

//CREATE WORKER
console.log("BEFORE NEW WORKER CALL")
BackgroundWorker = new Worker("static/js/WorkerLoadTree.js");
console.log("AFTER NEW WORKER CALL")

我在 Edge 中看到:

我在 Chrome 中看到了更多详细信息:

VSS.SDK.min.js:2 Rejected XDM promise with no reject callbacks                                                  n._reject @ VSS.SDK.min.js:2
VSS.SDK.min.js:2 DOMException: Failed to construct 'Worker': Script at 'http://136.310.18.216:8070/_apis/public/gallery/publisher/user/extension/SearchRepos/1.0.13/assetbyname/static/js/WorkerLoadTree.js' cannot be accessed from origin 'null'.
    at WorkerStart (http://136.310.18.216:8070/_apis/public/gallery/publisher/user/extension/SearchRepos/1.0.13/assetbyname/static/js/WorkerMain.js:13:32)
    at FillCode (http://136.310.18.216:8070/_apis/public/gallery/publisher/user/extension/SearchRepos/1.0.13/assetbyname/index.html:284:3)
    at http://136.310.18.216:8070/_apis/public/gallery/publisher/user/extension/SearchRepos/1.0.13/assetbyname/index.html:144:6
    at n._wrapCallback (http://136.310.18.216:8070/_apis/public/gallery/publisher/user/extension/SearchRepos/1.0.13/assetbyname/lib/VSS.SDK.min.js:2:951)
    at Array.<anonymous> (http://136.310.18.216:8070/_apis/public/gallery/publisher/user/extension/SearchRepos/1.0.13/assetbyname/lib/VSS.SDK.min.js:2:647)
    at http://136.310.18.216:8070/_apis/public/gallery/publisher/user/extension/SearchRepos/1.0.13/assetbyname/lib/VSS.SDK.min.js:2:1383            n._reject @ VSS.SDK.min.js:2
Failed to load resource: net::ERR_UNEXPECTED                                                            :8070/DefaultCollection/_apis/Contribution/HierarchyQuery/project/09737d31-b39f-49a1-8973-4a702cc4be92:1

加载WorkerLoadTree.js似乎有问题。调用方式是否正确？工作人员如何访问扩展内的 js 文件？

我的扩展文件结构如下所示:

───SearchRepos
    │   icon.png
    │   index.html
    │   SearchRepos-1.0.14.vsix
    │   package-lock.json
    │   package.json
    │   vss-extension.json
    │
    ├───node_modules
    │   └───vss-web-extension-sdk
    │       ...
    │
    └───static
        ├───css
        │       main.css
        │
        ├───js
        │       main.js
        │       WorkerLoadCode.js <- WebWorker
        │       WorkerLoadTree.js <- WebWorker
        │       WorkerMain.js
        │
        ├───lib
        │       jquery-3.4.1.min.js
        │       jstree.js
        │
        └───themes
        ...

元:

Azure DevOps 服务器 17.143.28912.1 (AzureDevOps2019.0.1)

Answer 1

DOMException: Failed to construct 'Worker': Script at 'http://136.310.18.216:8070/_apis/xxxx/static/js/WorkerLoadTree.js' cannot be accessed from origin 'null'.

这是关于跨域访问文件的非常正常的错误。使用 Web Worker 有一个限制:Same Origin Policy 。而且浏览器不允许创建具有指向不同域的 URL 的工作程序。这个“跨域”错误是你的调用方式不正确造成的。

BackgroundWorker = new Worker("static/js/WorkerLoadTree.js");

Chrome 不允许您在从本地 file() 运行脚本时加载 Web Worker，否则错误将如下所示:

注意:我只是在本地计算机上做了一个示例。加载本地文件(即使使用相对 URL)与使用 file: 协议(protocol)加载文件相同。

您应该使用这些文件所在的网络服务器中的 URL，如下所示:http://xxxx:xx/static/js/WorkerLoadTree.js。或者chrome会认为这个本地文件调用方式为跨域使用文件。