如何从PyScript浏览器扩展访问主HTML文档？

核心原因 #

你的扩展页面（比如index.html）运行在扩展自身的独立上下文中，和当前浏览的网页上下文完全隔离，所以直接调用document.documentURI获取的是扩展自身页面的URI，而非目标网页的。

两种解决方法 #

方法1：使用内容脚本（Content Scripts） #

内容脚本是注入到目标网页上下文的脚本，能直接访问网页的DOM和全局对象，适合需要持续监控网页的场景。

1. 修改manifest.json（以Manifest V3为例），添加content_scripts配置：

{
  "manifest_version": 3,
  "name": "你的扩展名称",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 匹配所有网站，可改为特定域名如"https://*.example.com/*"
      "js": ["content.js"] // 要注入的脚本文件
    }
  ],
  "action": {
    "default_popup": "index.html"
  }
}

2. 创建content.js文件，在其中获取网页数据并通过消息传递给扩展页面：

// content.js
const pageURI = document.documentURI;
// 向扩展的popup页面发送消息
chrome.runtime.sendMessage({ type: "PAGE_INFO", uri: pageURI });

3. 在index.html的脚本中接收消息：

// 可写在index.html的<script>标签内，或单独的popup.js文件中
chrome.runtime.onMessage.addListener((message) => {
  if (message.type === "PAGE_INFO") {
    console.log("当前网页URI:", message.uri);
    // 示例：把URI显示到扩展界面上
    document.body.innerHTML += `<p>当前网页URI：${message.uri}</p>`;
  }
});

方法2：按需执行脚本（Manifest V3） #

如果只需要在打开扩展popup时获取网页内容，可使用chrome.scripting.executeScript API，无需提前配置content_scripts。

在index.html的脚本中添加以下代码：

// 获取当前活跃标签页
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
  const activeTab = tabs[0];
  // 向目标标签页注入并执行脚本
  chrome.scripting.executeScript({
    target: { tabId: activeTab.id },
    func: () => document.documentURI // 要执行的函数，返回网页URI
  }, (results) => {
    const pageURI = results[0].result;
    console.log("当前网页URI:", pageURI);
    // 更新扩展界面
    document.body.innerHTML += `<p>当前网页URI：${pageURI}</p>`;
  });
});

注意：使用chrome.scripting需要在manifest.json中添加对应权限：

{
  // 其他配置...
  "permissions": ["scripting", "tabs"]
}

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