Chrome扩展程序 - 从弹出式窗口中打开新标签页并向其发送消息

时间:2016-12-21 10:27:22

标签: google-chrome-extension tabs popup listener message

我需要为此任务找到解决方案:

  1. 从弹出窗口中的网站列表中打开指定的网站

  2. 通过此网站运行指定的内容脚本操作。

  3. 所以我需要指定在打开网站时应该执行内容脚本的部分内容。因此,我尝试从弹出窗口向新打开的选项卡发送消息,以指定应执行的内容:

    popup.js:

    (function($) {
    
      $(document).ready(function() {
    
        $('#grantexpert').click(function () {
    
          var newURL = "https://www.grantexpert.sk";
          chrome.tabs.create({ url: newURL }, function(tab) {
    
            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
              chrome.tabs.sendMessage(tabs[0].id, {type: "action_example"});
            });
    
          });
    
        });
      });
    })(jQuery);
    

    content.js:

    chrome.runtime.onMessage.addListener(
    
      function(request, sender, sendResponse) {
    
        switch(request.type) {
    
          case 'action_example':
            alert('running action-example');
            break;
    
        }
      }    
    );
    

    这不起作用,警报没有显示。任何标签/弹出窗口的控制台都没有错误。这是一种错误的做法吗?怎么可能完成?

    更新 我无法使用此答案的解决方案:Chrome extension create new tab and send message from popup.js to content script of new tab因为内容脚本发送了一条消息,但我需要从弹出窗口发送消息。

2 个答案:

答案 0 :(得分:1)

我发现很少有评论说在创建标签后立即向标签的内容脚本发送消息太早了,所以可能是真的(需要验证来源)。

我找到了另一个解决方案:

popup.js 我正在为background.js发送消息(应该执行“test”):

  $(document).ready(function() {

    $('#grantexpert').click(function () {

      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

        // message for content scripts
        // chrome.tabs.sendMessage(tabs[0].id, {type: "start-test", test: "grantexpert"});

        // message for background scripts
        chrome.runtime.sendMessage({type: "start-test", test: "grantexpert"});
      });

    });
  });

background.js 我正在收听来自popup.js的消息(案例“start-test”),创建新选项卡并设置全局变量testname(运行什么是什么测试当前测试步骤 - 一步是一页加载:

var step = 0;
var test = 'no-test';

// Message listener
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {

  switch(request.type) {

    case "start-test":
      startTest(request.test);
      break;

    case "is-test-running":
      sendResponse({test: test, step: step});
      break;

    case "increment-step":
      step = step + 1;
      break;

    case "end-test":
      test = 'no-test';
      alert('Koniec testu');

  }

  return true;

});

function startTest(testname) {

  test = testname;
  step = 1;

  var newURL = "https://www.grantexpert.sk";
  chrome.tabs.create({ url: newURL });
  alert('ZAČIATOK TESTU: '+test);

}

content.js 上每个页面加载(包括标签创建)我发送消息给backgorund.js并等待响应(检查测试是否正在运行 - 如果是,指定的部分代码应该是根据测试和正在运行的步骤在content.js中执行:

// every pageload
$(document).ready(function() {

  // check if test is running
  chrome.runtime.sendMessage({type: "is-test-running"}, function(response) {

     switch (response.test) {

       case 'no-test':
         // do nothing if no test is running
         break;

       default:
         // increment step of test on pageload if test is running
         chrome.runtime.sendMessage({type: "increment-step"});
         // calling custom external testing functions by eval
         eval('test_'+response.test+'('+response.step+');');
     }
  });


}, true);

所以重点不是从弹出窗口向新创建的选项卡发送消息及其内容脚本(必须执行某些操作),而是在pageload上从content.js发送消息并从background.js请求信息必须执行什么操作。 "What action has to be executed"存储在background的全局变量中,可以通过popup.js中的消息设置

答案 1 :(得分:0)

为什么在创建新标签后,您只是在回调中使用tab参数? 此代码应向您新创建的选项卡发送消息:

chrome.tabs.create({ url: newURL }, function(tab) {
   chrome.tabs.sendMessage(tab.id, {type: "action_example"});
});