Leveraging WebWorker in Azure DevOps WebExtension

I am attempting to employ a WebWorker within a WebExtension on an Azure DevOps Server.

Data processing for a large repository can be quite resource-intensive, prompting me to utilize a WebWorker for background calculations.

However, when I try to instantiate the WebWorker with 

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")

In Microsoft Edge browser, I encounter:

https://i.sstatic.net/EOswn.png

On Google Chrome, the error message provides more insights:

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

It appears that there is an issue with loading the WorkerLoadTree.js file. Can you confirm if the method of calling the worker is correct? How can the worker access a JavaScript file within an extension?

The file structure of my extension is as follows:

───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
        ...

Additional Information:

Azure DevOps Server 17.143.28912.1 (AzureDevOps2019.0.1)

javascriptazure-devops

Answer №1

Error: Unable to create 'Worker': The script located at '' cannot be accessed from the current origin 'null'.

This error typically occurs when attempting to access files from a different domain. Web workers are subject to the Same Origin Policy, meaning that the browser prohibits creating workers with URLs pointing to different domains. The error is triggered by an incorrect method of calling the file.

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

Chrome restricts the loading of web workers when running scripts from a local file, resulting in an error similar to the following:

https://i.sstatic.net/E64ys.png

Important: When referencing files locally, even with a relative URL, it is treated as loading a file using the file: protocol.

It is recommended to utilize URLs from the web server hosting the files, such as: 

http://xxxx:xx/static/js/WorkerLoadTree.js
. Otherwise, Chrome may interpret the local file reference as an attempt to access files across different domains.

Answer №2

After attempting the WebWorker approach without success within an Azure DevOps WebExtension, I decided to switch to using the requestIdleCallback / setTimeout method, which is proving to be effective for my needs.

To implement this, you will need to create two functions.

The first function:

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

And the second function:

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);
}

I found that for my task, it is sufficient for the task runner to call a timeout every 1000 iterations. This allows me to still interact with the page while the runner performs calculations in the background.

While there are more advanced solutions available like background.js, for now, this approach is working well for me.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Trigger a keypress event following the activation of a button

