Chrome扩展开发：创建Vue实例后#app元素消失，弹窗空白无报错

问题描述 #

开发Chrome扩展时，基于Vue 2.7.16创建实例后，popup页面中的<div id="app">元素消失，弹窗显示空白，且控制台无任何报错信息。

相关代码片段 #

popup.html #

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>shit2excel</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script src="static/js/vue.min.js"></script>
    <script src="static/js/xlsx.full.min.js"></script>
    <script src="static/js/axios.min.js"></script>
   
    <style>
        body {
            width: 300px;
            padding: 10px;
        }
    </style>
</head>

<body>
    <div id="app" class="container">
        <h1 class="my-4">Item Info Export</h1>
        <h1>hello world</h1>
        <button @click="exportItemInfo" class="btn btn-primary">Export</button>
    </div>
    <script src="popup.js"></script>
</body>
</html>

popup.js #

new Vue({
    el: '#app',
    data: {
        productInfo: [
            { name: 'item_1', price: 100, quantity: 10 },
            { name: 'item_2', price: 200, quantity: 5 },
            { name: 'item_3', price: 150, quantity: 8 },
        ]
    },
    methods: {
        exportItemInfo() {
            const wb = XLSX.utils.book_new();
            const ws = XLSX.utils.json_to_sheet(this.productInfo);
            XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
            XLSX.writeFile(wb, 'item_info.xlsx');
        }
    }
});

排查方向与解决方案 #

1. 内容安全策略（CSP）限制 #

Chrome扩展默认CSP会阻断Vue运行所需的eval操作，即便无控制台报错，Vue实例也无法正常初始化，导致挂载元素被清空。

解决方式：
在manifest.json中添加CSP配置：

"content_security_policy": {
  "extension_pages": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

2. Vue资源路径错误 #

若static/js/vue.min.js的实际路径与扩展目录结构不匹配，Vue未加载成功，实例初始化失败会导致<div id="app">被移除。

验证与修复：
在popup页面控制台输入Vue，若返回undefined，说明资源未加载，检查文件路径是否正确，确保资源文件存在于扩展包的对应目录中。

3. DOM加载时机问题 #

极端情况下，DOM未完全加载完成时初始化Vue实例，可能导致挂载失败。

优化代码：
将Vue实例初始化包裹在DOM加载完成事件中：

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '#app',
    data: {
      productInfo: [
        { name: 'item_1', price: 100, quantity: 10 },
        { name: 'item_2', price: 200, quantity: 5 },
        { name: 'item_3', price: 150, quantity: 8 },
      ]
    },
    methods: {
      exportItemInfo() {
        const wb = XLSX.utils.book_new();
        const ws = XLSX.utils.json_to_sheet(this.productInfo);
        XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
        XLSX.writeFile(wb, 'item_info.xlsx');
      }
    }
  });
});

4. 扩展清单配置错误 #

检查manifest.json中action（旧版为browser_action）的弹窗路径配置是否正确：

"action": {
  "default_popup": "popup.html",
  "default_icon": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

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