Import JS file from within an injected JS

Question

I have some "greases" (JS/CSS adaptations) which I inject by an addon into pages of a certain domain. Now my colleagues want to use them, too. In order to deploy changes and updates on this adaptations dynamically I've published a CSS and a JavaScript file which I want to import from within the addon.

This works fine with the CSS (@import url('https://contoso.com/ownstyle.css')), but the JS import import from 'https://contoso.com/ownscript.js) only results in "SyntaxError: Cannot use import statement outside a module".

I was consulting this ES6: import module from URL but the solution here demands a tagged import from within the page. Is there a way to import it from within the addons injected JS?

Do You mean if the fetched code is available but not feasible? No, the `ownscript.js` is not loaded at all. — Robbit, May 16 '23 at 15:28

score 0 · Answer 1 · answered May 17 '23 at 00:02

0

Okay, so to import a script there's the 3 line function below and an example usage

Does this work to accomplish your goal?

async function require(url){
  let module={exports:{}}, {exports}=module
  eval( await(await fetch(url)).text() )
  return module.exports
}
let url="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.4/d3.min.js";
require(url)
.then(result=>{
  console.log(Object.keys(result))
  //do things with resultant export
})

answered May 17 '23 at 00:02

The Bomb Squad

4,192
1
9
17

Thank You very much, but regrettably this doesn't work. I solved it now with hosting the script on the same host now (which is a very inconvenient way in my setup). – Robbit May 30 '23 at 14:15

Import JS file from within an injected JS

1 Answers1