Chrome扩展无法获取DOM元素求助：已配置权限仍返回null

你之所以拿到null，是因为Popup的JS运行在独立的隔离环境里，根本碰不到当前网页的DOM。tabela_ocen是目标网页里的元素，但你的popup.js只能访问popup.html自己的DOM结构，自然找不到这个元素。

要操作网页里的DOM，必须用Chrome扩展的Content Script来实现，具体如下：

1. 更新manifest.json #

添加Content Script的配置，指定要注入脚本的网页范围：

{
  "manifest_version": 3,
  "name": "你的扩展名",
  "version": "1.0",
  "permissions": ["activeTab"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 换成你需要的目标域名，比如"https://xxx.com/*"
      "js": ["content.js"]
    }
  ],
  "action": {
    "default_popup": "popup.html"
  }
}

2. 新建content.js #

这个脚本会注入到目标网页中，能直接访问网页DOM：

// 监听来自Popup的消息
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getTable') {
    const tabela = document.getElementById('tabela_ocen');
    sendResponse(tabela ? tabela.outerHTML : null);
  }
});

3. 修改popup.js #

让按钮点击后，通过消息通知Content Script去获取元素：

document.getElementById("gdynianka_komentarz_button").addEventListener('click', () => {
  // 获取当前活跃标签页
  chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
    // 给Content Script发消息
    chrome.tabs.sendMessage(tabs[0].id, {action: 'getTable'}, (response) => {
      alert(response);
      document.getElementById("gdynianka_komentarz_button").style.color = 'blue';
    });
  });
});

• Popup和网页是完全隔离的上下文，它们的DOM、JS环境互不干扰，不能直接跨环境访问元素。
• Content Script是唯一能直接操作网页DOM的扩展组件，同时支持和Popup通过消息机制通信。
• 尽量缩小matches的范围，只在需要的网页注入脚本，避免浪费资源。

内容的提问来源于stack exchange，提问作者Sławek Lis