单击扩展程序的图标时，有没有办法添加 HTML答案

【问题标题】：Is there a way of adding an HTML when the extension's icon is clicked单击扩展程序的图标时，有没有办法添加 HTML
【发布时间】：2020-02-16 04:09:26
【问题描述】：

其实

我想写一个小的 chrome 扩展来给我窗口的尺寸。

所以我决定在点击扩展程序图标时使用注入网页的 HTML 代码

我尝试了很多东西，但都不起作用（没有出现注入的html）

这是我现在的manifest.json：

{
    "name": "Dimension",
    "version": "1.0",
    "description": "Giving you the window dimensions live!",

    "permissions": [
      "tabs", "<all_urls>"
    ],
    "content_scripts": [
      {
        "matches": ["<all_urls>"],
        "css": ["dimension.css"],
        "js": ["inject.js"]
      }
    ],
    "web_accessible_resources": ["dimension.html", "dimension.css", "dimension.js"],
    "browser_action": {},
    "manifest_version": 2
  }

inject.js文件：

console.log("inject script loaded")

chrome.browserAction.onClicked.addListener(inject)

function inject() {
    var iFrame  = document.createElement ("iframe");
    iFrame.src  = chrome.extension.getURL ("dimension.html");

    document.body.insertBefore (iFrame, document.body.firstChild);
    console.log('html injected')
}

我也尝试将 inject.js 作为后台脚本，但它正在将 html 文件打开到扩展后台环境中（当您检查后台脚本时）

【问题讨论】：

标签： javascript html google-chrome-extension

【解决方案1】：

使用内置的开发工具检查和调试您的代码。它应该显示关于 chrome.browserAction 未定义的错误。此 API 不能在内容脚本中使用：大多数扩展 API 侦听器都需要后台脚本。

要访问网页，您需要一个内容脚本，但不需要声明它，只需使用programmatic injection，也不需要这些权限。在这种情况下，单个 activeTab 就足够了。

manifest.json

{
  "name": "Dimension",
  "version": "1.0",
  "description": "Giving you the window dimensions live!",
  "permissions": ["activeTab"],
  "web_accessible_resources": ["dimension.*"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "browser_action": {},
  "manifest_version": 2
}

background.js

chrome.browserAction.onClicked.addListener(tab => {
  chrome.tabs.executeScript(tab.id, {file: 'inject.js'});
});

在您的 inject.js 文件中，将 chrome.browserAction 行替换为 inject();

【讨论】：