VueJS 应用程序替换 Chrome 扩展中的页面内容答案

【问题标题】：VueJS app to replace page content in Chrome extensionVueJS 应用程序替换 Chrome 扩展中的页面内容
【发布时间】：2021-07-17 14:03:55
【问题描述】：

我正在考虑在 VueJS 中编写一个 Chrome 扩展程序，以彻底改变特定网站的外观。

因此，我需要动态创建一个元素，在其中安装我的 VueJS 应用程序，并用这个呈现的内容替换页面的正文。

我在一个简单的页面中测试了动态创建容器，没有 Chrome 扩展，效果很好：

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script>
      const app = new Vue({
        data: () => ({
          count: 0
        }),

        template: '<button v-on:click="count++">Clicked {{ count }} times</button>'
      });


      const body = document.getElementsByTagName('body')[0];
      let vueContainer = document.createElement('div')
      body.replaceWith(vueContainer);
      app.$mount(vueContainer);
    </script>
  </body>
</html>

这使得 VueJS 应用程序完全正常。

但是，当我创建 Chrome 扩展程序并将相同的代码放入我的 script.js 文件时，它实际上将页面内容替换为空白页面。 VueJS 代码被解释（如果我在 VueJS 应用程序的 mounted 方法中添加 console.log("something")，它会显示出来）。

// script.js

const app = new Vue({
  data: () => ({
    count: 0
  }),

  template: '<button v-on:click="count++">Clicked {{ count }} times</button>'
});

const body = document.getElementsByTagName('body')[0];
let vueContainer = document.createElement('div')
body.replaceWith(vueContainer);
app.$mount(vueContainer);

// manifest.json

{
  "name": "My extension",
  "description": "Blah",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["https://www.mysite.fr/*"],
      "js": ["vue@2.6.12", "script.js"]
    }
  ]
}

这就像扩展程序阻止显示呈现的内容一样。

实际上，在检查 DOM 时，我确认我的 VueJS 应用已被触发：div 被替换……但被 HTML 注释而不是呈现的内容：

<!---->

有什么想法吗？提前致谢！

【问题讨论】：

"vue@2.6.12" 看起来不像一个有效的脚本。您应该将 vue bundle 下载为 js 文件，将其放入扩展目录/包中，并在 js 中指定实际正确的名称。如果脚本没问题但只是名称很奇怪，请尝试将其重命名为 .js。
感谢您的评论 wOxxOm，但这不是问题所在：正如我所说，vue@2.6.12 加载正常，我的 VueJS 应用程序已执行，因此如果我有控制台，控制台中的输出。登录mounted方法。由于 Chrome 扩展，看起来更像是渲染问题？
好吧，既然它在弹出窗口中工作，你可以通过使用 iframe 而不是 div 并在该 iframe example 内呈现 Vue 来做同样的事情。
好吧，它也不起作用 :( 在确认应用程序实际执行后，我编辑了我的原始帖子，更新了 DOM，但没有得到渲染的模板，只是得到一个评论： 。因此是空白页。这很奇怪……
iframe 解决方案在 iframe 中使用与您已经工作的解决方案完全相同的 html + 脚本，因此它也应该可以工作。

标签： javascript vue.js google-chrome-extension

【解决方案1】：

好的，多亏了文档，我解决了。 Chrome 扩展程序将阻止模板中的任何 js 标签。

所以唯一的解决方案是传递一个预编译的模板。

使用 vue-cli，然后构建应用程序以在 js 文件中包含两个脚本和标签，然后在 manifest.json 文件中引用它即可！

【讨论】：