javascript - Azure DevOps WebExtension 使用 WebWorker

Question

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

处理大型repository的数据成本很高，所以想用一个WebWorker在Background进行计算。

但是当我调用 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 不允许你在从本地文件运行脚本时加载 web worker()，否则会出现这样的错误:

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

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