Chrome Extension: Uncaught ReferenceError: function is not defined

Question

我正在写一个 Chrome 扩展，我有这个页面：

<html>
  <body>
    <button id="changeColor"></button>
    <script src="popup.js"></script>
  </body>
</html>

有了这个 JS (popup.js):

let changeColor = document.getElementById("changeColor");

chrome.storage.sync.get("color", ({ color }) => {
  changeColor.style.backgroundColor = color;
});

changeColor.addEventListener("click", async () => {
    let [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  
    chrome.scripting.executeScript({
      target: { tabId: tab.id },
      function: setPageBackgroundColor,
    });

});
  
function setPageBackgroundColor() {
  chrome.storage.sync.get("color", ({ color }) => {
    document.body.style.backgroundColor = color;
  });
  // Here, it says: Uncaught ReferenceError: getElementByXpath is not defined
  console.log(getElementByXpath("xpath").textContent);
}
  
function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

为什么？

Answer 1

问题：外部函数的代码没有注入

这是 executeScript 的作用：

它将函数的代码作为纯文本 IIFE，即 (function foo() { ... })()、
它将文本传输到网页，
它选择“隔离世界”环境，您的扩展程序的所有内容脚本运行，
它将该文本作为 JavaScript 代码执行。

解决方案：将所有必要的代码和函数放在您注入的函数中。

在您的情况下，getElementByXpath 定义应该移到 setPageBackgroundColor 中。

P.S。当然，注入的代码也可以通过 manifest.json 的 content_scripts（假设它们的 run_at 已经发生）或 executeScript 使用先前注入的内容脚本的全局 variables/functions。

Chrome Extension: Uncaught ReferenceError: function is not defined

Chrome Extension: Uncaught ReferenceError: function is not defined

javascript

google-chrome-extension