如何修改通过 Chrome 扩展创建的选项卡的 DOM [重复]答案

【问题标题】：How to modify the DOM of a tab created through a Chrome extension [duplicate]如何修改通过 Chrome 扩展创建的选项卡的 DOM [重复]
【发布时间】：2021-06-30 05:48:35
【问题描述】：

我想创建一个新选项卡并使用清单 V3 修改 Chrome 扩展程序的 background.js 中的 DOM：

  chrome.tabs.create({ url : 'http://example.com'},function(newTab) {
    document.body.innerHTML = "Example.com website content modified in tab "+ newTab.id + "!";
  }

但是为什么这没有做任何事情，以及如何解决这个问题？

下面的这个也不起作用：

  chrome.tabs.create({ url : 'http://example.com'},function(newTab) {
    function myScript(){
            document.body.innerHTML = "Example.com website content modified in tab "+ newTab.id + "!";
    }

    chrome.scripting.executeScript( {
                    target: {tabId: newTab.id},
                    function: myScript,
    });
  }

【问题讨论】：

标签： javascript google-chrome-extension manifest.json

【解决方案1】：

background.js 无法访问页面的 dom，您必须运行内容脚本并使用 messaging 在后台和内容脚本之间进行通信。

【讨论】：

您将如何使用消息传递？可以为从 background.js 传递到 content-script.js 的所有内容创建 eval() 吗？
这将是一种方法，但非常不可取。更好的解决方案是将您计划在 background.js 中使用的任何 dom 操作代码移动到内容脚本中，而后台只需将命令发送到内容脚本。