类型错误:浏览器未定义(Web 扩展消息传递)

2024-03-11

我正在尝试使用下面的代码将我的网页脚本与我的网络扩展的内容脚本进行通信

网页脚本

const browser = window.browser || window.chrome;
browser.runtime.sendMessage(message,
     function (response) {
          console.log(response);
     }
);

但是,我不断收到错误TypeError: browser is undefined。如果我使用也是如此chrome.runtime.sendMessage()反而。

我应该如何使用这个方法?


这里的问题是,出于安全目的,用户/网页脚本(非特权脚本)无权访问 JavaScript API,并且browser, chrome是 JavaScript API 的一部分,只能通过特权脚本访问,例如 Web 扩展的后台脚本和内容脚本(同样,内容脚本无法访问所有 J​​avaScript API)。基本上,如果您需要将数据从网页脚本发送到后台脚本,CustomEvent应该用于将数据发送到充当桥梁的内容脚本,然后使用以下命令将该数据发送到后台脚本browser.runtime.sendMessage。 PFB 示例代码

window.onload = function(){
    document.dispatchEvent(new CustomEvent("myEvent",{
        detail:["Hello","World"]
    }));
}

内容脚本.js

document.addEventListener("myEvent", function (event) {
browser.runtime.sendMessage({
    data: event.detail
});

背景.js

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

类型错误:浏览器未定义(Web 扩展消息传递) 的相关文章

  • JavaScript 的 eval() 什么时候不是邪恶的?

    我正在编写一些 JavaScript 代码来解析用户输入的函数 用于类似电子表格的功能 解析了公式我could将其转换为 JavaScript 并运行eval 就可以得到结果了 然而 我一直回避使用eval 如果我可以避免它 因为它是邪恶的
  • 在 JSP 中从 JavaScript/jQuery 调用后端 Java 方法

    我有一个 JSP 其中有一个select包含实体种类名称的列表 当我选择一个实体类型时 我需要填充另一个实体类型select包含所选实体类型的字段名称的列表 为此 我调用了一个 JavaScript 函数onchange event 在 J
  • 如何在jsdoc上添加和使用标签?

    我正在尝试向 jsdoc 添加自定义标签 我在插件目录中创建了一个文件 如下所示 方法 js exports defineTags function dictionary dictionary defineTag methodHttp mu
  • JavaScript 符号并不能阻止对象中的名称冲突

    我已经开始研究 JavaScript 中的符号 并开始在我的对象中使用它们来帮助解决名称冲突 但是在使用它们时我仍然可以覆盖属性吗 我很难理解 JavaScript 中符号的意义 它们被谈论了很多 人们说它们很聪明 因为它们不会导致对象中的
  • 使用 ES6 `import` 语法时出现“无法解析符号”

    Here http www qimingweng com react modal dialog 给出了如何从模块导入某些类的示例 import ModalContainer ModalDialog from react modal dial
  • NodeJS 中的 uglify-js“找不到模块”

    在这里我正在创建应用程序来压缩 javascript 文件 我所做的步骤 在我的本地机器上安装了nodeJS 检查节点和 npm 正在工作 通过 npm install uglify js g 安装 uglify js 并安装 当我尝试在命
  • 从 Google 电子表格中的列填充 HTML 下拉菜单

    我是 gs 的新手 所以这应该不难 我有一个 Google 电子表格 其中一列中有值 假设 A 列 我使用 gs 创建了一个自定义菜单 用户将在其中选择一个选项 单击其中一个选项 新组件 将出现一个弹出窗口 其中包含一个下拉菜单 用户应从其
  • Google Chrome API:如何添加我的应用程序以在“新标签”(应用程序)页面上显示图标?

    我注意到 新选项卡 页面有一个应用程序部分 但默认情况下不在那里添加应用程序 我需要做什么才能让我的申请出现在那里 托管应用程序和打包应用程序 http code google com chrome webstore docs choosi
  • jQuery 上下文菜单下拉菜单

    我正在使用这个 contextMenu 模板 http medialize github com jQuery contextMenu index html http medialize github com jQuery contextM
  • React this.setState 不是一个函数

    尝试编写使用第 3 方 API 的应用程序时不断收到此错误 类型错误 this setState 不是一个函数 当我尝试处理 API 响应时 我怀疑这个绑定有问题 但我不知道如何修复它 这是我的组件的代码 var AppMain React
  • JavaScript 按属性删除对象数组中的元素

    我有一个以下形式的对象数组 prop1 value1 banks id value property2 value2 所以我想要做的是通过搜索 id 值来删除 banks 属性中的元素 然后从banks数组中删除找到的元素 id 属性具有唯
  • preg_match_all JS 等效吗?

    Javascript 中是否有与 PHP 的 preg match all 等效的函数 如果没有 将正则表达式的所有匹配项放入数组的最佳方法是什么 我愿意使用任何 JS 库来让它变得更容易 您可以使用match使用全局修饰符 gt gt g
  • Express.js“app.use()需要中间件功能”

    我正在学习 Express js 4 和 Node 但遇到了一个我无法弄清楚的错误 我正在尝试使用 node sass 包来编译我的 sass 代码 但我无法启动并运行它 这是我的主文件的精简版本 var express require e
  • ES6 标记的​​模板函数如何解释它们的参数顺序?

    考虑以下代码 function f console log Array from arguments var x 2 var y 3 f before x y after 论据f将会 根据 Traceur http google githu
  • 单击按钮滚动到特定 div

    我有一个具有固定菜单和内容框 div 的页面 单击菜单时 内容框滚动到特定 div 到目前为止 一切都很好 这是这里的示例 https jsfiddle net ezrinn 8cdjsmb9 11 https jsfiddle net e
  • 当直接调用函数时,React 如何/为什么知道函数组件内没有调用钩子?

    出于好奇 我想call直接一个React函数组件 就像常规函数一样 然而 React 抱怨道 Invalid hook call Hooks can only be called inside of the body of a functi
  • 如何在 i18next 中使用多个命名空间?

    我刚刚启动 i18next 我想为项目中的每个模块创建翻译文件 看起来使用命名空间是执行此操作的正确方法 该项目可以使用多个视图创建页面布局 因此我需要能够同时翻译多个命名空间中的字符串 我创建了一个具有两个命名空间的简单示例 但我只能使用
  • AngularJs:当放置在 ng-view 标签内时,ng-include 不起作用

    我正在通过 ng view 内的角度路线加载 html 页面 我正在加载的页面包含一个 ng include 标签 指向 另一个 html 文件 我尝试了以下所有语法 div src div div div div src include
  • 使用 javascript 将子元素添加到父元素

    我正在尝试添加一个子元素 to a 父元素如下 li要添加到ul 单击 Enter 按钮或按下键盘上的 Enter 键时 会生成一个新的li and delete按钮应该添加到ul 我的代码无法正常工作 有人可以帮我解决这个问题吗 HTML
  • 如何在 Javascript 中检测网络丢失?

    我的 Web 应用程序适用于多种手持设备 例如 iPad Galaxy 选项卡等 应用程序从服务器请求图像并在客户端上呈现 现在的问题有时会发生 在图像渲染过程中网络连接会丢失 而不是在设备上显示 html 无图像图标时 我想优雅地处理这种

随机推荐