如何在Chrome扩展程序中嵌入迷你网页？

功能可行性说明 #

直接用iframe嵌入www.pinterest.com是行不通的。Pinterest网站通过设置X-Frame-Options和Content-Security-Policy (CSP) 响应头，禁止自身被第三方页面（包括Chrome扩展的页面）嵌套加载，这是网站的安全防护机制，用来防范点击劫持等恶意攻击。

可行的解决方法 #

1. 创建迷你独立窗口加载Pinterest #

不用iframe嵌套，直接通过Chrome扩展API创建一个小窗口打开Pinterest，效果和你预期的迷你网页一致：

• 在扩展的manifest.json中添加窗口权限：

  {
    "name": "你的扩展名称",
    "version": "1.0",
    "manifest_version": 3,
    "permissions": ["windows"]
  }
  

• 在扩展的弹窗或侧边栏页面中添加触发代码（比如按钮点击事件）：

  // 示例：点击按钮打开Pinterest迷你窗口
  document.querySelector('.open-pinterest-btn').addEventListener('click', () => {
    chrome.windows.create({
      url: 'https://www.pinterest.com',
      type: 'popup',
      width: 420,
      height: 650,
      left: window.screen.width - 440,
      top: 20
    });
  });
  

  这种方式是打开独立的浏览器窗口，不受iframe嵌套限制，能完整使用Pinterest的所有功能。

2. 用Pinterest官方API自定义展示内容 #

如果不需要完整的网站功能，只是想展示特定的Pin内容，可以用Pinterest官方API获取数据后自定义渲染：

1. 去Pinterest开发者平台注册应用，获取API密钥；
2. 调用官方提供的接口（比如获取用户Pin列表、热门内容等）；
3. 在扩展页面中用HTML/CSS把获取到的内容渲染出来，完全避开iframe的限制。

3. 不推荐的绕过方法（风险提示） #

如果非要尝试iframe嵌套，可通过扩展修改网站响应头移除限制，但强烈不推荐：

• 这种操作违反Pinterest的安全策略，可能导致网站功能异常、账号被封禁；
• 具体实现需要在manifest.json中声明declarativeNetRequest权限，并编写规则移除X-Frame-Options和CSP相关头，但实际使用中大概率会被Pinterest的反爬或安全机制拦截。

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