时间戳

首页 > 解决方案 > 如何在 iframe 中运行由 Angular 制作的 chrome 扩展

javascript - 如何在 iframe 中运行由 Angular 制作的 chrome 扩展

问题描述

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

Angular Chrome 扩展脚手架项目

链接上方是 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 上，我可以不受任何限制地设置它的样式？

标签： javascriptangulargoogle-chromegoogle-chrome-extension

解决方案

您需要将您添加到Web 可访问资源index.html数组中，如下所示：

{
  "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此外，如果您想在任何页面中包含脚本，则不需要使用，而是使用清单语法。

推荐阅读