jervis2049 / vite-plugin-crx-mv3 Goto Github PK

Build a Chrome Extension with Vite⚡

JavaScript 3.65% Shell 0.20% TypeScript 96.15%

chrome-extension-boilerplate chrome-extension-react chrome-extension-vue manifest-v3 react-browser-extension-boilerplate vite-plugin web-extension-starter

vite-plugin-crx-mv3's People

Contributors

Stargazers

Watchers

vite-plugin-crx-mv3's Issues

content-scripts/main.ts 和 options/main.ts 都引入了vue3 执行npm run build的时候打包了两份vue3这是bug吗

https://i.ibb.co/7JmCCY5/60b4046740a0fe717ec82903913b6cf.png

Failed to load config (The requested module 'acorn' does not provide an export named 'default')

Hi I'm running into the following issue using yarn 3.6.3. I'm using workspaces in yarn not sure if that could be causing part of the issues?

failed to load config from /my_project/extension/vite.config.ts
error during build:
file:///my_project/node_modules/vite-plugin-crx-mv3/dist/index.mjs:16
import acorn from "acorn";
       ^^^^^
SyntaxError: The requested module 'acorn' does not provide an export named 'default'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)
    at async loadConfigFromBundledFile (file:///my_project/node_modules/vite/dist/node/chunks/dep-df561101.js:66235:21)
    at async loadConfigFromFile (file:///my_project/node_modules/vite/dist/node/chunks/dep-df561101.js:66086:28)
    at async resolveConfig (file:///my_project/node_modules/vite/dist/node/chunks/dep-df561101.js:65682:28)
    at async build (file:///my_project/node_modules/vite/dist/node/chunks/dep-df561101.js:47852:20)
    at async CAC.<anonymous> (file:///my_project/node_modules/vite/dist/node/cli.js:822:9)

production: build never ends

Hola!

"vite-plugin-crx-mv3": "^1.1.0"

vite build never ends. Me helps only CTRL + C or install 0.0.7 version

> vite build --mode production

command:  build
mode:  production
isProd:  true
vite v4.0.4 building for production...
✓ 5 modules transformed.
✓ 90 modules transformed.
rendering chunks (4)...
dist/contentscript-loader-content-fc7b9f3b.js
dist/popup.html                        0.30 kB
dist/manifest.json                     0.98 kB
dist/assets/icons/icon_48.png          1.80 kB
dist/assets/icons/icon_128.png         2.94 kB
dist/content.js                        4.46 kB
dist/assets/montserrat-f35fdf51.ttf  394.26 kB
dist/assets/popup-dcffa69a.css        12.38 kB │ gzip:  4.99 kB
dist/assets/background-d7f5b2ce.js     1.99 kB │ gzip:  1.01 kB
dist/assets/content-fc7b9f3b.js        4.46 kB │ gzip:  1.56 kB
dist/assets/popup-f3bf849f.js        115.08 kB │ gzip: 42.41 kB

Unable to resolve dependency tree at example

example with crx-vue

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: vite@undefined
npm ERR! node_modules/vite
npm ERR!   dev vite@"^3.2.9" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^2.5.10" from @vitejs/[email protected]
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   dev @vitejs/plugin-vue@"^2.3.0" 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

newtab.html 不能用vue构建

如何既支持覆盖浏览器起始页也支持内嵌页面，目前打包不支持，newtab.html 不能用vue构建

vite build started

不知道大佬有没有遇到过每次更改项目 vite build --watch 这个命令会卡住，导致它会先清空 dist 的文件，但又卡住导致 dist 一直都是空的，只能重复启动 dev build

TypeError: (intermediate value).mount is not a function at window.onload

vue2 在content.js 中无法挂载

Sourcemap is likely to be incorrect: a plugin (vite-plugin-crx-mv3) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

大佬我这build的时候 Sourcemap is likely to be incorrect: a plugin (vite-plugin-crx-mv3) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
出这个提示然后打包后的content.js还是原先的代码然后content里面的vue文件中的css 并没有打包到最后的文件中打包后的manifest文件也没有注入css

Support new versions of vite(typescript) with acorn library exporting

It looks that it isn't compatible with last version of vite.

It happens when I try to start project. It occurs inside vite.config.ts
I took look the examples for react but I have got error message below:

failed to load config from /Users/vkovaliov/temp/github-exts/vite.config.ts
error during build:
file:///Users/vkovaliov/temp/github-exts/node_modules/vite-plugin-crx-mv3/dist/index.mjs:16
import acorn from "acorn";
       ^^^^^
SyntaxError: The requested module 'acorn' does not provide an export named 'default'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:122:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:188:5)

Configs:
node: v20.2.0
vite: ^5.0.0
typescript: ^5.2.2

Vite config:

import { defineConfig } from "vite";
import { resolve } from "path";
import react from "@vitejs/plugin-react";
import crx from 'vite-plugin-crx-mv3'

// TODO: makes dedicated enrties for popup and content script
// https://vitejs.dev/config/
export default defineConfig({
    build: {
        rollupOptions: {
          input: {
            contentScript: resolve(__dirname, "contentScript.html"),
            popup: resolve(__dirname, "popup.html"),
            main: "src/main.tsx",
            mainPopup: "src/popup/mainPopup.tsx",
          },
        },
      },
    plugins: [react(), crx({
      manifest: './src/manifest.json',
    }),],
});

Typescript config:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": false,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

Any advices or way to manage it, please?

Might be it possible to update for repo according to ne versions of vite and typescript?

怎么新建配置页面，并变成更正确路径，

浏览器插件a想写一个配置页面，但是路径每次都被变成加上了随机数，我写代码跳转页面也就失效了。那还有什么办法自定义一个页面并获取到路径吗

打包时生成manifest.json中的default_popup的地址也许可以优化

背景

我的目录层级如下：

src
- crx
  - popup
    - index.html
  - manifest.json
    其中manifest代码如下：

{
   ... 
   "action": {
    "default_popup": "./popup/index.html"
    },
   ...
}

问题

此时生成的dist的目录如下，符合预期：

src
- crx
  - popup
    - index.html
manifest.json

但是dist中生成的 manifest.json代码如下，不符合预期：

{
   ... 
   "action": {
    "default_popup": "index.html"
    },
   ...
}

期望

期望生成如下路径

{
   ... 
   "action": {
    "default_popup": "./src/crx/popup/index.html"
    },
   ...
}

分析

阅读源码时发现问题来源自下方 src/processors/manifest.ts 中的 generateManifest 函数的代码：

...
generateManifest (){
   ...
    if (manifest.action?.default_popup) {
      manifest.action.default_popup = basename(manifest.action.default_popup)
    }
   ...
}
...

如果可以的话，希望其中使用 basename() 函数生成 popup 这里可以加一点适配不同的目录结构的逻辑，比如：

...
generateManifest (){
   ...
    if (manifest.action?.default_popup) {
      manifest.action.default_popup = manifest.action.default_popup.replace( /^\./, this.srcDir);
    }
   ...
}
...

或者把popup的index.html文件生成到根目录。

How can we use `import` in `background.ts`

When I use import to invoke other api, I got this error below:

Uncaught SyntaxError: Cannot use import statement outside a module

Is there any way to solve this?

https://github.com/Jervis2049/vite-plugin-crx-mv3/blob/e0c27aadfacaa7aa02736589e6f61437562c36a4/examples/crx-vue-drawer/src/background.ts

content-scripts的热部署貌似会有问题，需要重新到插件中心，刷新才能更新最新内容

复现github demo: https://github.com/zangguojun/customizable-tomato-clock

建议同步package.json 与 manifest.json 中的版本号

当进行工程化的开发时，很多工具只对package.json 有着较好的支持。
比如 standard-version 进行版本发布，这个工具只会自动修改packages.json 的中的版本，而manifest 中需要手动修改。

建议当manifest version 设置为auto，或者未设置，或者通过vite.config 中的配置来进行控制。

请问有办法将popup.html 放在popup文件夹、options.html 放在options文件夹下吗

manfest.json的 action设置为{} 后 Cannot use 'in' operator to search for 'width' in undefined

window.localtion.reload是否可以添加配置控制

插件无法运行

`import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import crx from 'vite-plugin-crx-mv3'

export default defineConfig({
plugins: [
vue(),
crx({
manifest: './manifest.json'
}),
],
})`

报错
error when starting dev server:
TypeError: crx is not a function

request support i18n

ref https://developer.chrome.com/docs/webstore/i18n/

related rollup plugin snippet:

    const pathManifestAbs = path.normalize(pathManifest);
    const pathParent = path.dirname(pathManifestAbs);
    const pathRoot = path.dirname(path.dirname(pathManifestAbs));

    const manifest = fs.readFileSync(pathManifestAbs, { encoding: "utf8" })
    const manifestContent: chrome.runtime.ManifestV3 = JSON.parse(manifest);

    // ....

        async generateBundle(options: NormalizedOutputOptions, bundle: OutputBundle, isWrite: boolean) {
            console.log({ default_locale: manifestContent.default_locale })
            if (manifestContent.default_locale) {
                const src = path.resolve(pathParent, "_locales")

                const pathLocaleMessagesJson = path.resolve(src, manifestContent.default_locale, "messages.json")
                if (!fs.existsSync(pathLocaleMessagesJson)) {
                    console.warn(`locale file ${pathLocaleMessagesJson} not found`)
                }

                const dest = path.resolve(config.build.outDir, "_locales")
                console.info(`copy _locales ${src} => ${dest}`)
                fs.cpSync(src, dest, { recursive: true });
            }

            // ....
        }

支持 web_accessible_resources 中的资源编译

目前的情况是：需要插入 injected.js ，能插入。但是这个文件只能手写js，因为他没有经过vite的编译。

因为injected 的资源一般也需要在 web_accessible_resources 中配置，所以希望能够读取mainfest.json 中 web_accessible_resources 字段中的文件，也进行一下编译。

目前的做法是需要单独对这个文件编译一下，起两个vite ，不优雅。

要么就只能纯手写js, 但是文件的需要手动移动到dist文件，或者直接在dist里面编写。但这样对工程化很不友好。

新手小白，请多指教

您好！fork了您的项目，感觉很不错！最近需要做chrome插件，但是对于前端技术，本人属于小白“菜”！
不知道可不可以有时间，增加一个相对全一些的demo！方便我这种“菜”上手，如果打扰您，真是不好意思！

你好大佬有没有element-plus的示例

svg 无法渲染

如题，现在的 crx-vue-drawer 模式下无法正常渲染 svg，我起初以为这是图标库的原因，后来发现直接把 svg 代码嵌入html也不会得到渲染，以下是一个对比：
左侧为正常的Vue项目渲染得到的网页，右侧为 crx 插件渲染得到的 html：

你好 ant 组件跟 element-plus组件在content-scripts页面个别组件无法加载

popup页面成功使用例如form表单，选择框等复杂组件

在content-scripts脚本注入页面使用form 选择框等组件报错，只能使用简单的button等组件，
大佬有办法解决吗

content-scripts 路径问题

content-scripts 的文件路径和名称是固定的吗，能不能支持manifest可以用js，转换成json
或者相对路径转绝对路径
例如这样

import content from './content.js'
export default {
  ...
  "content_scripts": [
      {
        "matches": [
          "<all_urls>"
        ],
        "js": [
          content
        ],
        "run_at": "document_idle"
      }
    ],
  ...
}

manifest->background 设置type:"module"，打包后自动被去除

起因是我在background引入第三方模块，报错Uncaught SyntaxError: Cannot use import statement outside a module。
然后尝试在background {
"service_worker": "background.js",
"type": "module" // 增加 module
}
但是打包出来的manifest中 type:"module" 被自动去除，请问大佬这个可以解决吗，不然每次都得自己手动补上

Manifest.web_accessible_resources 似乎没有处理 content script 所动态引入的 injected.js

非常感谢提供了这个插件，有一个问题可以探讨一下：

在

vite-plugin-crx-mv3/src/processors/manifest.ts

Line 225 in ac37170

this.webAccessibleResources = [

，似乎只是处理了 content script 的 import 的资源，但是没有处理动态引入的资源，比如通过 chrome.runtime.getURL 引入的 injected.js（当然，我看到处理编译的时候，是有的。在这里似乎漏掉了？）

content_scripts配置js引入jquery时，经过编译报错。

在content_scripts引入jquery，应该是jquery经过vite编译后，导致content.ts使用jquery时，出现以下错误：
jquery-2.2.4.min.js:3 Uncaught SyntaxError: Unexpected token 'export' (at jquery-2.2.4.min.js:3:6594)
content.js:1 Uncaught ReferenceError: $ is not defined
at content.js:1:37
at content.js:2:3
能否自定义哪些文件不进行编译直接复制？
配置如下。
"content_scripts": [{
"matches": [ "<all_urls>" ],
"js": ["assets/js/jquery-2.2.4.min.js","content.ts"]
}]

jervis2049 / vite-plugin-crx-mv3 Goto Github PK

vite-plugin-crx-mv3's People

Contributors

Stargazers

Watchers

Forkers

vite-plugin-crx-mv3's Issues

背景

问题

期望

分析

Recommend Projects

Recommend Topics

Recommend Org