javascript - 将函数“getBgColors”作为addListener回调运行的正确语法是什么？

我正在阅读本教程，其中内容脚本inject.js查询并计算页面上CSS选择器的数量，并将数据返回到后台脚本event.js：Colorpeek, Part 2: Building Your First Chrome Extension | CSS-Tricks

本教程示例适用于chrome.browserAction.onClicked.addListener(getBgColors)。

它不适用于chrome.webNavigation.onDOMContentLoaded.addListener(getBgColors)

从addListener调用getBgColors的适当语法是什么？

我向manifest.json添加了以下权限：

  "background": {
    "scripts": ["event.js"],
    "persistent": false
  },
  "permissions": [
    "webNavigation",
    "tabs",
    "<all_urls>"
  ]

我已经通过在event.js中测试以下内容来确认webNavigation可以正常工作：

chrome.webNavigation.onDOMContentLoaded.addListener(function(e) {
    alert("SUCCESS!");
}, {url: [{hostSuffix: 'testdomain.com'}]});

如何使用chrome.webNavigation.onDOMContentLoaded.addListener(getBgColors)当前成功创建的webNavigation创建相同的警报？

我希望了解JavaScript的人可以帮助我从webNavigation事件侦听器调用函数“ getBgColors”的语法。我无法从webNavigation运行此功能。

我该如何工作？

chrome.webNavigation.onDOMContentLoaded.addListener(function(tab) {
    getBgColors(tab); // This should be invoked when I visit the hostSuffix domain.
}, {url: [{hostSuffix: 'testdomain.com'}]});

请参见下面的代码。



这是背景脚本event.js：

// Execute the inject.js in a tab and call a method,
// passing the result to a callback function.
function injectedMethod (tab, method, callback) {
  chrome.tabs.executeScript(tab.id, { file: 'inject.js' }, function(){
    chrome.tabs.sendMessage(tab.id, { method: method }, callback);
  });
}

function getBgColors (tab) {
  // When we get a result back from the getBgColors
  // method, alert the data
  injectedMethod(tab, 'getBgColors', function (response) {
    alert('Elements in tab: ' + response.data);
    return true;
  });
}

// Currently alerts with number of elements
chrome.browserAction.onClicked.addListener(getBgColors);
// Currently does nothing
chrome.webNavigation.onDOMContentLoaded.addListener(getBgColors);

这是内容脚本inject.js：

// This helps avoid conflicts in case we inject
// this script on the same page multiple times
// without reloading.
var injected = injected || (function(){

  // An object that will contain the "methods"
  // we can use from our event script.
  var methods = {};

  // This method will eventually return
  // background colors from the current page.
  methods.getBgColors = function(){
    var nodes = document.querySelectorAll('*');
    return nodes.length;
  };

  // This tells the script to listen for
  // messages from our extension.
  chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
    var data = {};
    // If the method the extension has requested
    // exists, call it and assign its response
    // to data.
    if (methods.hasOwnProperty(request.method))
      data = methods[request.method]();
    // Send the response back to our extension.
    sendResponse({ data: data });
    return true;
  });

  return true;
})();

最佳答案

您不能在两个事件侦听器中直接使用“ getBgColors”回调，因为参数不兼容，在阅读文档后可以清楚地看到：

chrome.browserAction.onClicked.addListener：


  callback参数应为如下所示的函数：
  
  function( tabs.Tab tab) {...};


chrome.webNavigation.onDOMContentLoaded.addListener


  callback参数应为如下所示的函数：

function(object details) {...};
   object   details
   integer  tabId   The ID of the tab in which the navigation occurs.
   ...

由于您的getBgColors函数仅需要tab.id，因此请从参数中将选项卡ID移至任一事件，然后仅使用该选项卡ID调用getBgColors方法：

chrome.browserAction.onClicked.addListener(function(tab) {
    getBgColors(tab.id);
});
chrome.webNavigation.onDOMContentLoaded.addListener(function(details) {
    getBgColors(details.tabId);
});

function injectedMethod(tabId, method, callback) {
  chrome.tabs.executeScript(tabId, { file: 'inject.js' }, function(){
    chrome.tabs.sendMessage(tabId, { method: method }, callback);
  });
}