Chrome扩展：如何将元素添加到浏览器窗口而非弹窗

第一张图：当前状态，第二张图：目标状态

以下是我的JavaScript代码（script.js），已在popup.html和manifest文件中引入：

// ... 使用createElement("DIV")创建了frameUp、frameDown、frameRight、frameLeft

function addBorder(){
    document.body.appendChild(frameUp);
    document.body.appendChild(frameDown);
    document.body.appendChild(frameRight);
    document.body.appendChild(frameLeft);
}

document.addEventListener("DOMContentLoaded", function () {
    var button = document.createElement("button");
    button.innerHTML = 'click me';
    document.body.appendChild(button);
    button.onclick = addBorder;
    
});

我发现弹窗脚本里的HTML修改只会作用于弹窗窗口，而非浏览器当前打开的网页。现在希望点击弹窗里的按钮时，在浏览器窗口的网页中绘制边框，但不知如何修改appendChild的目标，也不清楚document.body具体指向什么。简而言之：按钮在弹窗，边框要出现在网页里，求实现方法。

核心原理 #

Chrome扩展中，弹窗的脚本与网页的脚本是完全隔离的，弹窗里的document指向的是弹窗自身的DOM文档，所以document.body是弹窗的<body>元素，而非网页的。要操作网页DOM，必须使用内容脚本（Content Scripts）——这是一种能注入到目标网页中运行的脚本，可直接访问网页的DOM。

具体步骤 #

1. 配置manifest.json
   在扩展的manifest.json中添加内容脚本的配置，指定要注入的网页范围（比如所有网页）：

{
  // ... 其他manifest配置
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

2. 创建内容脚本content.js
   把创建边框的逻辑移到这个文件里，同时补充必要的样式（否则边框可能看不到）：

// content.js
function addBorder() {
  // 创建并设置上边框样式
  const frameUp = document.createElement("DIV");
  frameUp.style.position = "fixed";
  frameUp.style.top = "0";
  frameUp.style.left = "0";
  frameUp.style.width = "100%";
  frameUp.style.height = "12px";
  frameUp.style.backgroundColor = "#ff4444";
  frameUp.style.zIndex = "99999";
  frameUp.style.pointerEvents = "none"; // 不干扰网页交互

  // 同理创建并设置下、右、左边框
  const frameDown = document.createElement("DIV");
  frameDown.style.position = "fixed";
  frameDown.style.bottom = "0";
  frameDown.style.left = "0";
  frameDown.style.width = "100%";
  frameDown.style.height = "12px";
  frameDown.style.backgroundColor = "#ff4444";
  frameDown.style.zIndex = "99999";
  frameDown.style.pointerEvents = "none";

  const frameRight = document.createElement("DIV");
  frameRight.style.position = "fixed";
  frameRight.style.top = "0";
  frameRight.style.right = "0";
  frameRight.style.width = "12px";
  frameRight.style.height = "100%";
  frameRight.style.backgroundColor = "#ff4444";
  frameRight.style.zIndex = "99999";
  frameRight.style.pointerEvents = "none";

  const frameLeft = document.createElement("DIV");
  frameLeft.style.position = "fixed";
  frameLeft.style.top = "0";
  frameLeft.style.left = "0";
  frameLeft.style.width = "12px";
  frameLeft.style.height = "100%";
  frameLeft.style.backgroundColor = "#ff4444";
  frameLeft.style.zIndex = "99999";
  frameLeft.style.pointerEvents = "none";

  // 追加到网页的body中
  document.body.appendChild(frameUp);
  document.body.appendChild(frameDown);
  document.body.appendChild(frameRight);
  document.body.appendChild(frameLeft);
}

// 监听来自弹窗的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "addBorder") {
    addBorder();
  }
});

3. 修改popup的script.js
   弹窗里的按钮点击时，不再直接操作DOM，而是向当前活跃标签页的内容脚本发送消息：

// script.js（弹窗脚本）
document.addEventListener("DOMContentLoaded", function () {
    const button = document.createElement("button");
    button.innerHTML = 'click me';
    document.body.appendChild(button);
    button.onclick = function() {
      // 获取当前活跃标签页
      chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        // 向内容脚本发送触发边框的消息
        chrome.tabs.sendMessage(tabs[0].id, {action: "addBorder"});
      });
    };
});

关于document.body的说明 #

• 在弹窗的脚本中：document是弹窗页面的文档对象，document.body指向弹窗自身的<body>元素，所以之前的代码只会修改弹窗的DOM。
• 在内容脚本中：document是当前浏览器标签页打开的网页的文档对象，document.body指向网页的<body>元素，这样就能在网页上添加边框了。

内容的提问来源于stack exchange，提问作者N L