title: Impossible to call a worker from an injected JS file Via a chrome extension
body: <p>I have developped a chrome web extension, where I inject a .js in a website to automate some task. And it works well. But, whenever I put that tab in the background, it doesn't ! (It lags/skip setTimeout())</p>
  <p>So, after a bit of googling, I heard it was 'normal and intended behavior' and peoples suggested to use Web Workers.
  But now, when I try and inject a webworker, the site tells me it's impossible because of CSP directives</p>
  <p>here is a sample code :</p>
  <p><strong>injecter.js</strong> (that works out fine)</p>
  <pre class="lang-js prettyprint-override"><code>if(nbrTabs &gt; 0){
  
      chrome.tabs.executeScript(tabs[0].id, {file: &quot;worker.js&quot;}); 
      chrome.tabs.executeScript(tabs[0].id, {file: &quot;utilities.js&quot;});      
              
      DisableStart();
      EnableStop();
      save();
  }
  </code></pre>
  <p><strong>worker.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>
  function main(){                            
      
      setTimeout(function(){
          console.log(&quot;Do the things ...&quot;);
          buttonOnThePage.click();
      }, 1000);
  
      return null;
  }
  
  onmessage = function(e){
      console.log(&quot;Worker Start\n&quot;);
      main();
      postMessage(&quot;Worker End&quot;);
  }
  
  
  
  </code></pre>
  <p><strong>utilities.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>var worker = new Worker(&quot;./worker.js&quot;);
  
  worker.onmessage = function(e) {
      worker.terminate();
  };
  
  worker.postMessage('Start'); 
  </code></pre>
  <p>When using those, I get an error in the console saying</p>
  <pre><code>GET https://www.example.com/bar/utilities.js 404
  </code></pre>
  <p>So, I guess it doesn't work. So, I tried a second thing, where I have my worker AND my main 'thread' on the same file resulting in :</p>
  <p><strong>utilities.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>var string = `
  function main(){                            
      
      setTimeout(function(){
  
          console.log(&quot;Do the things ...&quot;);
          buttonOnThePage.click();
  
      }, 1000);
  
      return null;
  }
  
  onmessage = function(e){
      console.log(&quot;Worker Start\n&quot;);
      main();
      postMessage(&quot;Worker End&quot;);
  }`;
  
  var blob = new Blob([string], {type: 'application/javascript'});
  var worker = new Worker(URL.createObjectURL(blob));
  
  worker.onmessage = function(e) {
      worker.terminate();
  };
  
  worker.postMessage('Start'); 
  
  </code></pre>
  <p>But now, I have an error telling me
  &quot;Failed to construct 'Worker': Access to the script at 'blob:<a href="https://www.example.com/some-rando-strings%27" rel="nofollow noreferrer">https://www.example.com/some-rando-strings'</a> is denied by the document's Content Security Policy.&quot;</p>