GithubHelp home page GithubHelp logo

michmich112 / sveltekit-adapter-chrome-extension Goto Github PK

View Code? Open in Web Editor NEW
101.0 5.0 17.0 68 KB

Sveltekit adapter for making chrome extensions

License: MIT License

JavaScript 100.00%
svelte sveltekit chrome-extensions

sveltekit-adapter-chrome-extension's Introduction

sveltekit-adapter-chrome-extension

Adapter for SvelteKit apps that prerenders your site as a collection of static files and removes inline scripts to comply with content source policies of Chrome extensions using manifest v3.

Based on @sveltekit/adapter-static. Credit goes to these people for their hard work to make Svelte so great

🚧 If you are using SvelteKit v1.0.0+, make sure to set your prerender=true for every page reference by your extension so SvelteKit generates the HTML files. (c.f. Issue #27)

Usage

Install with npm i -D sveltekit-adapter-chrome-extension, then add the adapter to your svelte.config.js:

// svelte.config.js
import adapter from "sveltekit-adapter-chrome-extension";

export default {
  kit: {
    adapter: adapter({
      // default options are shown
      pages: "build",
      assets: "build",
      fallback: null,
      precompress: false,
      manifest: "manifest.json",
    }),
    appDir: "app",
  },
};

Options

pages

The directory to write prerendered pages to. It defaults to build.

assets

The directory to write static assets (the contents of static, plus client-side JS and CSS generated by SvelteKit) to. Ordinarily this should be the same as pages, and it will default to whatever the value of pages is, but in rare circumstances you might need to output pages and assets to separate locations.

fallback

Specify a fallback page for SPA mode, e.g. index.html or 200.html or 404.html.

precompress

If true, precompresses files with brotli and gzip. This will generate .br and .gz files.

manifest

Specify manifest file name if you want different manifests for different target platforms, e.g. chrome_manifest.json, firefox_manifest.json. This file name must match one that is present in the static directory (the dir containing your static files). The selected target file will be renamed to manifest.json in the build directory, and all other .json files with manifest in the name won't be copied.

License

MIT

sveltekit-adapter-chrome-extension's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

sveltekit-adapter-chrome-extension's Issues

index.html will not generate unless prerender: { default: true }

Please correct the documentation to show a working config for Svelte's current stock configuration

import adapter from 'sveltekit-adapter-chrome-extension';

export default {
  kit: {
    adapter: adapter({
      // default options are shown
      pages: "build",
      assets: "build",
      fallback: null,
      precompress: false,
    }),
    appDir: "app",
    prerender: { default: true },
  },
};

Dependency Conflict with @sveltejs/kit and @sveltejs/adapter-static in sveltekit-adapter-chrome-extension

While installing.

$ npm i -D sveltekit-adapter-chrome-extension

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @sveltejs/[email protected]
npm ERR! node_modules/@sveltejs/kit
npm ERR!   dev @sveltejs/kit@"^2.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @sveltejs/kit@"^1.5.0" from @sveltejs/[email protected]
npm ERR! node_modules/@sveltejs/adapter-static
npm ERR!   peer @sveltejs/adapter-static@"^2.0.1" from [email protected]
npm ERR!   node_modules/sveltekit-adapter-chrome-extension
npm ERR!     dev sveltekit-adapter-chrome-extension@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

We need to update the versions of @sveltejs/kit, @sveltejs/adapter-static, and sveltekit-adapter-chrome-extension in your package.json file to be compatible with each other.

no index.html in build directory

just start working with this with the lastest version of sveltekit
npm run build don't generate index.html in the build directory
do I miss something ?

404 /options/index.html (linked from /options) error

I have stumbled on a build problem -- whenever you have an internal extensions link, it results in a 404 error on build:

> Using sveltekit-adapter-chrome-extension
> 404 /options/index.html (linked from /options)

An error is also thrown for the extension:
image

A minimal test case is attached:

  1. Unzip
  2. npm install
  3. npm run dev:extension

sveltekit-template.zip

@sveltejs/kit 1.0.0-next.463 breaking changes

Breaking change with @sveltejs/kit 1.0.0-next.463
C.f. #12

This was using the latest version of SvelteKit (@sveltejs/kit 1.0.0-next.463). Steps to reproduce include:

  1. Initialize a new Svelte app (skeleton project with typescript, eslint, and prettier), pnpm create svelte@latest my-app
  2. Install this package, pnpm add -D sveltekit-adapter-chrome-extension
  3. Create a manifest in the static folder and copy over the documented configuration into the Svelte config file
  4. Start the dev server or try building for production and this error will occur:

Screenshot 2022-09-02 at 4 09 13 PM

I rolled SvelteKit back to @sveltejs/kit 1.0.0-next.454 and followed the exact reproduction steps without error and the index.html file appears in the build folder, as it should. This SvelteKit version appears to be fine with the current version of this package.

Unable to find the app.html in the build dir

Hi,

I'm a react developer seduced by the svelte syntax, so I thought I'd write my next chrome extension with it.

My build directory is missing the html file:
image

I started a new project in a few steps:
npm init svelte@latest
image

pnpm i -D sveltekit-adapter-chrome-extension
changed the svelte.config.js and added a manifest.json to the static dir
pnpm run build

image

Did I miss something in the process? I can't find the html file

Here's my project structure:
image

sed command in `replace-background-path` fails when running `npm run dev`

OS: linux
sed version: sed (GNU sed) 4.9

> cd build; sed -i "" "s#\$BACKGROUND_PATH#$(find app -wholename '*/immutable/background.*.js')#g" manifest.json; cd -

sed: can't read s#$BACKGROUND_PATH#app/immutable/background.b7e61a54.js#g: No such file or directory

The extension therefore fails to load:

Failed to load extension from: <path to project>. Could not load background script '$BACKGROUND_PATH'.

The extension successfully loads when I comment out the "service_worker" line of static/manifest.json

Error while building: "TypeError: getStaticDirectory is not a function"

This breaking change sveltejs/kit#7800 removed getStaticDirectory() from the builder, resulting in the following error during build:

error during build:
TypeError: getStaticDirectory is not a function
    at reWriteExtensionManifest (file:///Users/will/DevTest/sveltekit-extension-test/node_modules/sveltekit-adapter-chrome-extension/index.js:154:31)
    at adapt (file:///Users/will/DevTest/sveltekit-extension-test/node_modules/sveltekit-adapter-chrome-extension/index.js:67:7)
    at async adapt (file:///Users/will/DevTest/sveltekit-extension-test/node_modules/@sveltejs/kit/src/core/adapt/index.js:28:2)
    at async Object.handler (file:///Users/will/DevTest/sveltekit-extension-test/node_modules/@sveltejs/kit/src/exports/vite/index.js:522:6)
    at async PluginDriver.hookParallel (file:///Users/will/DevTest/sveltekit-extension-test/node_modules/rollup/dist/es/shared/rollup.js:22670:17)
    at async Object.close (file:///Users/will/DevTest/sveltekit-extension-test/node_modules/rollup/dist/es/shared/rollup.js:23750:13)
    at async Promise.all (index 0)
    at async build (file:///Users/will/DevTest/sveltekit-extension-test/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:45242:13)
    at async CAC.<anonymous> (file:///Users/will/DevTest/sveltekit-extension-test/node_modules/vite/dist/node/cli.js:756:9)

It seems like replacing that call with getClientDirectory() should work instead.

Question about accessing chrome APIs correctly

Hi! I'm trying to write an extension which accesses the chrome bookmarks API, but I'm having some trouble understanding how to use it correctly in the context of sveltekit. I started from this template repository.

To start with I wanted to just display a BookmarkTreeNode, so I edited src/routes/+page.svelte with the following:

(here's the docs for chrome.bookmarks.getTree)

<script lang='ts'>
    import { onMount } from 'svelte';

    let bookmarksPromise: Promise<chrome.bookmarks.BookmarkTreeNode[]>;

    onMount(() => {
        if (window.chrome && chrome.runtime && chrome.runtime.id) {
            bookmarksPromise = chrome.bookmarks.getTree();
        }
    });
</script>

<div class="container h-full mx-auto flex justify-center items-center">
    <div class="space-y-10 text-center flex flex-col items-center">
        <h2 class="h2 font-bold">Welcome to Skeleton.</h2>
        <div class="space-y-2">
            <p>hello, world!</p>
            {#await bookmarksPromise}
                <p>loading bookmarks...</p>
            {:then bookmarks}
                <p>bookmarks loaded!</p>
                <pre>{JSON.stringify(bookmarks, null, 2)}</pre>
            {:catch error}
                <p>error loading bookmarks: {error.message}</p>
            {/await}
        </div>
    </div>
</div>

This works as expected, displaying this JSON:

[
  {
    "children": [
      {
        "children": [],
        "dateAdded": 1702963434117,
        "id": "1",
        "index": 0,
        "parentId": "0",
        "title": "Bookmarks bar"
      },
      {
        "children": [],
        "dateAdded": 1702963434117,
        "id": "2",
        "index": 1,
        "parentId": "0",
        "title": "Other bookmarks"
      }
    ],
    "dateAdded": 1702963434117,
    "id": "0",
    "title": ""
  }
]

The problem comes in when I try to actually access the node. When I edit the html with the following instead:

            {#await bookmarksPromise}
                <p>loading bookmarks...</p>
            {:then bookmarks}
                <p>bookmarks loaded!</p>
                <!-- for some reason getTree returns an array containing the single root `BookmarkTreeNode` -->
                <!-- so we need to index it to access the node -->
                <pre>{JSON.stringify(bookmarks[0], null, 2)}</pre>
            {:catch error}
                <p>error loading bookmarks: {error.message}</p>
            {/await}

I get a compile error:


TypeError: Cannot read properties of undefined (reading '0')
    at file:///home/james/dev/popmark-svelte/.svelte-kit/output/server/entries/pages/_page.svelte.js:16:112
    at file:///home/james/dev/popmark-svelte/.svelte-kit/output/server/entries/pages/_page.svelte.js:17:6
    at file:///home/james/dev/popmark-svelte/.svelte-kit/output/server/entries/pages/_page.svelte.js:18:4
    at Object.$$render (file:///home/james/dev/popmark-svelte/.svelte-kit/output/server/chunks/ssr.js:104:18)
    at Object.default (file:///home/james/dev/popmark-svelte/.svelte-kit/output/server/chunks/internal.js:68:98)
    at Object.default (file:///home/james/dev/popmark-svelte/.svelte-kit/output/server/entries/pages/_layout.svelte.js:167:47)
    at file:///home/james/dev/popmark-svelte/.svelte-kit/output/server/entries/pages/_layout.svelte.js:147:909
    at Object.$$render (file:///home/james/dev/popmark-svelte/.svelte-kit/output/server/chunks/ssr.js:104:18)
    at file:///home/james/dev/popmark-svelte/.svelte-kit/output/server/entries/pages/_layout.svelte.js:152:55
    at Object.$$render (file:///home/james/dev/popmark-svelte/.svelte-kit/output/server/chunks/ssr.js:104:18)

node:internal/event_target:1083
  process.nextTick(() => { throw err; });
                           ^
Error: 500 /
To suppress or handle this error, implement `handleHttpError` in https://kit.svelte.dev/docs/configuration#prerender
    at file:///home/james/dev/popmark-svelte/node_modules/@sveltejs/kit/src/core/config/options.js:212:13
    at file:///home/james/dev/popmark-svelte/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:64:25
    at save (file:///home/james/dev/popmark-svelte/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:403:4)
    at visit (file:///home/james/dev/popmark-svelte/node_modules/@sveltejs/kit/src/core/postbuild/prerender.js:236:3)
Emitted 'error' event on Worker instance at:
    at [kOnErrorMessage] (node:internal/worker:326:10)
    at [kOnMessage] (node:internal/worker:337:37)
    at MessagePort.<anonymous> (node:internal/worker:232:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:807:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)

Node.js v20.6.1
 ELIFECYCLE  Command failed with exit code 1.

referring to the bookmarks[0] in the html. I'm a bit hazy on how sveltekit works, but my intuition says the error is to do with SSR and the bookmarks not being available when the page is being prerendered? Is that right?

How do I do this correctly?

"builder.writePrerendered is not a function" error

After updating to most recent versions of packages, I get a "builder.writePrerendered is not a function" error when I do a build.

package.json:

{
  "name": "sveltekit-extension",
  "version": "0.0.1",
  "scripts": {
    "dev:extension": "nodemon --watch src --watch static --ext .* --exec \"npm run build & npx esbuild src/scripts/background.ts src/scripts/content.ts --bundle --outdir=build/js/\"",
    "dev": "svelte-kit dev",
    "build": "svelte-kit build",
    "package": "svelte-kit package",
    "preview": "svelte-kit preview",
    "check": "svelte-check --tsconfig ./tsconfig.json",
    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch"
  },
  "devDependencies": {
    "@sveltejs/adapter-auto": "next",
    "@sveltejs/kit": "next",
    "nodemon": "^2.0.20",
    "svelte": "^3.55.0",
    "svelte-check": "^2.10.2",
    "svelte-preprocess": "^5.0.0",
    "sveltekit-adapter-chrome-extension": "^1.5.0",
    "tslib": "^2.4.1",
    "typescript": "^4.9.4"
  },
  "type": "module",
  "dependencies": {
    "@types/chrome": "^0.0.204",
    "esbuild": "^0.16.6"
  }
}

svelte.config.js

import adapter from 'sveltekit-adapter-chrome-extension';
import preprocess from 'svelte-preprocess';

export default {
  preprocess: preprocess(),
  kit: {
    adapter: adapter(),
    appDir: 'app',
  },
};

Steps to reproduce:

  1. npm run dev:extension
  2. The following error message is thrown:
> Using sveltekit-adapter-chrome-extension
> builder.writePrerendered is not a function
    at adapt (path/to/node_modules/sveltekit-adapter-chrome-extension/index.js:39:15)
    at adapt (path/to/node_modules/@sveltejs/kit/dist/chunks/index5.js:876:8)
    at path/to/node_modules/@sveltejs/kit/dist/cli.js:1062:11

Another issue I noticed: some files are missing from the build directory.

BEFORE updating to latest versions of packages (extension works fine):

image

AFTER updating to latest versions of packages (extension doesn't load):

image

Is it possible this adapter is not compatible with the latest version of Svelte or some other package?

Fallback config is not working

The builder API changed a bit. Note the change in how the fallback is now generated here.

I'll get a PR up for it. Was wrapping @sveltejs/adapter-static and adding the other extension-specific build steps afterward considered instead of re-implementing a good bit of it? If that's possible, it could be a lot simpler to keep up with their changes.

Error while buiding "Cannot read properties of undefined (reading 'data')" in index.js

I've installed this thing and added the adapter to my svelte.config.js. I'm unsure if I'm missing something or if this is a bug. Please advise

It doesn't like the "const innerScript = node.children[0].data" in index.js

> Using sveltekit-adapter-chrome-extension
  Wrote site to "build"
  Removing Inline Scripts
  ✔ Inline script extracted and saved at: build/script-12dz9tj.js
error during build:
TypeError: Cannot read properties of undefined (reading 'data')
    at file:///C:/Users/denis/Desktop/Benis%20Extension/node_modules/sveltekit-adapter-chrome-extension/index.js:126:44
    at Array.forEach (<anonymous>)
    at removeInlineScripts (file:///C:/Users/denis/Desktop/Benis%20Extension/node_modules/sveltekit-adapter-chrome-extension/index.js:116:6)
    at async adapt (file:///C:/Users/denis/Desktop/Benis%20Extension/node_modules/sveltekit-adapter-chrome-extension/index.js:57:7)
    at async adapt (file:///C:/Users/denis/Desktop/Benis%20Extension/node_modules/@sveltejs/kit/src/core/adapt/index.js:16:2)
    at async Object.closeBundle (file:///C:/Users/denis/Desktop/Benis%20Extension/node_modules/@sveltejs/kit/src/vite/index.js:460:5)
    at async Promise.all (index 0)
    at async Object.close (file:///C:/Users/denis/Desktop/Benis%20Extension/node_modules/rollup/dist/es/shared/rollup.js:23662:13)
    at async Promise.all (index 0)
    at async build (file:///C:/Users/denis/Desktop/Benis%20Extension/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:43473:13)
PS C:\Users\denis\Desktop\Benis Extension>

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.