chrome 扩展 - externally_connectable 的替代品?

2024-03-14

允许网站与扩展程序通信的 externally_connectable 功能似乎仍在开发通道中,并且尚未稳定。在我等待此功能变得稳定期间,是否有其他方法允许特定网站与我的扩展程序进行通信? Chrome 扩展开发人员传统上是如何做到的?


感谢 Rob W 为我指明了 HTML5 消息传递的方向。为了其他 Chrome 扩展开发人员的利益,我正在撰写有关我试图解决的一般问题以及最终有效的解决方案的文章。

我正在制作一个 chrome 扩展,可以通过弹出播放器控制选项卡上的音乐播放。当用户单击弹出播放器上的播放/暂停等时,扩展程序应该能够将该消息传达给网页并返回一个响应,说明该操作是否已完成。

我的第一个方法是将内容脚本注入音乐播放器页面。但问题是,内容脚本在“沙箱”中运行,无法访问页面上的本机 JavaScript。因此,内容脚本(就其本身而言)非常无用,因为虽然它可以从扩展程序接收命令,但它无法对网页本身产生任何更改。

对我有利的一件事是,播放音乐的网站属于我,因此我可以将我想要的任何 JavaScript 放在那里并从服务器提供服务。这正是我所利用的优势:我创建了另一个 javascript 文件,该文件将驻留在网站上,并通过页面的窗口对象(即HTML5 消息传递)。这只有效,因为内容脚本和 JavaScript 文件都存在于同一网页中,并且可以共享页面的窗口对象。感谢 Rob W 向我指出了此功能。下面是页面上的 javascript 文件如何通过 window 对象启动与内容脚本的连接的示例:

content_script.js(通过扩展注入 xyz.com):

window.addEventListener("message", function(event) {
    if(event.data.secret_key &&
      (event.data.secret_key === "my_secret_key") && 
       event.data.source === "page"){
        if(event.data.type){
            switch(event.data.type) {
                case 'init':
                    console.log("received connection request from page");
                    window.postMessage({source: "content_script", type: 'init', 
                                        secret_key: "my_secret_key"}, "*");
                    break;
            }
        }
    }
}, false);

onpage.js(驻留在服务器上并与 xyz.com 一起提供服务):

window.postMessage({source: "page", type: 'init', 
                    secret_key: "my_secret_key"}, "*");

window.addEventListener("message", function(event) {
    if(event.data.secret_key && 
      (event.data.secret_key === "my_secret_key") && 
       event.data.source === "content_script"){
        if(event.data.type){
            switch(event.data.type) {
                case 'init':
                    console.log("connection established");
                    break;
            }
        }
    }
}, false);

我检查密钥只是为了确保消息来自我期望的地方。

就是这样!如果还有什么不清楚的地方,或者有什么疑问,欢迎继续关注!

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

chrome 扩展 - externally_connectable 的替代品? 的相关文章

