如何在 iframe 中运行由 Angular 制作的 chrome 扩展答案

【问题标题】：How to run chrome extension that is made by Angular, inside iframe如何在 iframe 中运行由 Angular 制作的 chrome 扩展
【发布时间】：2019-05-03 08:28:14
【问题描述】：

我正在尝试实现一个简单的 Chrome 扩展，它不会在默认弹出窗口上呈现其内容，而是在侧边栏上呈现。我已经意识到要做到这一点，我必须使用 iframe，因为它的默认行为是 chrome 扩展弹出样式。（它的最大宽度大小为 800 像素，高度为 600 像素。并且也无法设置其位置的样式）。

Angular Chrome Extension Scaffold Project

链接上方是 Angular Chrome 扩展脚手架项目的 github 存储库，我正在尝试使用 Angular 构建 chrome 扩展。

{
  "manifest_version": 2,
  "name": "extension test",
  "short_name": "extension test",
  "version": "1.0.0",
  "description": "extension test",
  "permissions": [
    "tabs",
    "downloads",
    "storage",
    "activeTab",
    "declarativeContent"
  ],
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "extension test",
    "default_icon": {
      "16": "assets/images/favicon-16.png",
      "32": "assets/images/favicon-32.png",
      "48": "assets/images/favicon-48.png",
      "128": "assets/images/favicon-128.png"
    }
  },
  "options_ui": {
    "page": "index.html#/option",
    "open_in_tab": false
  },
  "content_scripts": [
    {
      "js": ["contentPage.js"],
      "matches": ["<all_urls>"]
    }
  ],
  "background": {
    "scripts": ["backgroundPage.js"],
    "persistent": false
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "default_icon": {
    "16": "assets/images/favicon-16.png",
    "32": "assets/images/favicon-32.png",
    "48": "assets/images/favicon-48.png",
    "128": "assets/images/favicon-128.png"
  }
}

上面是我的 manifest.json 文件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Falcon Image Crawler</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

这就是 index.html 的样子。

最后是我的 App.component.ts 的样子

export class PopupComponent implements OnInit {
  constructor() {
  }

  public ngOnInit(): void {
    chrome.tabs.executeScript({
      code: `
      (function(){
      const iframe = document.createElement('iframe');
      iframe.src = chrome.runtime.getURL('index.html');
      iframe.style.cssText = 'position:fixed;top:0;left:0;display:block;' +
        'width:300px;height:100%;z-index:1000;';
      document.body.appendChild(iframe);
    })(); `
    });
  }
}

当我单击我的 chrome 扩展程序的图标时，Iframe 元素会显示在浏览器的左侧，但无法加载 index.html 并出现“未检查的 runtime.lastError：无法访问 chrome:// URL”错误，并且还会出现弹出窗口.

（描述其行为的图像）

是否有正确的方法来运行 chrome 扩展而不是在其默认弹出窗口上，而是在 iframe 上运行，我可以不受任何限制地设置它的样式？

【问题讨论】：

标签： javascript angular google-chrome google-chrome-extension

【解决方案1】：

您需要将您的index.html 添加到Web accessible resources 的数组中，如下所示：

{
  "manifest_version": 2,
  "name": "extension test",
  "short_name": "extension test",
  "version": "1.0.0",
  "description": "extension test",
  "web_accessible_resources": [
    "index.html"
  ],
  "permissions": [
    "tabs",
    "downloads",
    "storage",
    "activeTab",
    "declarativeContent"
  ],
  "browser_action": {
    "default_popup": "index.html",
    "default_title": "extension test",
    "default_icon": {
      "16": "assets/images/favicon-16.png",
      "32": "assets/images/favicon-32.png",
      "48": "assets/images/favicon-48.png",
      "128": "assets/images/favicon-128.png"
    }
  },
  "options_ui": {
    "page": "index.html#/option",
    "open_in_tab": false
  },
  "content_scripts": [
    {
      "js": ["contentPage.js"],
      "matches": ["<all_urls>"]
    }
  ],
  "background": {
    "scripts": ["backgroundPage.js"],
    "persistent": false
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
  "default_icon": {
    "16": "assets/images/favicon-16.png",
    "32": "assets/images/favicon-32.png",
    "48": "assets/images/favicon-48.png",
    "128": "assets/images/favicon-128.png"
  }
}

此外，如果您想在任何页面中包含脚本，则不需要使用chrome.tabs.executeScript，而是使用清单语法。

【讨论】：

谢谢，将 index.html 添加到 web_accessible_resources 字段使 index.html 可加载。但是当我点击浏览器顶部的图标时，我该如何处理它的默认弹出行为？（您可以在右上角的图像顶部看到一个小方块）
只需删除任何弹出代码，然后执行以下操作：stackoverflow.com/questions/7168362/… 在处理程序中，将注入脚本的代码放入
'只需删除任何弹出代码'意味着删除 manifest.json 文件中“browser_action”字段中的“default_popup”对吗？
我相信整个“browser_action”块可以被删除
感谢您的回答：）对我帮助很大