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

Question

I am considering writing a Chrome extension in VueJS to totally change the apparence of a specific site.我正在考虑在VueJS中编写一个Chrome 扩展来完全改变特定站点的外观。

Thus, I need to dynamically create an element, mount my VueJS app in it, and replace the body of the page with this rendered content.因此，我需要动态创建一个元素，在其中安装我的 VueJS 应用程序，并用这个呈现的内容替换页面的主体。

I tested the dynamic creation of a container in a simple page, without Chrome extension, and it works great:我在一个简单的页面中测试了容器的动态创建，没有 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>

This renders the VueJS app totally OK.这使得 VueJS 应用程序完全正常。

But then, when I create a Chrome extension, and put the same code in my script.js file, it actually replaces the content of the page with a blank page.但是，当我创建 Chrome 扩展程序并将相同的代码放入我的script.js文件时，它实际上将页面内容替换为空白页面。 The VueJS code is interpreted (if I add a console.log("something") in the mounted method of the VueJS app, it shows up).解释 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"]
    }
  ]
}

It's like the extension prevents the rendered content to be displayed.就像扩展程序阻止显示呈现的内容一样。

Actually, when inspecting the DOM, I have the confirmation that my VueJS app is fired: the div is replaced… but by a HTML comment instead of the rendered content:实际上，在检查 DOM 时，我确认我的 VueJS 应用程序已被触发：div 被替换……但被 HTML 注释而不是呈现的内容：

<!---->

Any ideas?有任何想法吗？ Thanks in advance!提前致谢！

Answer 1

OK, so I solved it thanks to the doc.好的，多亏了文档，我解决了。 Chrome extension will block any js tags within the templates. Chrome 扩展程序将阻止模板中的任何 js 标签。

So the only solution is to pass a pre-compiled template.所以唯一的解决方案是传递一个预编译的模板。

Using vue-cli , then building the app to have both scripts ans tags in js files, and then referencing it in the manifest.json file works!使用vue-cli ，然后构建应用程序以在 js 文件中包含两个脚本和标签，然后在manifest.json文件中引用它！

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-04-23 13:57:19

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-04-23 13:57:19

解决方案1
0 已采纳 2021-04-23 13:57:19