Chrome扩展中用JavaScript获取当前页面指定HTML元素值的问题

嘿，我一眼就看出你遇到的问题根源了——那个TypeError: Cannot read property 'value' of null错误，本质是你的background脚本根本访问不到当前标签页的DOM环境。

背景脚本（background.js）运行在Chrome独立的后台页面里，和你打开的目标网页完全是两个隔离的上下文，你直接在background里调用document.getElementById("productTitle")，自然找不到页面里的元素，返回null后再去访问value就会报错。

要解决这个问题，我们得用Chrome扩展的内容脚本（Content Scripts）——它能注入到目标网页中，直接和页面DOM交互。下面是完整的修正方案：

步骤1：创建内容脚本文件 #

新建一个content.js文件，专门用来获取页面里的商品标题：

// content.js
function getProductTitle() {
  // 注意：productTitle通常是文本展示元素（比如h1、div），用textContent而非value
  const titleElement = document.getElementById("productTitle");
  return titleElement ? titleElement.textContent.trim() : null;
}

// 监听来自background脚本的消息请求
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === "getProductTitle") {
    const title = getProductTitle();
    sendResponse(title);
  }
});

步骤2：修改manifest.json，注册内容脚本 #

更新你的manifest.json，添加content_scripts字段，指定脚本注入的目标网站（这里用<all_urls>匹配所有网站，你可以根据需求缩小范围）：

{
  "manifest_version": 2,
  "name": "Test Extension",
  "version": "0.0",
  "background": {
    "persistent": false,
    "scripts": ["background.js"]
  },
  "browser_action": {},
  "permissions": ["activeTab", "tabs", "<all_urls>"],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

步骤3：修改background.js，通过消息传递获取标题 #

更新background.js，不再直接操作DOM，而是通过消息通知内容脚本获取标题，拿到结果后再发送到PHP接口：

// background.js
function sendCurrentTitle(title) {
  var req = new XMLHttpRequest();
  req.addEventListener('readystatechange', function (evt) {
    if (req.readyState === 4) {
      if (req.status === 200) {
        alert('Saved !');
      } else {
        alert("ERROR: status " + req.status);
      }
    }
  });
  req.open('POST', 'http://url/a.php', true);
  req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  // 用encodeURIComponent编码标题，避免特殊字符破坏参数格式
  req.send('url=' + encodeURIComponent(title));
}

chrome.browserAction.onClicked.addListener(function (tab) {
  // 向当前活跃标签页的内容脚本发送消息请求
  chrome.tabs.sendMessage(tab.id, {action: "getProductTitle"}, (response) => {
    if (response) {
      sendCurrentTitle(response);
    } else {
      alert("Failed to get product title!");
    }
  });
});

额外提醒 #

• 我把value改成了textContent，因为productTitle这类元素大多是文本展示标签（比如亚马逊的商品标题是h1），只有输入框才用value，这个细节很容易踩坑！
• 发送请求时用encodeURIComponent处理标题，能避免特殊字符导致的参数解析错误。
• 确保你的PHP接口http://url/a.php能正常接收POST请求并处理url参数。

这样修改后，点击扩展图标时，background脚本会触发内容脚本获取标题，内容脚本拿到结果后回传给background，最后由background把标题发送到你的PHP接口，就不会再出现之前的错误了。

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