时间戳

首页 > 解决方案 > Chrome 扩展 VueJS：如何在网页上创建覆盖？

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

问题描述

我正在使用 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"]
    }
  ]
}

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

标签： javascriptvue.jsgoogle-chrome-extensionvuejs2

解决方案

一个问题是这个

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)

推荐阅读