JavaScript Chrome 扩展 - 从弹出窗口到内容创建新选项卡后发送消息

2024-03-10

在我的扩展的 popup.js 中,我想创建一个新选项卡并发送一条消息。 content.js 必须监听消息并回答,但它不起作用!我尝试了很多在其他问题中找到的解决方案,但没有成功 这是我的文件:

{
  //Manifest.json
  "name": "Stampa cedolini",
  "description": "stampa automatica dei cedolini",
  "version": "1.0",
  "permissions": [
      "tabs", "http://*/*", "https://*/*"
   ],

  "content_scripts":  [{
     "matches": [ "http://*/*", "https://*/*"],
     "js": [ "jquery-2.1.3.min.js" ,"content.js"]
   }],

  "browser_action": {
       "default_title": "Scegli la persona.",
       "default_icon": "icon.png",
       "default_popup": "popup.html"
   },
  "manifest_version": 2
}

弹出.js:

function click(e) {
    var link1 = "http://www.example1.it";

var link2 = "http://www.example2.com";
if (e.target.id === "pippo") {
    chrome.tabs.create({ url: link1 }, function(tab) {
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            // your code ...
            chrome.tabs.executeScript({code:"console.log('"+tabs[0].id+"')"});
            //chrome.tabs.executeScript({code:"alert("+tabs[0].id+");"});
            chrome.tabs.sendMessage(tabs[0].id, {persona: "pippo"});
        });
    });
} else {
    chrome.tabs.create({ url: link2 }); 
}
 //window.close();
}

document.addEventListener('DOMContentLoaded', function () {
   var divs = document.querySelectorAll('div');
   for (var i = 0; i < divs.length; i++) {
   divs[i].addEventListener('click', click);
}
});

和内容.js:

chrome.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
     alert("from a content script:" + sender.tab.url);
     if (request.persona == "pippo") {
         sendResponse({risp: "ricevuto"});
     }
});

tabs.create 回调中的 console.log(tab.id) 被打印,但似乎发送消息失败 有人能帮我吗?? 谢谢


默认情况下,您的内容脚本加载于document_idle.

这意味着当您发送消息时,消息尚未到达,并且没有任何人会监听您的消息。

如果您要从代码创建选项卡,最好以编程方式注入内容脚本,而不是依赖清单注入,并使用回调来确保其完成执行。

chrome.tabs.create({ url: link1 }, function(tab) {
  // Why do you query, when tab is already given?
  chrome.tabs.executeScript(tab.id, {file:"jquery-2.1.3.min.js"}, function() {
    // This executes only after jQuery has been injected and executed
    chrome.tabs.executeScript(tab.id, {file:"jcontent.js"}, function() {
      // This executes only after your content script executes
      chrome.tabs.sendMessage(tab.id, {persona: "pippo"});
    });
  });
});

也就是说,您可能需要考虑在后台脚本中而不是在弹出窗口中调用此代码。一旦弹出窗口失去焦点,您的弹出页面就会开始卸载,并且您的代码可能无法完成执行。最好向后台脚本发送消息以请求创建选项卡。

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