随机推荐

  • 基于标准 PHP 查询字符串的路由

    如您所知 Zend Framework v1 10 使用基于斜杠分隔的参数的路由 例如 server controllerName actionName param1 value1 param2 value2 问题是 如何强制 Zend F
  • Angular 5 - 复制到剪贴板

    我正在尝试实现一个图标 单击该图标会将变量保存到用户的剪贴板 我目前已经尝试了几个库 但没有一个能够做到这一点 如何在 Angular 5 中正确地将变量复制到用户的剪贴板 解决方案一 复制任何文本 HTML
  • 使用 PHP 动态创建对象,无需变量赋值

    我只是好奇在 PHP 中是否可以动态创建对象 我以为我以前见过它完成的 当然 我可以将它分配给一个变量 但只是想知道这是否可能 new className gt someMethod 当然 这会引发语法错误 所以显然它不是那样做的 如果可能
  • 关于如何在 Nginx 位置块部分使用正则表达式的指南?

    Nginx 正则表达式位置语法 正则表达式可以与 Nginx 位置块部分一起使用 这是通过 PCRE 引擎实现的 由于没有完整记录 该功能到底支持什么 Nginx 位置 Nginx 位置块部分有一个搜索顺序 一个修饰符 一个隐式匹配类型以及
  • AWS S3 中预签名 URL 的安全性如何?

    我计划将用户重定向到 S3 中存储的敏感资源的预签名 URL 这些是在检查用户权限后生成的 并且具有激进的超时 30 秒 然而 我担心的是 我的客户端计算机上存在的某些恶意软件是否有可能捕获 URL 并在 URL 的过期时间内仍然下载文件
  • 钥匙串数据存储在哪里?

    关于iOS中钥匙串的几点 安全保存用户名和密码 如果多个应用程序共享相同的代码签名条款和捆绑种子 ID 则它们可以共享数据 我的问题是 钥匙串数据存储在哪里 绝对在应用程序沙箱之外 我们可以处理它们吗 iOS 应用程序中钥匙串还有哪些用途
  • 如何在不使用域白名单的情况下隐藏Android PhoneGap中的地址栏?

    谁能告诉我如何隐藏 Android PhoneGap 中的地址栏 我正在尝试捕获图像 但图像功能在 PhoneGap 中不起作用 在浏览器中同样可以工作 所以 我想隐藏地址酒吧 是的 用这个小小的 Javascript 就可以做到这一点
  • 调试时静态变量初始值设定项的运行时评估中的奇怪现象

    当我从 Visual Studio 内部启动并附加调试器 F5 时 我的应用程序运行良好 但是当我启动应用程序而不附加调试器 Ctrl F5 或启动 exe 文件 时 我总是得到一个StackOverflowException幸运的是 它被
  • 你可以为ios设置带有FCM通知的thread-id吗

    Firebase FCM 消息支持tag对于 Android 这会导致新通知用具有相同标签的旧通知替换前一个通知 有没有办法在ios上做同样的事情 This answer https stackoverflow com a 43220782
  • 更改 form_for Rails 3.1 生成的 html 表单 id

    我有这个表格 生成下一个代码 html
  • AngularJS 不清理由 ng-include 创建的子作用域

    我有以下用例 我提供一个对话服务 根据上下文放置不同的内容 在服务方法中 我手动编译一个 dom 元素并使用它来使用 jquery ui 显示对话框 代码如下 var view jQuery div span span div var co
  • 将 awk 命令存储在 bash 脚本的变量中

    我试图store an awk 命令 命令 而不是结果 在变量中 我的目标是稍后在脚本中使用该变量 并具有不同的输入 例如 cmd awk something if END cmd input 我尝试将命令存储为 如示例中所示 也可以bac
  • 在 Django 中强制使用小写用户名

    目前 在 django contrib auth 中 可以有两个用户名为 john 和 John 的用户 我怎样才能防止这种情况发生 最直接的方法是在 contrib auth models 中添加一个干净的方法 并在保存之前将其转换为小写
  • 尝试连接到 Oracle 数据库时出现“ORA-01012”错误消息

    我使用 C 和 Oracle Data Provider for NET ODP 对数据库进行了一次长查询 然后使用 TOAD 结束了服务器端的连接 之后 后续调用数据库 即使创建新的OracleConnection对象 也会抛出以下错误
  • Flutter:根据某些条件过滤列表

    我有一份电影清单 其中包含所有动画和非动画电影 为了识别它是否是动画的 有一个名为isAnimated 我只想显示动画电影 我怎样才能做到这一点 toList 缺少具体化结果 AnimatedMovies AllMovies where i
  • link_to :confirm 显示弹出窗口两次

    这个标签带有rails 3 生成这个 html a href news 3 Destroy a 该条目被删除 问题是弹出窗口出现两次 可能是什么原因造成的 我也遇到了同样的问题 并花了一个多小时的时间来研究它 我在我的情况下找到了解决方案
  • 康乐福原型继承

    在下面的文章中 Douglas Crockford 创建了一个函数来更接近地模拟 JavaScript 中的原型继承 http javascript crockford com prototypal html http javascript
  • 使用连接生成 mysql erd [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我需要从 mysql 数据库转储生成 er 图 我尝试了很多工具 例如 MySQL WorkBench
  • Sqlite 更新无法正常工作 - python

    编辑 经过一些测试 我发现它不是失败的添加点方法 我正在为 irc 机器人开发一个小游戏 此方法将更新名为 score 的数据库中的分数 只有两名玩家 这是一个sqlite数据库 主要是更新sql 无法正常工作 Thanks def add
  • chrome 扩展 - externally_connectable 的替代品?

    允许网站与扩展程序通信的 externally connectable 功能似乎仍在开发通道中 并且尚未稳定 在我等待此功能变得稳定期间 是否有其他方法允许特定网站与我的扩展程序进行通信 Chrome 扩展开发人员传统上是如何做到的 感谢