如何在无构建/打包工具的Chrome扩展中使用Vuetify？

可行，但需要解决几个核心问题：

1. 模板字符串触发eval错误的原因 #

Manifest V3的CSP默认禁止动态代码执行（包括eval和new Function()），而Vue的template选项在浏览器端需要即时编译模板，这个过程依赖被CSP限制的动态代码能力，因此直接用模板字符串会报错。必须使用**渲染函数（h函数）**定义UI，避免模板编译。

2. Vuetify组件未渲染/样式化的解决方法 #

你当前代码中直接用h("v-app")是错误的——Vuetify组件不是字符串标签，而是需要从全局Vuetify对象中导出的组件对象。修改popup.js如下：

// popup.js
const {createApp, h} = Vue;
const {createVuetify, VApp, VBtn} = Vuetify; // 显式导入所需组件
const vuetify = createVuetify();

const app = createApp({
    render() {
        return h(VApp, [ // 使用组件对象而非字符串
            h(VBtn, "Click me")
        ]);
    }
});

app.use(vuetify).mount("#app");

3. 配置兼容的CSP规则 #

在manifest.json中调整CSP，允许必要的资源加载：

{
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"
  }
}

• style-src添加'unsafe-inline'是因为Vuetify部分样式依赖内联样式，Manifest V3允许扩展页面使用该规则。
• 无需添加unsafe-eval，因为使用渲染函数避免了动态编译。

4. 正确引入依赖资源 #

确保Vuetify CSS、Material Design Icons CSS的路径正确，文件已放置在扩展目录内。建议使用Vue的runtime-only版本（如vue.runtime.esm.browser.prod.js），减少体积并规避不必要的模板编译功能。

综上，只要坚持用渲染函数定义UI、正确导入Vuetify组件对象、配置合适的CSP，就能在Manifest V3扩展中无构建工具运行Vue+Vuetify。

内容的提问来源于stack exchange，提问作者Mahozad