Azure DevOps WebExtension 使用 WebWorker

Question

我想在 Azure DevOps 服务器上的 WebExtension 中使用 WebWorker。

处理大型仓库的数据成本很高，所以我想在后台使用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 似乎有问题。打电话的方式是否正确？ Worker 如何访问扩展内的 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：无法构造“Worker”：脚本位于 'http://136.310.18.216:8070/_apis/xxxx/static/js/WorkerLoadTree.js' 无法从源“null”访问。

这是关于跨域访问文件的非常正常的错误。使用 web worker 有一个限制：Same Origin Policy。而且浏览器也不允许创建一个带有指向不同域的 URL 的工作者。你的调用方式导致的这个“跨域”错误是不正确的。

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

Chrome 不允许您在从本地文件（）运行脚本时加载 Web Worker，否则错误将如下所示：

注意：我只是在我的本地机器上做一个例子。加载本地文件，即使使用相对 URL，也与使用 file: 协议加载文件相同。

您应该使用放置这些文件的网络服务器中的 url，例如：http://xxxx:xx/static/js/WorkerLoadTree.js。或者 chrome 会将这个名为 way 的本地文件视为跨域使用文件。

Answer 2

最后我停下来遵循 WebWorker 的方法。我无法让它在 Azure DevOps WebExtension 中工作。相反，我使用 requestIdleCallback / setTimeout 方法，这在我的用例中运行良好。

为此，您需要两个函数。

第一：

function TaskCaller() {
    //TASK CALLER
    TaskRunner(0, int Interations);
}

第二个：

function TaskRunner(xCount, xEnd) {
    //TASK RUNNER
    xCount++;

    //ENTER CODE HERE
    console.log(xCount)

    //NEXT ITERATION
    if (xCount < xEnd)
        if (xCount % 1000) setTimeout(function () { TaskRunner(xCount, xEnd) }, 0);
        else TaskRunner(xCount, xEnd);
}

我意识到对于任务来说，当任务运行器每 1000 次迭代调用一次超时就足够了。当跑步者在后台计算时，我仍然可以控制页面。

那里有更好的解决方案，例如background.js，但现在还可以。