JavaScript Chrome扩展程序-从弹出窗口创建新标签页后向内容发送消息

Question

在我的扩展程序的 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
}

popup.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);
}
});

以及 content.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)被打印，但似乎发送消息失败了。有人可以帮忙吗？谢谢。

- Marco Mirabile

---

@Adam 虽然你的编辑改善了语法，但引入了一些概念上的错误。我撤销了你的编辑。 - Xan

Answer 1

您的内容脚本默认在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"});
    });
  });
});

话虽如此，你可能需要考虑在后台脚本中调用此代码而不是在弹出窗口中调用。一旦弹出窗口失去焦点，你的弹出窗口页面就开始卸载，你的代码可能无法完成执行。最好的方法是向后台脚本发送请求以创建选项卡。

- Xan

---

谢谢你的建议和解释！我是Chrome扩展的新手...我会在今晚尝试并告诉你结果。 - Marco Mirabile

非常感谢！现在它可以工作了！！终于我明白了如何扩展交换消息！ - Marco Mirabile

救了我的一天。我本来一切都做得没问题，只是不理解时间问题。 - hassanrazadev

Manifest v3 的更新：chrome.tabs.executeScript 已被 chrome.scripting.executeScript 替换，具有不同的方法签名。还可能需要在清单文件中添加 host_permissions 来针对目标选项卡。 - Yogi