Add an option for inline scripts in html to be externalised
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 20.8k
- Forks
- 2.3k
- Avg merge
- 1d 16h
- Merged PRs (30d)
- 156
Description
I am trying to reuse a number of my svelte components in a Chrome extension that replaces the newtab page.
I am using a site generated with adapter-static, and the client side router disabled, but i still need javascript enabled for the likes of a search bar.
On a default build of a test page the Javascript does not work, and I see the following error in the extension console:
Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-mCb4RZPtIMMHYC2/zT6SdIhwTomYnh+ky3BLobKXNn0='), or a nonce ('nonce-...') is required to enable inline execution.
index.html:20 (anonymous function)
<script type="module">
Chrome is pushing the move to manifest v3, which has increased content security policies, one of which is to disallow the use of unsafe, hash, or nonce based exceptions in the content_security_policy.extension_pages (regardless of what the above error states, using any of those causes the extension to fail to be installed).
If however, I manually move the contents of that inline script into a file called init.js, and change the script to reference it:
<script type="module" src="/./app/init.js"></script>
then my extension works as expected.
The inline script appears to be hardcoded in render.js:
Ideally, there'd be a manifest v3 friendly way of running the inline script (which I have failed to find, but maybe someone else has worked around).
Failing that I'm asking for the option for the init code to be referenced in an external script, e.g.
<script context="module">
export const inline = false;
</script>
thanks.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/kit/src/runtime/server/page/render.js at the inline script referenced by the issue. Trace how that script is generated for adapter-static pages and determine where an external-script option could be configured. Done means the generated HTML can reference an external initialization script instead of embedding it, while preserving the existing behavior by default.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100