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

Question

我正在考虑在 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 评论而不是呈现的内容：

<!---->

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

Answer 1

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

所以唯一的解决办法就是传递一个预编译的模板。

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

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

VueJS app to replace page content in Chrome extension

javascript

google-chrome-extension

vue.js