I've been trying to simulate the press of the backspace key on the keyboard after clicking a button, but all my attempts have been unsuccessful. Here is the code I'm using: function rtf(){ document.getElementById("u0u").focus(); $('#u0u ...

javascriptjqueryhtml

Anomalous behavior of buttons in react-redux

Currently, I have a basic counter set up in react-redux as part of my learning process with these frameworks. My goal is to create a pair of number input fields that determine the payload for an increment/decrement action sequence. The intended outcome is ...

javascripthtmlreactjsreduxreact-redux

Is it possible to invoke the created() function in Vue from another method?

Currently, I am developing an application in Vue. Upon loading the page, a cookie containing the user's zip code is retrieved and used to perform a search. However, users should also have the ability to change their zip code if it is incorrect. I woul ...

javascriptvue.jsjavascript-framework

Error: Next.js is throwing a SyntaxError due to encountering an unexpected token 'export'

I encountered an issue when trying to render the following code: SyntaxError: Unexpected token 'export' (project path)/node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js Everything seems to work as expected initially, but then ...

javascriptnode.jsreactjsnext.js

The issue with the error handler middleware is that it is failing to effectively manage and resolve

Recently, I started utilizing this npm package as a workaround for try-catch blocks and promises. However, it seems like the error handler is consistently inactive. Does anyone have any insights on where I might have gone wrong in this scenario? When I enc ...

javascriptnode.jsexpressasynchronousasync-await

I'm having trouble with my TextGeometry not displaying on screen. Can someone help me figure

Here is the code I am using for Three.js: <html> <head> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height: 100% } </style> ...

javascriptthree.js

Error: The request to /api/auth/login in Postman failed unexpectedly

As I am working on developing an app using node.js and express, I encountered an error while making post requests in Postman. Cannot POST /api/auth/login%0A Below are the details of my app's structure along with the files involved: app.js const ex ...

javascripthtmlnode.jsexpresspost

What is the process for adjusting the position following the modification of a table value in React?

In my React UI, I have set up two text fields for entering values. After saving the values, they are displayed in a table below (designed with antd). When I click on a record in the table to edit it, I want the data from that record to populate the text f ...

javascripthtmlcssreactjsantd

Tips for locating a key within an object that houses a specific value in its array

In my Coffeescript code, I have created the following Javascript object: urlSets = a: [ 'url-a.com' 'url-b.com' 'url-c.com' ] b: [ 'url-d.com' 'url-e.com' 'url-f.com&a ...

javascriptarrayscoffeescriptunderscore.jsjavascript-objects

Employing $http.post in conjunction with res.redirect without handling the promise fulfillment

When making an $http.post call to my server, I send user data like this: $http.post('/streamdb/create/',{user:$scope.user.username}) After performing some operations on the server and retrieving a specific id from the DB, I want the client to b ...

javascriptnode.jsangularjsexpressresponse.redirect

What is the reason for JSHint alerting me about utilizing 'this' in a callback function?

While working in my IDE (Cloud 9), I frequently receive warnings from JSHint alerting me to errors in my code. It is important to me to address these issues promptly, however, there is one warning that has stumped me: $("#component-manager tr:not(.edit-co ...

javascriptjqueryjshint

Child_process module spawn method in Node.js

When I attempt to play an audio stream using the mpg123 command, everything works perfectly fine. I have also implemented a method to terminate the process successfully. However, I am struggling to retrieve output from the executed command. Despite follow ...

javascriptnode.jsspawnraspberry-pi-zero

Using AJAX to add an event listener and passing parameters to a separate function

Short and sweet - I've got a loop that creates a series of dynamic buttons, and when one of them is clicked, I need to pass its id attribute to another file to generate a new page on the fly. Here's the code snippet: for (var i in data.contacts ...

javascriptajaxparameter-passingaddeventlistener

Prevent animations on child elements with Vue.js

I am dealing with a scenario where I want to remove the fade transition on a child div within a <transition> component. The reason for nesting it is to prevent layout flickering, which can be demonstrated in a fiddle if necessary. In the fiddle belo ...

javascriptvue.jsvuejs2css-transitions

Steps to resolve the "cannot get product" error on Heroku after submitting a value

view the image description hereI have been working on a MERN full stack project and everything was functioning correctly in my local environment. However, upon deploying it to Heroku, I encountered an error which is displayed below. All other APIs are fu ...

javascriptnode.jsreactjsherokumern

Transforming the API response

After making an Ajax call, the response received is: console.log(data); {"valid":true,"when":"Today"} Attempting to read the response like this: var res = data.valid; console.log(res); results in 'undefined' being displayed. To address this i ...

javascriptjqueryajax

Tips for adjusting the header color in materialize framework?

I've been working on a web template and I'm looking to customize the color displayed in the Android browser (maybe using JS?). The default color is blue. How can I go about changing it? https://i.sstatic.net/RxLbS.jpg Appreciate any help! ...

javascriptcssmaterial-designmaterialize

The integration of a side panel with a chrome extension is experiencing issues

I am working on a chrome extension with the following functionalities - Extract URL path from a specific webpage. (The webpage's URL remains constant) Open this URL in a new tab. It can be either http:// or https://. Embed an iframe containing a sim ...

javascripthtmlgoogle-chrome

Using AngularJS to implement ngView within a custom directive

I've been attempting to implement ng-view within a custom directive, but it doesn't seem to be functioning properly and I'm not receiving any console errors. Here's the code for my directive: (function() { 'use strict'; ...

javascriptangularjsangularjs-directiveng-view

What is the best way to combine a QR code and an existing image using Java script?

Looking for help in embedding a created QR code into an existing image. I am proficient in nodeJS, JavaScript, and jQuery. Any assistance would be greatly appreciated. ...

javascriptjquerynode.jsqr-code