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 擴展中的頁面內容

問題描述

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