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>"
  ]

我已经确认webNavigation正在通过在event.js中测试以下内容来实现：

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：

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

运行函数＆＃34; getBgColors＆＃34;的正确语法是什么？作为addListener回调？

1 个答案: