创建的 Iframe 和扩展、google chrome 扩展之间的通信

2024-03-29

我尝试从从我的扩展程序加载的 iframe 发送消息到我的扩展程序(后台脚本或内容脚本)。 创建的 Iframe 通过内容脚本从扩展加载。 我正在寻找一种沟通方式,但我所有的尝试都失败了......

清单.json

{
"author": "***********",
"background": {
    "page": "back/background.html",
    "persistent": true
},
"browser_action": {
    "default_title": "***",
    "default_popup": "./popup/popup.html"
},
"content_scripts": [
    {
        "matches": ["<all_urls>"],
        "js": ["./content/allurls.js"],
        "all_frames":true
    },
    {
        "matches": ["<all_urls>"],
        "js": ["./banner/confirm_banner.js"]
    }
],
"web_accessible_resources": [
    "frame.html"
],
"description": "oui",
"manifest_version": 2,
"name": "***",
"permissions": ["tabs"],
"version": "1.0"
}

Confirm_banner.js(加载 iframe)

var extensionOrigin = 'chrome-extension://' + chrome.runtime.id;

window.onload = load_iframe();

function load_iframe()
{
if (!location.ancestorOrigins.contains(extensionOrigin)) 
{
    var iframe = document.createElement('iframe');
    iframe.src = chrome.runtime.getURL('../frame.html');
    iframe.style.cssText = 'position:fixed;top:0;left:0;display:block;' +
                           'width:100%;height:40px;';
    document.body.appendChild(iframe);
}
}

Frame.js(与frame.html链接的脚本)

$(document).ready(function()
{
    $('#jamais').click(function()
    {
        send_message("BANNER", "jamais");
        alert("send");
    });
});

function send_message(type, data)
{
    var msg = {
        type: type,
        data: data
    };
    window.postMessage(msg, "*");
}

allurls.js 中的处理程序(内容脚本)

window.addEventListener('message', function(event) {
    if (event.data.type && (event.data.type === 'BANNER'))
    {
        alert("ouimonsieur");
    }
});

因此,来自 iframe.js 的消息发送得很好(由警报证明),但内容脚本没有收到任何消息,甚至在以下内容之前:

if (event.data.type && (event.data.type === 'BANNER'))

有人可以看看出了什么问题或者我可以使用什么其他消息传递协议(我也尝试过 top.window.postmessage)?


Ty wOxxOm 的答案,我很接近:

只需更换window by parent in frame.js一切都很完美。

因为即使内容脚本在 iframe 中运行,

Frame.js不是内容脚本,它是 iframe 脚本并在扩展的上下文中运行。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

