时间戳

首页 > 解决方案 > VueJS 应用程序替换 Chrome 扩展中的页面内容

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

问题描述

我正在考虑在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 应用程序console.log("something")的方法中添加一个，它会显示出来）。mounted

// 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 注释而不是呈现的内容：

<!---->

有任何想法吗？提前致谢！

标签： javascriptvue.jsgoogle-chrome-extension

解决方案

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

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

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

推荐阅读