Chrome 扩展 VueJS：如何在网页上创建覆盖？答案

【问题标题】：Chrome Extension VueJS : how to create overlay over web page?Chrome 扩展 VueJS：如何在网页上创建覆盖？
【发布时间】：2019-12-04 10:54:06
【问题描述】：

我正在使用 VueJS 创建一个 Chrome 扩展应用程序。使用 google chrome 扩展，您可以在其他网页中推送一些 HTML，我想用我的 VueJS 应用程序做同样的事情。我创建了一个文件，应该将我的应用程序推送到任何页面的正文中，但它不起作用。

有文件：

import App from './App'

const element = document.querySelector('body').firstChild
const anchor = document.createElement('DIV')
anchor.insertBefore(element)

new Vue({
    el: anchor,
    render: h => h(App)
})

我的 popup.js 也与 main.js 具有相同的实用程序。该文件用于创建我的应用程序，它是：

import Vue from 'vue'
import App from './App'
import router from './router/index'
import { fb } from './firebase/init'

let app = null;


fb.auth().onAuthStateChanged(() => {
  if(!app){
    app = new Vue({
      el: '#app',
      router,

      render: h => h(App)
    })
  }
})

manifest.json 中有我的内容脚本：

{
  "name": "******",
  "description": "VueJS Extension",
  "version": null,
  "manifest_version": 2,
  "icons": {
    "128": "icons/******.png"
  },
  "browser_action": {
    "default_title": "*****",
    "default_popup": "popup/popup.html"
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "permissions": [
    "identity"
  ],
  "oauth2": {
    "client_id": "**************",
    "scopes": [
      "https://apis.google.com"
    ]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*"],
      "js": ["print.js"]
    }
  ]
}

如果有人有任何线索，那就太酷了；）

【问题讨论】：

要向网页添加内容，您需要content script。在该内容脚本中，您可以添加一个 DOM 元素或添加一个 iframe，该 iframe 指向您的扩展程序的 app.html，其中包含 Vue。寻找使用第二种方法的教程（谷歌术语：VueJS iframe web_accessible_resources）。
感谢您的回答，我忘了把 manifest.json 放在我的问题中......所以我把它放回去了。并且内容脚本不起作用，我不知道为什么。
anchor.insertBefore(element) ... 等价于 anchor.appendChild(element) .... 所以你要获取 body 的第一个孩子（顺便说一下 document.body）并插入到你创建的 div 中，这在 DOM 中不存在吗？ ... insertBefore 的文档 ... parentNode.insertBefore(newNode, referenceNode); ... 所以你想要document.body.insertBefore(anchor, element)

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

【解决方案1】：

一个问题是这样的

const element = document.querySelector('body').firstChild
const anchor = document.createElement('DIV')
anchor.insertBefore(element)

现在，根据文档...， insertBefore 像这样工作

parentNode.insertBefore(newNode, referenceNode);

所以，您的 parentNode 是一个新创建的节点，它不在 DOM 中

你的newNode是身体的第一个孩子

并且引用节点为空（因此，您将在末尾插入节点）

你正在有效地做到这一点

const element = document.body.firstChild
const anchor = document.createElement('DIV')
anchor.appendChild(element)

你可能想做的是

const element = document.body.firstChild
const anchor = document.createElement('DIV')
document.body.insertBefore(anchor, element)

【讨论】：

非常感谢，我试试看！