JavaScript Chrome 扩展 - 从弹出窗口到内容创建新选项卡后发送消息 的相关文章

  • HTML5 游戏到本机应用程序 [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在用 HTML5 制作游戏 我最熟悉 HTML5 并且比 C 等更高级的语言更喜欢它 HTML5
  • 检测 SVGAnimatedString 的类名

    我在构建 SVG 地图时遇到问题 触发的功能 g 上的 onmouseover 不起作用 我当时用的 window onmouseover function e console log e target className 查看类名是否有问
  • 正则表达式没有按预期工作?

    我有这个正则表达式 new RegExp a z 0 9 ig 我正在测试一个不应该工作的字符串 vc 但它确实通过了测试 而且它不应该 new RegExp a z 0 9 ig test vc true 但如果我删除其中一个 or or
  • 如何制作复选按钮? (带有标签的隐藏复选框作为按钮:仅限 CSS)

    Using 方法1 创建可点击标签 https stackoverflow com a 6293626 1326147 用 CSS 隐藏复选框 https stackoverflow com a 18078908 1326147 and 使
  • webpack 加载器并包含

    我是 webpack 的新手 我正在尝试了解加载器及其属性 例如测试 加载器 包含等 这是我在 google 中找到的 webpack config js 的示例片段 module loaders test js loader babel
  • Javascript:更改浏览器后退按钮的功能

    有没有办法让用户的浏览器上的后退按钮调用 JavaScript 函数而不是返回页面 您无法覆盖这样的行为 如果用户通过链接访问您的页面 则单击 后退 将使他们再次离开该页面 但是 您可以使页面上的 JavaScript 操作将条目添加到历史
  • 如何处理 React JSX 中的长类名?

    假设我在 React JSX 中渲染这个组件 render return h1 Some text h1 这些类触发我的 JS linter 的行太长 而且很难阅读 怎样才能分开长className将 React 组件中的属性分成多行而不破
  • 在各种分辨率下通过百分比宽度将根 div 居中

    我需要通过基于百分比的宽度而不是基于像素的宽度将根 div 居中 container width 80 margin 0px auto 它将容器相对于页面居中 并在 1366 706 分辨率下正常工作 但在 1280 1024 下不起作用
  • 如何使用jsPDF设置图像以适合页面宽度?

    有什么办法可以解决这个问题吗 我尝试以毫米为单位设置宽度和高度 如何将其设置为全角 您可以获取 PDF 文档的宽度和高度 如下所示 var doc new jsPDF p mm a4 var width doc internal pageS
  • 在浏览器中打开的 .mhtml 文件中填写输入

    我想对 mhtml 文件运行 e2e 测试 即填写表格 在 mhtml 文件上查看和提取数据效果非常好 但我无法填写任何内容input字段 既不是手动也不是通过木偶操作者 你可以用这个试试 mhtml 文件 https gist githu
  • 如何使用javascript通过类名更改html元素的值

    这是我用来更改 html 元素值的代码 a class classname href Vtech com This text to be chnage a 如何在页面加载瞬间更改此文本 看来你需要添加DOMContentLoaded或者把你
  • 查找 JavaScript 中函数参数的数量[重复]

    这个问题在这里已经有答案了 可能的重复 获取函数的元数 https stackoverflow com questions 4848149 get a functions arity 假设我有 function a x function b
  • 如何从 WinRT StreamSocket 读取所有可用数据并清空 inputStream?

    我想在向套接字写入新数据之前读取当前正在等待套接字的所有数据 WinRT中的读取方法都是异步的 所以我不能简单地while直到套接字为空 由于我确实想丢弃套接字上的数据 因此我不想使用读取器 而是直接从套接字读取数据IInputStream
  • Javascript 警报/消息框中的欧元符号或其他实体

    有谁知道我如何在 javascript 警报窗口中显示欧元或其他 html 实体 alert u20AC HTML 实体字符查找 http leftlogic com lounge articles entity lookup
  • jQuery .nothas?

    有没有办法做相当于 nothas jQuery 中的选择器 例如 如果我想添加一个TBODY to all TABLE如果元素还没有 那么最好做这样的事情 TABLE nothas TBODY append tbody tbody 如果这可
  • 图像未显示在从 HTML 创建的 PDF 上

    我想动态创建 PDF 这意味着我将从 Google Drive 获取文件 然后将它们放入 HTML 代码中 并尝试从中创建 PDF 一切工作正常 除了图像没有显示 我现在正在做的是 从 HTML 字符串创建 HtmlOutput 获取该 H
  • 选择 jQuery 数据网格插件? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 仅使用 javascript 获取网站的正文元素

    我想检索以下网站的正文内容http sports espn go com nhl bottomline scores nhl s left1 http sports espn go com nhl bottomline scores nhl
  • ReactJS setState 仅在嵌套在 setState 中时才有效

    问题 当我使用 this setState 并在回调中输出状态时 它根本不会改变 但是当我将 setstate 嵌套在 setstate 中时 它将正常工作 例子 这不行 this setState data newData 这确实有效 t
  • 在哪里放置资源特定逻辑

    您能帮我考虑在 AngularJS 中将资源 服务 特定的业务逻辑放置在哪里吗 我觉得在我的资源上创建一些类似模型的抽象应该很棒 但我不确定如何做 API调用 gt GET customers 1 lt first name John la

随机推荐