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

Question

我正在学习本教程，其中内容脚本 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;
})();

Answer 1

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

chrome.browserAction.onClicked.addListener :

The callback parameter should be a function that looks like this:

function( <a href="https://developer.chrome.com/extensions/tabs#type-Tab" rel="noreferrer noopener nofollow">tabs.Tab</a> tab) {...};

chrome.webNavigation.onDOMContentLoaded.addListener

The callback parameter should be a function that looks like this:

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

自从您的 getBgColors功能只需要tab.id ，从任一事件的参数中取出选项卡 ID，然后调用 getBgColors仅使用此选项卡 ID 的方法:

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