Azure DevOps WebExtension 使用 WebWorker

Question

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

處理大型repository的數據開銷很大，所以想在后台用一個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: 無法構造“Worker”：無法從源“null”訪問“ http://136.310.18.216:8070/_apis/xxxx/static/js/WorkerLoadTree.js ”處的腳本。

這是跨域訪問文件的一個非常正常的錯誤。 使用 web worker 有一個限制：同源策略。 而且瀏覽器也不允許創建一個帶有指向不同域的 URL 的工作線程。 這種由您的調用方式引起的“跨域”錯誤是不正確的。

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

當從本地 file() 運行腳本時，Chrome 不允許您加載網絡工作者，否則錯誤將如下所示：

注意：我只是在我的本地機器上做一個例子。 加載本地文件，即使使用相對 URL，也與使用file:協議加載文件相同。

您應該使用來自這些文件所在的網絡服務器的 url，如下所示： http://xxxx:xx/static/js/WorkerLoadTree.js 。 或者 chrome 會認為這個本地文件調用方式為跨域使用文件。

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 ，但現在還可以。