Chrome扩展开发求助：如何遍历并显示HTML中所有段落

以下是整合遍历逻辑后的完整代码，同时修复了原代码中的参数错误，并优化了内容展示效果：

chrome.tabs.query({
    active: true,
    lastFocusedWindow: true
}, function(array_of_Tabs) {
    chrome.tabs.executeScript(array_of_Tabs[0].id, {
        code: `
            let paragraphs = document.getElementsByTagName("p");
            let allContent = '';
            for(let i = 0; i < paragraphs.length; i++) {
                // 保留段落原格式，用<p>标签包裹每个段落内容
                allContent += '<p>' + paragraphs[i].innerHTML + '</p>';
            }
            chrome.runtime.sendMessage(allContent);
        `
    }); 
});

chrome.runtime.onMessage.addListener(function(request) {
   document.getElementsByTagName('html')[0].innerHTML = `
       <style>
           body { padding: 20px; font-family: Arial, sans-serif; }
           p { margin-bottom: 15px; line-height: 1.6; }
       </style>
       ${request}
   `;
});

关键修改点说明 #

• 修正参数错误：原代码中误用了未定义的tab.id，改为array_of_Tabs[0].id（chrome.tabs.query返回的是tabs数组，第一个元素为当前激活标签页）。
• 整合遍历逻辑：在注入到页面的脚本中，遍历所有<p>标签，将每个段落的内容拼接成完整的HTML字符串，确保展示时保留段落原有格式。
• 优化展示样式：添加基础CSS样式，让内容排版更清晰，避免贴边和拥挤问题。

如果需要仅展示纯文本（过滤段落内的HTML标签），可将注入脚本中的paragraphs[i].innerHTML替换为paragraphs[i].innerText。

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