Chrome扩展开发问题：获取页面meta属性内容并在popup显示失败

我来帮你搞定这个问题——你遇到的核心卡点是Chrome扩展的Popup和当前页面属于完全独立的执行上下文，直接在popup.js里用$('#id-string')其实是在操作Popup自身的DOM，根本碰不到目标页面的Meta标签。下面分两种主流Manifest版本给出解决方案：

一、Manifest V3（推荐，当前Chrome扩展标准） #

1. 先更新manifest.json权限 #

你需要新增scripting权限，因为V3里注入脚本必须声明这个权限：

{
  "manifest_version": 3,
  "permissions": ["activeTab", "tabs", "storage", "scripting", "<all_urls>"],
  // 其他配置（比如action、icons等）保持不变
}

2. 修改popup.js代码 #

核心思路是：通过chrome.scripting.executeScript向当前激活的页面注入一段脚本，在页面上下文里提取Meta标签的内容，再把结果传回Popup展示：

// 先获取Popup里的按钮和用于展示的Div
const popupButton = $('#popup-button'); // 替换成你实际的按钮ID
const metaContentDiv = $('#id-string');

// 绑定按钮点击事件
$(document).ready(() => {
  popupButton.on('click', async function() {
    // 1. 获取当前激活的标签页ID
    const activeTabs = await chrome.tabs.query({ active: true, currentWindow: true });
    const activeTabId = activeTabs[0].id;

    // 2. 向页面注入脚本，提取Meta标签内容
    chrome.scripting.executeScript({
      target: { tabId: activeTabId },
      func: extractMetaContent // 要注入到页面的函数
    }, (results) => {
      // 3. 把结果展示到Popup的Div里
      if (results && results[0]?.result) {
        metaContentDiv.text(results[0].result);
      } else {
        metaContentDiv.text('未找到目标Meta标签');
      }
    });
  });
});

// 这个函数会在目标页面的上下文执行，能直接访问页面DOM
function extractMetaContent() {
  // 替换成你要提取的Meta标签的选择器，示例：
  // 提取name为description的Meta标签
  const metaTag = document.querySelector('meta[name="description"]');
  // 或者提取property为og:title的OpenGraph标签：
  // const metaTag = document.querySelector('meta[property="og:title"]');
  
  return metaTag ? metaTag.getAttribute('content') : null;
}

二、Manifest V2（旧版本，仅兼容老Chrome） #

如果你的扩展还在用V2，不用加额外权限，直接用chrome.tabs.executeScript注入代码：

const popupButton = $('#popup-button');
const metaContentDiv = $('#id-string');

$(document).ready(() => {
  popupButton.on('click', function() {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      chrome.tabs.executeScript(tabs[0].id, {
        // 直接写要执行的代码字符串
        code: `
          const metaTag = document.querySelector('meta[name="description"]');
          metaTag ? metaTag.getAttribute('content') : '未找到目标Meta标签';
        `
      }, (results) => {
        metaContentDiv.text(results[0]);
      });
    });
  });
});

关键注意事项 #

• 选择器要准确：Meta标签一般不用id，大多用name、property或http-equiv属性，一定要根据你要提取的标签调整querySelector的参数。
• DOM加载时机：记得用$(document).ready()或者原生DOMContentLoaded事件包裹代码，确保Popup的DOM元素加载完成后再绑定事件。
• 权限验证：如果还是报错，检查manifest.json里的权限是否正确，V3必须有scripting，V2确保有activeTab或<all_urls>。

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