Vue prototype chain “injection “, modify nuggets font color

React can remove zhihu div, I thought vue should have similar gameplay, so I tried it. To be fair, this approach should be able to get more things, even get expression input, the principle is so lazy to continue to work

Results the following

The idea is to expose instances to cli tools through vue, take the prototype chain, and then modify the methods on the prototype chain

Realize the principle of

The code is relatively simple. The core detection code comes from the Vue CLI. After getting the VUE, you can modify the method on the prototype chain

const all = document.querySelectorAll("*")
let el
for (let i = 0; i < all.length; i++) {
  if (all[i].__vue__) {
    el = all[i]
    break}}let Vue
if (el) {
  Vue = Object.getPrototypeOf(el.__vue__).constructor
  while (Vue.super) {
    Vue = Vue.super
  }
}

const nuxtDetected = Boolean(window.__NUXT__ || window.$nuxt)

if (nuxtDetected) {
  if (window.$nuxt) {
    Vue = window.$nuxt.$root.constructor
  }
}

const _render = Vue.prototype._render

function r(. args) {
  const self = this
  console.log("r". args, self)console.log("el", self, self.$el)

  // The mount of el is asynchronous, direct fetching is not possible
  // Use nextTick to set the color after rendering
  Vue.prototype.$nextTick(() = > {
    console.log("el2", self, self.$el)
    if (self.$el && self.$el.style) {
      self.$el.style.color = "red"}})const _createElement = self.createElement
  function c(. args) {
    console.log("c". args)// This function is not currently used...
    return_createElement(... args) } self.createElement = creturn_render.call(self, ... args) } Vue.prototype._render = rCopy the code