Chrome 扩展 VueJS：如何在网页上创建叠加层？

Question

I'm creating a Chrome Extension App with VueJS. With google chrome extensions you can push some HTML in other web page, I want to do the same thing with my VueJS App. I've created a file that is supposed to push my app in the body of any page but it doesn't work.

There is the file :

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)
})

I've also my popup.js who as the same utilities than main.js. This file is for the creation of my app, there it is :

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)
    })
  }
}) 

And there is my content-script in the 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"]
    }
  ]
}

If someone have any clue, it would be cool ;)

Answer 1

One issue is this

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

now, according to documentation ..., insertBefore works like this

parentNode.insertBefore(newNode, referenceNode);

so, your parentNode is a newly created node that isn't in the DOM

your newNode is the body's first child

and reference node is null (so, you're inserting the node at the end)

you're effectively doing this

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

what you probably wanted to do was

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