How can I inject a function into a script tag without including the wrapper syntax?

Question

In this weird situation, I need to convert a JS function into a string, and then then that string into a dynamically generated <script> tag (which uses type javascript/worker so as to not be executed).

I'm working on a user script, injecting code to create a shared web worker between two third party sites. The thing about user scripts is you usually just want to use one file for the script's functionality, and web workers like to use a separate JS file for the worker. Well there's a way around that using a Blob. However, remember I'm only working with a script file, not an HTML file for the user script, so I want to store this part (the shared worker code) as a function in my script:

var worker = function() {
  self.addEventListener('connect', function(e) {
    var port = e.ports[0];
    port.addEventListener('message', function(e) {
      var message = e.data;
      port.postMessage(message);
    });
    port.start();
  });
};

then use the toString() on it so I can inject it into a dynamically generated script tag in the third party pages, so it ends up like this without the script calling on any extra files:

<script id="worker1" type="javascript/worker">
    self.addEventListener('connect', function(e) {
        var port = e.ports[0];
        port.addEventListener('message', function(e) {
            var message = e.data;
            port.postMessage(message);
        });
        port.start();
    });
</script>

However using the toString() method results in the word function being included, as shown in this example:

Remember I was going to append the function to a script tag with type javascript/worker instead of text/javascript so the function wouldn't be executed until it was converted to a blob and used as a file source for the worker, but here I'm going to use text/javascript so you can see the error when it executes.

var worker = function() {
  self.addEventListener('connect', function(e) {
    var port = e.ports[0];
    port.addEventListener('message', function(e) {
      var message = e.data;
      port.postMessage(message);
    });
    port.start();
  });
};

var func = worker.toString();
var script = document.createElement("script");
script.type = "text/javascript";
script.id = "worker1";
$("head").append(script);

$('body').append(script);
$('#worker1').append(func);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

---

Just so you can understand what I'm doing, because it might be confusing, a function like this would then convert the above non-executed script tag into a Blob and use that instead of an external file to create the shared worker:

var blob = new Blob([document.querySelector('#worker1').textContent], 
{ type: "text/javascript" });
var sharedWorker = new SharedWorker(window.URL.createObjectURL(blob));

---

So, how can I inject the contents of the function into a script tag without including the function wrapper syntax(function (){)?

Answer 1

You can use string's methods to do this:

I think this can help you or something like this, to remove the function name.

function test(){
      console.log('TEST TEST');
}

    var fBody = test.toString()
    var index = fBody.indexOf('{');
    var functionBodyAsArray = fBody.substring(index + 1);
    functionBodyAsArray = functionBodyAsArray.substring(0, functionBodyAsArray.length - 1);

    console.log(functionBodyAsArray );