Javascript Can'；chrome扩展中的t access文档元素

我目前正在使用以下chrome教程制作chrome扩展：

最初我自己的代码遇到了一些问题，所以现在我只是使用他们的代码作为我自己事情的基础

在popup.js中，教程有一个功能，可以在单击时更改背景颜色

function setPageBackgroundColor() {
    chrome.storage.sync.get("color", ({ color }) => {
        document.body.style.backgroundColor = color;
});

我将代码中的行替换为我希望它执行的操作

document.getElementById(xyz).miscfunction(arg1, arg2);

getting started扩展按预期工作（显然）。当我在Chrome控制台中运行我的代码行时，它完全按照预期工作。但是，当我使用扩展运行该行时，会出现以下错误：

Uncaught TypeError: document.getElementById(...).miscfunction is not a function

我已经测试并发现getElementById确实得到了我想要的元素，因为当我尝试在没有该元素的选项卡上运行它时，它会给我一个错误，告诉我该元素为null。对于实际包含该元素的选项卡，它不会这样做

是什么使我的扩展无法访问该函数？当我上一次尝试在几个月前进行调试时，我记得在注入和内容安全策略方面遇到了一些问题，但我不记得我是如何做到这一点的。任何帮助都将不胜感激

编辑：

---

此后，我更新了弹出窗口，以调用脚本js文件，而不是调用函数，然后将函数放在单独的文件中。

要访问正在查看的页面的文档元素，需要在内容脚本中粘贴所需的代码

首先需要在

manifest.json

"content_scripts" : [{
  "matches" : ["https://<website-you-are-working-on>"]
  "js" : ["script.js"] //file containing the code you need to execute
  }]

现在，在内容脚本中侦听消息并执行所需任务

script.js

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if(message.action == "change-background"){
    //your code here
  }
})

---

您是要访问正在查看的页面的“文档”还是弹出窗口？要访问页面的html，您需要编写一个用户脚本。@JasonGoemaat我正在尝试访问我正在查看的页面中的一个元素。如何编写和执行用户脚本？这与仅仅注入内容脚本不同吗。此后，我更新了代码以引用文件而不是函数，并将代码放在文件中。DOM元素没有

miscsfunction

。如果这是页面添加的自定义函数，那么您需要更深入地运行代码。请澄清。@wOxxOm确实，该函数属于页面添加的外部API。抱歉，回复太晚。虽然问题中没有明确指出，但作者已在网页中使用executeScript运行setPageBackgroundColor作为内容脚本，如教程链接所示。问题是

miscsfunction

，我已经要求对此进行澄清。@wOxxOm我明白了。我没有看教程。为了其他人的利益，我仍然会把我的答案留在这里。

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if(message.action == "change-background"){
    //your code here
  }
})