创建的 Iframe 和扩展、google chrome 扩展之间的通信 的相关文章

  • WebPack 源映射令人困惑(重复文件)

    我决定在我今天正在启动的一个新项目上尝试 WebPack 并且我从源映射中得到了非常奇怪的行为 我在文档中找不到任何相关信息 在浏览 StackOverflow 时也找不到其他人遇到此问题 我目前正在查看由以下公司制作的 HelloWorl
  • Heroku 上重启后 Better-SQLite3 数据库重置

    我有一个 Discord 机器人better sqlite3 https github com JoshuaWise better sqlite3硬币和 XP 数据库 直到两周前它一直工作得很好 现在 每次重新启动后 它只会恢复 XP 和硬
  • firebase.storage() 不是玩笑测试用例中的函数

    我正在使用 Jest 来测试我的 firebase 功能 这一切都在浏览器中进行 因此我与服务器端的 firebase 没有任何冲突 当我使用firebase auth or firebase database 一切正常 当我尝试使用时fi
  • JavaScript 中的可选参数

    如果缺少剩余参数 为什么该函数不会抛出错误 showStatistics Mark Teixeira New York Yankees 1st Base 这是定义的函数 function showStatistics name team p
  • 如何使用 CSS 或 javascript 创建圆角

    复制 使用 CSS 创建圆角的最佳方法是什么 https stackoverflow com questions 7089 what is the best way to create rounded corners using css 7
  • ELEMENT.style.color 在 IE 中不起作用

    在一个小型 Web 应用程序中 我使用 JavaScript 在文本框中设置一些文本及其颜色 在下面的片段中 el 是我的对象 这段代码在 Firefox Opera 和 Safari 下产生了正确的效果 但在 IE 下却没有这样的运气 我
  • 如何设置黄瓜环境变量

    我有以下 package json name newcucumber version 1 0 0 main index js scripts test node modules bin cucumber js firefox node mo
  • 无法使用 MV3 从 Firefox 下的通用脚本导出到 background.js

    我试图在服务工作者 background js 和内容脚本之间重用一些功能 https stackoverflow com questions 73421706 how to reuse a javascript function betw
  • 如何在 .js 中的字符串中插入来自 ruby​​ 示例的变量[重复]

    这个问题在这里已经有答案了 在 ruby 中 您可以将变量插入到字符串中 如下所示 x sake puts I like x I like sake 例如 def what i like word I like word end 在 jav
  • Bootstrap shown.bs.tab 事件不起作用

    我正在使用灵活的模板 http the8guild com themes html flexy v1 7 stylesPage html 使用引导程序 并且我无法让选项卡上的 shown bs tab 事件正常工作 我已经成功让它发挥作用J
  • JavaScript - 类根据条件扩展

    事情是这样的 我有一个名为 A 的主课 我希望这个班级能够扩展 B 级 class A extends B 但事实上 我希望 B 类在特定条件下扩展 C D 或 E class B extends B1 or class B extends
  • jQuery 和所有 .js 文件无法在本地运行,只能在外部运行

    我有一个奇怪的问题 我正在编写一个网站 包括 jQuery 和一些插件 它们存储在 js 文件夹中 当我尝试通过浏览器 jQuery 打开它时 插件和所有自定义脚本都不起作用 也许这与我的代码有关 但不这么认为 当然 当我在外部包含 jQu
  • 输入和文本区域可以拖动吗?

    MDN 规范以及我能通过 Google 找到的每个网站都说所有 HTML 元素都可以拖动 然而 在实践中 我发现我无法拖动文本输入或文本区域 即使它们已被禁用 例如 使用以下代码 img src http www placehold it
  • 有没有办法显示嵌套在 Grid 组件内的 Material-UI 抽屉?

    我正在使用 Material UI 创建一个 Web 应用程序 主页分为 3 个网格 每个网格有一个height of 500px 我想在中间网格内显示一个带有一些操作选项的抽屉 那可能吗 到目前为止 我只能在整个屏幕上显示它 这是我的主要
  • Array.indexOf 如何比 Array.some 更高效

    这个问题的灵感来自于这个问题的竞争答案 具有多个参数的indexOf https stackoverflow com questions 39000151 indexof with multiple arguments 用户想知道一种有效的
  • 使用 jquery 时出现控制台错误 - Uncaught TypeError: Object # has no method

    我尝试使用以下 js 添加类或 css 样式 但出现控制台错误 var i 0 question i addClass show 收到以下控制台日志错误 Uncaught TypeError Object has no method add
  • 通过ajax POST提交两次表单

    插入到mysql using php通过文件调用AJAX 前insert语句php代码执行select查询到查找重复记录并继续insert statement Issue 从ajax调用php文件时 它执行了两次并得到作为重复记录的响应 好
  • 您最喜欢的 JS/CSS 下拉菜单是什么? [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 希望在网站上实现一个 只是好奇其他人都使用过什么以及他们有过什么样的体验 EDIT我也不是一个超级粉丝
  • 我应该采取什么圆角方法?

    因此 关于圆角的信息并不缺乏 我已经经历过其中的大部分 我发帖是为了征求社区对这一点的意见 我的场景是 我们正在开发一个圆角相关设计 主要用于交互
  • 当 mp4 是唯一来源时,自定义 HTML5 视频控件不起作用

    问题 我只有一个视频源 mp4 因为我正在尝试向 tumblr 视频添加自定义控件 如果只有mp4作为源video duration返回为NaN 作为使用 3 个源 mp4 webm ogg 时的测试 它可以工作 所以video durat

随机推荐

  • 尝试通过 SSH 连接到远程主机时出错

    我正在尝试连接到远程主机以发出命令 但在运行代码时收到以下错误消息 ssh 握手失败 ssh 没有通用的密钥交换算法 客户提供 电子邮件受保护 cdn cgi l email protectionecdh sha2 nistp256 ecd
  • Hive 函数替换列值中的逗号

    我有一个配置单元表 其中字符串列的值为 12 345 有没有什么方法可以在插入此配置单元表期间删除逗号的配置单元函数 您可以使用regexp replace string INITIAL STRING string PATTERN stri
  • vbscript 使用 Ccur 四舍五入到小数点后两位

    我在用CCur 代替CDbl 正如这个问题中的回答 vbscript 数学表达式不起作用 https stackoverflow com questions 13569944 vbscript mathematical expression
  • 如何在 JTextPane 中为文本和下划线设置不同的颜色?

    刚刚尝试为 JTextPane 中的文本着色 但问题是文本和下划线不能有不同的颜色 我应该怎么做或者这是否可能 下面的示例以红色打印所有文本和下划线 JTextPane pane new JTextPane StyleContext con
  • 事件未在首页加载时加载,但在刷新后有效

    我正在创建一个名为员工管理系统的应用程序Rails 7 为了添加员工 我创建了一个表单 在这里 我使用nested form fields gem 来添加员工的联系人 问题是当第一次加载表单时 当我想添加或删除联系人字段时 它会重定向到同一
  • 从 dplyr 中选择函数时出错

    当我使用 dplyr 中的 select 函数时 它不起作用 并给出一个错误 指出我要选择的列名称是未使用的参数 但是 如果我在函数调用之前指定 dplyr 如 s dplyr select 那么它会正常工作 这是一个示例 df sampl
  • GCE:如何创建从外部端口80到内部端口5555的转发规则

    我第一次使用谷歌计算引擎 我想设置一个网络负载平衡器 具有静态IP 侦听端口80 但转发到侦听端口5555的后端服务器 我发现的所有示例都显示转发80到80 这在以下方面没有帮助我的情况 ref https cloud google com
  • 许多元素上的 ngClass 使网站非常慢

    我目前正在我的 Angular 6 应用程序中制作一个树视图 我正在使用它 嵌套和所有内容 我遇到的问题之一是 当我的页面有很多元素 几千个 并且它们都有 ngClass 在它们上 根据所选节点显示不同的颜色 页面往往会挂起很多 我创建了一
  • 通过鼠标单击并拖动绘制矩形 - javascript

    我试图在 Javascript 中绘制一个矩形 实际上是一个选择框 以选择选择中的 SVG 元素 我尝试修复单击并拖动矩形的代码 http jsfiddle net 7uNfW 26 http jsfiddle net 7uNfW 26 但
  • 如何在同一应用程序中运行 Spring Boot 管理客户端和服务器

    我想在同一个应用程序中运行 spring boot 管理服务器和客户端 我更改了服务器端口 当我更改服务器端口时 spring admin 将访问我更改的端口 这样我就可以运行管理服务器 但我看不到我的网络应用程序页面 我需要这样的输出 本
  • 根据请求更改表单字段

    应用程序有一个类别字段 可以在会话中设置 也可以不设置 如果是 我不想看到表单上的字段 只需将其作为隐藏字段 其值等于请求中的值 如果未设置 那么我想显示一个下拉菜单 我已经设置了表单以包含下拉列表 这是该字段的默认设置 我的问题是 将小部
  • 将扰乱的 PDF 字符重新映射为可读文本

    我确实遇到了一个问题 因为 cups PDF 创建的 PDF 文档中的字符被映射到奇怪的符号 在 Ubuntu Linux 14 04 和 16 04 上 我认为它是某种 unicode 即使 Python 告诉我它的字符串类型 type
  • Magento CE :: 第一次订购有折扣吗?

    是否有任何合理的方式可以为客户的第一笔订单提供折扣 我想这会要求用户注册一个免费帐户 这很好 但在那之后 我就陷入了困境 Magento 中的促销功能无法满足此类需求 Google 也找不到任何好的潜在客户 Ideas 没有任何开箱即用的方
  • 如果在 Inno Setup 中更新安装,则排除 ssPostInstall 步骤中的部分代码部分

    我尝试对两者使用相同的安装程序 全新安装和更新 因此 如果用户第一次尝试安装我的应用程序 它将运行完整安装 包括 MySQL 安装程序作为先决条件 以及 MySQL 安装的一部分 Code 就会正常执行 但是 如果用户已经安装了我的应用程序
  • 通过 Vertex AI 用户管理笔记本中的启动后脚本创建自定义内核

    我正在尝试使用启动后脚本创建一个 Vertex AI 用户管理笔记本 其 Jupyter Lab 在首次启动时有一个专用的虚拟环境和相应的计算内核 我已成功创建实例 然后作为 Jupyter Lab gt Terminal 中的第二个手动步
  • 在 IE8 中,jquery-ui 的对话框将其内容的高度设置为零。我怎样才能解决这个问题?

    我正在使用 jquery UI 的对话框小部件在我的 Web 应用程序中呈现模式对话框 我通过将所需 DOM 元素的 ID 传递到以下函数来实现此目的 var setupDialog function eltId eltId dialog
  • 集成 bootstrap-select 以与 Ember 配合使用

    我想得到引导选择 https github com silviomoreto bootstrap select使用 Ember js Ember 对视图对象的管理存在一些问题 导致其无法按预期工作 JSFiddle http jsfiddl
  • 不兼容的 firebase 库

    我使用的是最新版本com google firebase firebase core 16 0 3和最新版本的com google firebase firebase messaging 17 3 1 但它们取决于不同的版本com goog
  • 列出 Google Fonts API 中的所有可变字体?

    我需要通过 Google Fonts API 获取所有可用的可变字体的列表 我可以从这个端点获取所有字体名称 您可以添加一些参数 但我认为其中不包括可变字体过滤器 我认为在进行 API 调用后我无法过滤结果 这里的 Open Sans 是一
  • 创建的 Iframe 和扩展、google chrome 扩展之间的通信

    我尝试从从我的扩展程序加载的 iframe 发送消息到我的扩展程序 后台脚本或内容脚本 创建的 Iframe 通过内容脚本从扩展加载 我正在寻找一种沟通方式 但我所有的尝试都失败了 清单 json author background pag