window.functionName 在我的代码中未定义，而在开发人员工具控制台中已定义

Question

我试过延迟代码，即使我在代码实际完成之前在控制台中执行 window.functionName，我仍然得到相同的结果（当我直接输入 window.functionName 时有效控制台，但不是从 javascript 代码执行时）。

请注意，这一切都发生在 chrome 扩展的内容脚本中。

对于完整的上下文，我有一个 Vue 组件，它有一个调用另一个 javascript 文件中的函数的方法，该文件最终调用 window.functionName -- 所以像这样：

SomeVueComponent.vue

<template>
  <button @click="buttonClicked">
</template>
<script>
  import { doSomething } from 'do-something.js';
   
  export default {
    ...
    methods: {
        buttonClicked() {
          doSomething();
        }
    }
  }
</script>

做-something.js

export function doSomething() {
  doFunctionName() {
     window.functionName(); // Returns "Uncaught ReferenceError: functionName is not defined"
  }
  ...
  whenElementIsShown() {
    // When the element was shown a script was injected to the page that sets window.functionName 
    // to something. I tried putting doFunctionName in a timeout and got the same results.
    doFunctionName();
  }
  
}

而在开发者工具控制台中...

window.functionName() // Returns "f (){...}"

我只是不确定为什么 window 在这两种情况下会有所不同。是因为 Vue 吗？这是一些范围界定问题吗？有没有办法获取最近更新的window？

Answer 1

原来 chrome 扩展中的 window 变量与页面的 window 变量不同。更多信息在这里：Chrome extension - retrieving global variable from webpage

window.functionName 在我的代码中未定义，而在开发人员工具控制台中已定义

window.functionName is undefined in my code while it is defined in the developer tool console

javascript

google-chrome-extension

vue.js