Tampermonkey import - "violates the following Content Security Policy directive"

Question

// ==UserScript==
// @name         xxxxxx
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @include      *://*.zhihu.com/*
// @grant        none
// ==/UserScript==

(async () => {
    const { Octokit, App } = await import("https://esm.sh/octokit");
    debugger
  })();

console show Refused to load the script 'https://esm.sh/octokit' because it violates the following Content Security Policy directive: "script-src 'self' blob: *.zhihu.com ...... . Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

How do I fix this problem to import this module?

---

I found this a difficult problem, I tried GM_addElement, but it still didn't work.

GM_addElement('script', {
    textContent: `
    const main = async () => {
        const { Octokit, App } = await import("https://esm.sh/octokit");
    }
    main()
    `,
    type: 'text/javascript'
});

GM_addElement('script', {
    textContent: `
    import { Octokit } from "https://esm.sh/@octokit/rest";
    `,
    type: 'module'
});

https://github.com/Tampermonkey/tampermonkey/issues/881#issuecomment-1421983170

Answer 1

I think there is no solution now. A possible alternative is to convert module code using browserify. Or completely disable CSP(Modify existing content security policy (CSP) headers) like https://github.com/lisonge/vite-plugin-monkey#csp.